JQuery attribute and CSS operations, jquery attribute css operations

JQuery attribute and CSS operations, jquery attribute css operations

Attribute
1. Attributes
1.1 attr (name | properties | key, value | key, fn)
1) Get the property value $ ("img"). attr ("src ");
2) set the attribute value $ ("img "). attr ("title", "hello"); $ ("img "). attr ({src: "img1.png", alt: "img1 "})
3) set the attribute value $ ("img "). attr ("alt", function (index, value) {return value + index}) // index is the index of the current element, and 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 );
$ ("Input [type = 'checkbox']"). prop ("checked", function (I, val) {return! Val ;});
1.4 removeProp (name)
Used to delete the property set by the. prop () method
1.5 differences between attr () and prop ()
Properties with both true and false attributes, such as checked, selected, or disabled using prop (), and others using 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 "classone ";
}
Else
{
Return "classtwo ";
}
})
3. HTML code | text | value
3.1 html ([val | fn])
Get content $ ("div" ).html () Get the html content of the First Matching Element
Set content $ ("div" ).html ("<p> <span> htmlhtmlhtml </span> </p> ");
$ ("Div" functions .html (function (index, html) {return html + index })
3.2 text ([val | fn])
Get content $ ("p"). text ()
Set content $ ("p"). text ("texttexttext ")
$ ("P"). text (function (index, text) {return index + text })
3.3 val ([val | fn | arr])
Get the value $ ("input"). val ();
Set the value $ ("input"). val ("2222222 ");
$ ("Input"). val (function (index, value) {return index + value })
Used for check/select value // Array Operations
$ ("Input"). val (["check2", "radio1"]);
CSS
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 "})
$ ("P" ).css ({
Width: function (index, value) {return parseFloat (value) * 1.2 ;},
Height: function (index, value) {return parseFloat (value) * 1.2 ;}
})
1.2 jQuery.css Hooks
2. Location
2.1 offset ([coordinates]) gets the relative offset of the matching element in the current view.
Get the offset value $ ("p"). offset ()
Set the offset value $ ("p"). offset ({top: 100, left: 100 })
$ ("P"). offset (function (I, c) {// c represents the current coordinate of the selector
NewPos = new Object ();
NewPos. left = c. left + 100;
NewPos. top = c.top + 100;
Return newsPos;
})
2.2 position () obtains the offset between the matching element and the parent element.
$ ("P"). position ()
2.3 scrollTop ([val]) obtains the offset of the matching element relative to the top of the scroll bar.
Get $ ("p"). scrollTop ()
Set $ ("p"). scrollTop (500)
2.4 scrollTop ([val]) obtains the offset of the matching element relative to the top of the scroll bar.
Get $ ("p"). scrollLeft ()
Set $ ("p"). scrollLeft (500)
3. Dimensions
3.1 height ([val | fn])
Get $ ("p"). height ()
Set $ ("p"). height (500)
$ ("P"). height (function (I, c) {return c + 200 ;})
3.2 width ([val | fn])
Get $ ("p"). width ()
Set $ ("p"). width (500)
$ ("P"). width (function (I, c) {return c + 200 ;})
3.3 innerHeight () is used to obtain the height of the internal area of the First Matching Element (including padding), excluding the border ).
$ ("P"). innerHeight ();
3.4 innerWidth () is used to obtain the internal area width (including pad) of the First Matching Element, excluding the border ).
$ ("P"). innerWidth ();
3.5 outerHeight ([options]) gets the external height of the First Matching Element (including the padding and border by default ).
If the options value is true, the margin (margin) is calculated. The default value is false.
3.6 outerWidth ([options]) gets the external width of the First Matching Element (including the padding and border by default ).
If the options value is true, margin (margin) is calculated. Default Value: