1. Obtain elements from the set by the specified sequence number
Html:
Copy codeThe Code is as follows:
<Div>
<P> 0 </p>
<P> 1 </p>
<P> 2 </p>
<P> 3 </p>
<P> 4 </p>
<P> 5 </p>
<P> 6 </p>
<P> 7 </p>
</Div>
JS
Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery (function (){
$ ("P" ).eq(2).css ("color", "red ");
$ ("P" ).eq(32.16.css ("color", "red ");
})
</Script>
2. Obtain the elements with the same conditions and the specified range.
Html:
Copy codeThe Code is as follows:
<Div>
<P> 0 </p>
<P> 1 </p>
<P class = "center"> 2 </p>
<P class = "center"> 3 </p>
<P> 4 </p>
<P> 5 </p>
<P> 6 </p>
<P> 7 </p>
</Div>
JS
Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery (function (){
$ ("P" ).filter('.center').css ("color", "red ");
})
$ (Function (){
$ ("P" ).slice(5,72.16.css ("color", "yellow ");
})
</Script>
3. Obtain elements consistent with the conditional expression.
Html:
Copy codeThe Code is as follows:
<Div>
<P> 0 </p>
<P> 1 </p>
<P class = "center"> 2 </p>
<P class = "center"> 3 </p>
<P> 4 </p>
<P class = "aa"> 5 </p>
<P> 6 </p>
<P> 7 </p>
</Div>
Js
Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery (function (){
$ ("P"). each (function (){
Switch (true ){
Case $ (this). is (". center "):
((This).css ("color", "red ");
Break;
Case $ (this). is (". aa "):
((This).css ("color", "yellow ");
Break;
}
})
})
</Script>
4. Obtain the previous and next elements of an element.
Html:
Copy codeThe Code is as follows:
<Div id = "aa">
<P> 1 </p>
<P class = "yes"> NO. 2 </p>
<P> NO. 3 </p>
<P> 4 </p>
<P> No. 5 </p>
<P class = "yes"> No. 6 </p>
<P class = "yes"> 7 </p>
</Div>
Js
Copy codeThe Code is as follows:
// Obtain the next element of the element
JQuery (function (){
$ ("P"). next (". yes" ).css ("color", "red ");
})
// Obtain the previous element of the element
JQuery (function (){
$ ("P"). prev (". yes" ).css ("color", "red ");
})
5. Obtain the parent and child elements of an element.
Html:
Copy codeThe Code is as follows:
<Div id = "aa">
<P> 1 </p>
<P class = "yes"> NO. 2 </p>
<P> NO. 3 </p>
<P> 4 </p>
<P> No. 5 </p>
<P class = "yes"> No. 6 </p>
<P class = "yes"> 7 </p>
</Div>
Js
Copy codeThe Code is as follows:
// Obtain the parent element of an element
JQuery (function (){
$ ("P" ).parent().css ("color", "red ");
})
// Obtain the child element of the element
JQuery (function (){
$ ("# Aa"). children (". yes" ).css ("color", "red ");
})