Home > Developer > Web Develop
First, the basic operation
1.html ()-innerHTML property similar to native Dom
* Get-html ();
* Settings-HTML ("HTML code");
2.val ()-similar to the native Dom's Value property
* Get-Val ();
* Set-Val (value);
3.text ()-textcontent property similar to native Dom
* Get-text ();
* Settings-text ("text content");
4.attr ()-Gets or sets the properties of the specified element
* Get-attr (attrname)-Similar to GetAttribute ()
* Set-attr (Attrname,attrvalue)-Similar to setattribute ()
*removeattr (Attrname)-Similar to RemoveAttribute ()
Example:
1 <ulID= "City">2 <LiID= "BJ"name= "Beijing">Beijing</Li>3 <LiID= "TJ"name= "Tianjin">Tianjin</Li>4 <LiID= "NJ"name= "Nanjing">Nanjing</Li>5 </ul>6 <inputtype= "text"ID= "User"value= "Please enter your user name">View Code
1 //html ()2$ ("#bj"). HTML ("New York");//then Beijing was replaced by New York3$ ("#city"). HTML ("<li> China </li>");//all elements under UL are removed and replaced4 5 //Val ()6Console.log ($ ("#user"). Val ());//Get value Values7$ ("#user"). Val ("Please enter password");//Setting value Values8 9 //text ()TenConsole.log ($ ("#bj"). Text ());//get the text in a node One$ ("#bj"). Text ("Changchun");//Modify the text in a node AConsole.log ($ ("#city"). Text ());//get only the text node content in the tag -$ ("#city"). Text ("Hello");//equivalent to $ ("#city"). html ("Hello"); - the //attr () -Console.log ($ ("#bj"). attr ("name"));//Beijing -$ ("#bj"). attr ("name", "BJ");//Modify the Name property to BJ -$ ("#tj"). attr ({name: "TJ", "Data-i": 2});//Batch Modify | Set properties (data-i without quotation marks syntaxerror:unexpected token-) +$ ("#tj"). Removeattr ("name");//Remove the Name propertyView Code
Second, style operation
1.attr ("Class", Classvalue)-Set Style | properties
2.addClass ("ClassName")-Append style
3.removeClass ()-delete style
* No parameter-delete all styles
* Send parameter-delete the specified style
4.toggleClass ()-Toggle Style
* Only one parameter is accepted
* Switch between no style and specified style
5.hasClass ()-Judging style
* Determines whether the specified element contains a specified style
6.CSS ()-Operation style
* Set
*css (Name,value)
*CSS (Options)
*options-Options
{
Name:value,
Name2:value2,
...
}
* Get-CSS (name);
Example:
1 <style>2 Div{3 width:100px;4 Height:100px;5 Border:Solid 1px Black;6 background:Pink;7 float: Left;8 Margin-right:10px;9 }Ten . One{ One width:50px; A Height:50px; - background:Yellow; - } the . the{ - width:150px; - Height:150px; - background:Green; + } - </style> + </Head> A at <Body> - <ButtonID= "BTN1">attr ()</Button> - <ButtonID= "BTN2">AddClass ()</Button> - <ButtonID= "Btn3">Removeclass ()</Button> - <ButtonID= "Btn4">Toggleclass ()</Button> - <ButtonID= "Btn5">Hasclass ()</Button> in <ButtonID= "Btn6">CSS ()</Button> - <BR></BR> to <DivID= "D1"></Div> + <DivID= "D2"></Div>View Code
1 //attr ()2$ ("#d1"). attr ("Class", "one");//Set Class Property3 4 //addclass ()5$ ("#d1"). AddClass ("both");//Append | overlay6 7 //removeclass ()8$ ("#d1"). Removeclass ();//Delete all equivalent. class= ""9$ ("#d1"). Removeclass ("both");//There are both deleteTen One //Toggleclass () A$ ("#d1"). Toggleclass ("one");//There is delete, none add - - //hasclass () theConsole.log ($ ("#d1"). Hasclass ("one"));//returns a Boolean value - - //css () -$ ("#d2"). css ({ +"Background": "Red",//Delete the current property if set to null -"width": 50, +"Height": 50 A }); atConsole.log ($ ("#d2"). CSS ("float"));//gets the property value of the current node (all)View Code
jquery manipulating the DOM
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
