Home > Web Front-end > JS Tutorial > jQuery properties and CSS operations

jQuery properties and CSS operations

黄舟
Release: 2016-12-15 14:57:41
Original
980 people have browsed it

Attributes
1. Attributes
1.1 attr(name|PRoperties|key,value|key,fn)
1) Get attribute value $("img").attr("src");
2) Set attribute value $( "img").attr("title","Hello");$("img").attr({src:"img1.png",alt:"img1"})
3) Set attribute value $( "img").attr("alt",function(index,value){return value + index}) //index is the index of the current element, value is the original attribute value of "alt"
1.2 removeAttr(name)
Delete An attribute $("img").removeAttr("alt");
1.3 prop(name|properties|key,value|key,fn)
$("input[type='checkbox']").prop(" checked", true);
                                                                                                                                                                                                                          Used Delete the attribute set set by the .prop() method
1.5 The difference between attr() and prop()
Attributes with two attributes of true and false, such as checked, selected or disabled use prop(), others use attr()
2.CSS Class
2.1 addclass(class|fn)
$("p").addClasss("active focus");
$("ul li").addClass(function(i,class){return class+ i})
2.2 removeClass([name|fn])
$("p").removeClass("active");
$("p").removeClass(function(){return $(this).attr( "class")})
2.3 toggleClass(class|fn)
$("p").toggleClass("active");
$(".class").toggleClass(function(){
if($(this ).parent().is(".myClass"))
                                                                                                return "classtwo";
                                                                                                                                       return "classtwo";                                     html([val|fn])
Get the content $("div").html() Get the html content of the first matching element
Set the content $("div").html("

");                                                                            $("p").text()
                                                                                                                                                                                                                        Set content                                                                    3.3 Val ([Val | Fn | Arr])
Garment value $ ("input"). Val ();
Settings $ ("input"). Val ("2222222");
$ ("input"). val(function(index,value){return index + value})
Value used for check/select //Array operation

1.css
1.1 css(name|pro|[,val|fn])
Get the style property value $("p").css("color")
Set the style property value $("p").css("color","red")
$("p").css({ color:"red",width:"100px"})
                                                                                                                                                                                                                            width * 1.2;},
                                                                                                                     ,value){return parseFloat(value) * 1.2;}
                                                                                                                                                                                   
Get offset value $ ("p").offset()
                                                                                    using using                         ‐             out out out out out out out out of out using   ‐                out out out Through off ‐ ‐ ‐‐‐‐‐ offset(function(i,c){ //c represents the current coordinates of the selector
                                                                                                                                                                ​+ 100; ) Gets the offset of the matched element relative to its parent element.
            $("p").position()
  2.3 scrollTop([val]) Gets the offset of the matching element relative to the top of the scroll bar.
                                                                              Using       using                 through   through out through out out through off through off through‐ through ‐‐‐‐‐‐ together to get the offset of the matched element relative to the top of the scroll bar.
                                                                                          using   using     using         out out out out out out out out out out out out out out out out out out of                           using ‐ ‐ ‐ ‐ ‐ ‐‐ ‐‐‐‐ between p").height( )
Set $ ​​("p"). Height (500)
$ ("p"). Height (function (i, c) {Return C+200;})
3.2 width ([Val | Fn])
Get $("p").width()
                                                                                                                                                                                                                                                                                     $("p") () Gets the height of the internal area of ​​the first matching element (including padding and excluding borders).​
​ ​ ​  $("p").innerHeight();
  3.4 innerWidth() Gets the width of the inner area of ​​the first matching element (including padding, excluding the border).​
​ ​ ​ $("p").innerWidth();
3.5 outerHeight([options]) Gets the outer height of the first matching element (default includes padding and border).
                                                        use   with margins included in the calculation if the options value is true. The default value is false
    3.6 outerWidth([options]) Gets the outer width of the first matching element (including padding and border by default). S If the Options value is True, the border is calculated, and the default value

The above is the content of the jQuery attribute and CSS operation. For more related articles, please pay attention to the PHP Chinese website (m.sbmmt.com)!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template