Select by id (only one object can be selected through id), for example: $ ("# div2 ")
<Div id = "div1"> AAA </div>
<Div id = "div2"> BBB </div>
<Div id = "div3"> CCC </div>
Select by TAG, for example, $ ("span ")
<Div> <span> AAA </span> </div>
<Div> BBB </div>
<Span> CCC </span>
Select a style class name, for example, $ (". class1 ")
<Div class = "class1"> AAA </div>
<Div class = "class2"> BBB </div>
<Div class = "class1"> CCC </div>
Select all objects: $ ("*")
Can be used in combination, such as: $ ("# btn2,. class1, span ")
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script src = "http://code.jquery.com/jquery-1.4.2.min.js"> </script>
</Head>
<Body>
<Span> span1 </span>
<Div>
<Button id = "btn1"> button1 </button> <br/>
<Button id = "btn2"> button2 </button> <br/>
</Div>
<Div>
<Label class = "class1"> label1 </label> <br/>
<Label class = "class2"> label2 </label> <br/>
</Div>
<Span> span2 </span>
</Body>
</Html>
<Script>
// Modify the color Style of the selected object to red
$ ("# Btn2,. class1, span" ).css ("color", "red ");
</Script>
Hierarchical selection, such as: $ (". class1 div label ")
<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>
For example: $ (". class1 span") or $ (". class1"). find ("span ")
<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, for example, $ (". class1> span"). If no center exists, select all child objects that meet the condition.
<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>
After that, for example, $ ("div + span"); this Selects all the spans that follow the div
<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>
For example, $ ("# id2 ~ * "); This is selected # All (*) objects at the same level after id2
<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>
For example, $ ("# id3 label, # id3 ~ Span ")
<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 other elements at the same level, such as $ ("# id2"). siblings ()
<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 another span at the same level, for example, $ ("# id2"). siblings ("span ")
<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>