一. JQ-层级选择器

父子：

A** **B 获得A元素内部的所有的B元素。（祖孙）—后代
A>B 获得A元素下面的所有B子元素。（父子）

兄弟：

A+B **获得A元素同级下一个B元素（兄弟）
A~B 获得A元素之后的所有B元素（兄弟）

<script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            //1、获取id为main的span标签 内 所有的div标签
            var arr1 = $("#main div");//4
            //2、获取id为main的span标签 内 子元素div标签
            var arr2 = $("#main>div");//3
            //3、获取id为main的span标签 后 第一个div兄弟标签
            var x3 = $("#main+div");
            //4、获取id为main的span标签 后 所有的div兄弟标签
            var arr4 = $("#main~div");//2
        });
    </script>
</head>
<body>
    <span id="main">
        <div>111111</div>
        <div>222222</div>
        <div>333333</div>
        <span>
            <div>44444</div>
        </span>
    </span>
    <div>55555</div>
    <span>
        <div>66666</div>
    </span>
    <div>77777</div>
</body>

二.JQ-属性选择器（通配符）

[属性名] 获得有 指定属性名 的标签对象。
[属性名=值] 获得指定属性名等于指定值的标签对象
[属性名*=值] 获得指定属性名含有指定值的标签对象

多个属性选择器可以组合使用

[选择器1][选择器2][选择器3] ，多个属性同时过滤。where .. and … and …

了解：

[属性名!=值] 获得指定属性名不等于指定值的标签对象
[属性名^=值] 获得指定属性名以指定值 开头* 的标签对象*
[属性名$=值] 获得指定属性名以指定值 结尾* 的标签对象*

<script>
        $(function(){
            //1、获取所有存在type属性的标签
            var arr1 = $("[type]");
            //2、获取所有type属性为radio的标签
            var arr2 = $("[type='radio']");
            //3、获取所有type属性含有o的标签
            var arr3 = $("[type*='o']");
            //4、获取所有input标签中的单选框，且name为sex的标签
            var arr4 = $("input[type='radio'][name='sex']");
        });
    </script>
</head>
<body>
    用户名：<input type="text" name="uname" value="小刘"/><br />
    密码：<input type="password" name="pwd" value="123"/><br />
    性别：<input type="radio" name="sex" value="man" />男
    <input type="radio" name="sex" value="woman" />女<br />
    是否VIP：<input type="radio" name="vip" value="no" />不是
    <input type="radio" name="vip" value="yes" />是<br />
</body>

三. JQ-基本过滤选择器【重点】

筛选。

:first 第一个
:last 最后一个
:even 偶数，索引从 0 开始计数
:odd 奇数
:not(..) 除了指定内容。例如：1234:not(3) —> 124 例如：div:not(div:first)
:eq(index) 获取指定索引的元素 =
:gt(index) 大于n个 >
:lt(index) 小于n个 <

<script>
        $(function(){
            //1、在所有DIV标签中，获取第一个div
            var x1 = $("div:first");
//            alert(x1.html());
            //2、在所有DIV标签中，获取最后一个div
            var x2 = $("div:last");
            //3、在所有DIV标签中，获取所有偶数位的div。索引从0开始，0偶数
            var arr3 = $("div:even");
            //4、在所有DIV标签中，获取所有奇数位的div
            var arr4 = $("div:odd");
            //5、在所有DIV标签中，获取除了第一位以外所有的div
            var arr5 = $("div:not(div:first)");
            //6、在所有DIV标签中，获取索引等于1的div
            var x6 = $("div:eq(1)");
            //7、在所有DIV标签中，获取索引大于1的div
            var arr7 = $("div:gt(1)");
            //8、在所有DIV标签中，获取索引小于1的div
            var arr8 = $("div:lt(1)");
        });
    </script>
</head>
<body>
    <div>11111111，索引是0</div>
    <div>22222222，索引是1</div>
    <div>33333333，索引是2</div>
    <div>44444444，索引是3</div>
    <div>55555555，索引是4</div>
    <div>66666666，索引是5</div>
    <div>77777777，索引是6</div>
    <div>88888888，索引是7</div>
</body>