jquery选择器之基本筛选器

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--HTML区域-->
    <h1>第一个标题</h1>
    <div class="nav-2014">
        <div class="w">
            <div class="w-spacer"></div>
            <div class="categorys">
                <div class="dt">家用电器分类</div>
            </div>
            <span class="hr"></span>
            <div class="navitems-2014">
                <div id="treasure"></div>
                <span class="clr"></span>
                <span class="chr"></span>
                男：<input type="checkbox" checked="checked" value="nan">
                女:<input type="checkbox" value="nv">
            </div>
        </div>
    </div>
    <h2>第二个标题</h2>
    <div id="electronic">
        <div id="firstScreen">1
            <div class="w">2</div>
        </div>
        <ul>
            <div class="u_c" lang="en-us"></div>
            <li class="ui-switch-curr"></li>
            <li class="ui-switch-item"></li>
            <li class="ui-switch-next"></li>
            <li class="ui-switch-sub"></li>
        </ul>
        <div class="secord_screen"></div>
        <div class="third_screen"></div>
    </div>
</body>
</html>

　　伪类选择器：即以:开头的

　　:first 获取第一个元素

　　:not(selector) 去除所有选定的元素

　　:even 匹配索引为偶数的元素

　　:odd 匹配索引为奇数的元素

　　:eq(index) 匹配给定的索引

　　:gt(index) 大于指定的索引

　　:lt(index) 小于指定的索引

　　:last 匹配获取的最后一个元素

　　:header 匹配所有标题元素

　　示例：

    <!--jquery区域-->
    <script src="jquery-3.1.0.js"></script>
    <script>
//        获取id为electronic下所有孩子div中的第一个,即id为firstScreen的div
        $("#electronic > div:first")
//        获取所有li元素中最后一个元素
        $("li:last")
//        获取所有input元素中非checked的元素,即女:<input type="checkbox" value="nv">
        $("input:not(:checked)")
//        获取所有li元素中索引为0,2,4...的元素
        $("li:even")
//        获取所有li元素中索引为1,3,5...的元素
        $("li:odd")
//        获取所有li元素中索引为1的元素
        $("li:eq(1)")
//        获取所有li元素中索引大于1的元素
        $("li:gt(1)")
//        获取所有li元素中索引小于1的元素
        $("li:lt(1)")
//        给所有标题加上背景色
        $(":header").css("background","red")
        console.log(cls)
    </script>