jQuery选择器

1.父子级选择器

jQuery("parent>child")

parent：任何有效的选择器

child：用于过滤子元素的选择器（只能选择下一级，如a>b>c）

 1 <ul class="topnav">
 2       <li>Item 1li>
 3       <li>Item 2
 4         <ul>
 5             <li>Nested item 1li>
 6             <li>Nested item 2li>
 7             <li>Nested item 3li>
 8         ul>
 9     li>
10     <li>Item 3li>
11 ul>
12  
13 <script>
14     $("ul.topnav > li").css("border", "3px double red");
15 script>

 

2.后代选择器

jQuery("ancestor descendant")

ancestor：任何有效的选择器。

descendant：用于过滤后代元素的选择器。

一个元素的后代可以是该元素的子代，孙代，曾孙代，等等。

 1 <form>
 2     <div>Form is surrounded by the green border.div>
 3     <label for="name">Child of form:label>
 4     <input name="name" id="name">
 5     <fieldset>
 6         <label for="newsletter">Grandchild of form, child of fieldset:label>
 7         <input name="newsletter" id="newsletter">
 8     fieldset>
 9 form>
10 
11 <script>
12     $( "form input" ).css( "border", "2px dotted blue" );
13     $( "form fieldset input" ).css( "backgroundColor", "yellow" );
14 script>