Select by ID (only one object can be selected by ID), such as: $ ("#div2")
Copy Code code as follows:
<div id= "Div1" >AAA</div>
<div id= "Div2" >BBB</div>
<div id= "Div3" >CCC</div>
Select according to label, such as: $ ("span")
Copy Code code as follows:
<div><span>AAA</span></div>
<div>BBB</div>
<span>CCC</span>
Select according to the class name of the style, such as: $ (". Class1")
Copy Code code as follows:
<div class= "Class1" >AAA</div>
<div class= "Class2" >BBB</div>
<div class= "Class1" >CCC</div>
Select all objects are: $ ("*")
Can be mixed, such as (copy code):
<!doctype html> <ptml> <pead> <script src= "Http://code.jquery.com/jquery-1.4.2.min.js" >< /script> </pead> <body> <span>span1</span> <div> <button id= "BTN1" >button1< ;/button> <button id= "btn2" >button2</button> </div> <div> <label class= "Class1" >lab el1</label> <label class= "Class2" >label2</label> </div> <span>span2</span> < /body> </ptml> <script>//Modify the color style of the selected object to Red $ ("#btn2,. Class1, span"). CSS ("Color", "red"); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Layered selection, such as: $ (". Class1 Div Label")
Copy Code code as follows:
<div class= "Class1" >
<div id= "ID1" >111</div>
<div id= "Id2" ><span>222</span></div>
<div id= "ID3" ><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
such as: $ (". Class1 span")
Copy Code code as follows:
<div class= "Class1" >
<div id= "ID1" >111</div>
<div id= "Id2" ><span>222</span></div>
<div id= "ID3" ><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
Select only from the child layer, such as: $ (". Class1 > Span"); If there is no intermediate > will choose all the eligible descendants under its object
Copy Code code as follows:
<div class= "Class1" >
<div id= "ID1" >111</div>
<div id= "Id2" ><span>222</span></div>
<div id= "ID3" ><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
Thereafter, such as: $ ("div + span"); This will select all spans immediately following the Div
Copy Code code as follows:
<div class= "Class1" >
<div id= "ID1" >111</div>
<div id= "Id2" ><span>222</span></div>
<div id= "ID3" ><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
The same level (back), such as: $ ("#id2 ~ *"); This is all (*) objects at the same level after the #id2 selection
Copy Code code as follows:
<div class= "Class1" >
<div id= "ID1" >111</div>
<div id= "Id2" ><span>222</span></div>
<div id= "ID3" ><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
Mixed use, such as: $ ("#id3 label, #id3 ~ span")
Copy Code code as follows:
<div class= "Class1" >
<div id= "ID1" >111</div>
<div id= "Id2" ><span>222</span></div>
<div id= "ID3" ><label>333</label></div>
<span>444</span><br/>
<span>555</span>
</div>
The test tool used for the article Picture download address Javascripttest2.rar
