jQuery选择器

1.父子级选择器

jQuery("parent>child")

parent：任何有效的选择器

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

<ul class="topnav">
      <li>Item 1</li>
      <li>Item 2
        <ul>
            <li>Nested item 1</li>
            <li>Nested item 2</li>
            <li>Nested item 3</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>
 
<script>
    $("ul.topnav > li").css("border", "3px double red");
</script>

 

2.后代选择器

jQuery("ancestor descendant")

ancestor：任何有效的选择器。

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

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

<form>
    <div>Form is surrounded by the green border.</div>
    <label for="name">Child of form:</label>
    <input name="name" id="name">
    <fieldset>
        <label for="newsletter">Grandchild of form, child of fieldset:</label>
        <input name="newsletter" id="newsletter">
    </fieldset>
</form>

<script>
    $( "form input" ).css( "border", "2px dotted blue" );
    $( "form fieldset input" ).css( "backgroundColor", "yellow" );
</script>