jquery筛选器

　　1、过滤

　   eq(index|-index)  获取当前链式操作中第N个jquery对象，正数从0开始，负数从-1开始。

　　first 获取当前链式操作中第1个jquery对象

　　last 获取当前链式操作中最后一个jquery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>this is a test</p>
    <p>so it is</p>
    <p>this just a test</p>
    <div class="div"></div>
    <script src="jquery-3.1.0.js"></script>
    <script type="text/javascript">
//        获取所有返回的p元素中第一个和第-2个元素
        $("p").eq(1).text()
        $("p").eq(-2).text()
        $("p").first()
        $("p").last()
        console.log(objs)
    </script>
</body>
</html>

　　2、查找

　　children([expre])  所选元素下的所有子元素，

　　find(e|o|e) 搜索所有与指定表达式匹配的元素，包括子元素、孙元素等

　　next(expr) 所有匹配的元素紧临的下一个同辈元素的集合

　　nextAll([expr]) 所有匹配元素后面紧临的所有同辈元素的集合

　　prev([expr]) 所有匹配的元素紧临的前一个同辈元素的集合

　　prevAll([expr]) 所有匹配元素前面紧临的所有同辈元素的集合

　　parent([expr])  所有匹配元素的唯一父元素，即上一级元素，而不包括上上级元素

　　siblings([expr]) 所有匹配元素的前后同辈元素集合

 

示例代码

<!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 class="dp">家用电器价格</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>
            <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>
        <ul>
            <div class="ul_div"></div>
            <li class="lizi_ws_fruit" name="zhuang_guo">
                <div class="test">test</div>
                梨</li>
            <li class="ws_pingguo_fruit" name="zhuan_wang">苹果</li>
            <li id="elpsq" name="zhuang_dang"></li>
        </ul>
        <div class="secord_screen">
            <div></div>
        </div>
        <div class="third_screen"></div>
    </div>


    <!--jquery区域-->
    <script src="jquery-3.1.0.js"></script>
    <script>
//        匹配id为electronic元素的所有子元素，即下一级元素,孙元素不包括在内
        $("#electronic").children()
        $("#electronic").children("[class$=screen]")
//        匹配所有ul标签下的所有div标签，包括子元素及孙元素等
        $("ul").find("div")
//        匹配id为firstScreen的元素的下一个同辈元素,即ul元素
        $("#firstScreen").next()
//        匹配span标签的下一个同辈元素中属性为chr的元素
        $("span").next(".chr")
//        匹配id为firstScreen的元素后面的所有紧临同辈元素
        $("#firstScreen").nextAll()
//        匹配div标签中class值为test的父元素
        $("div .test").parent()
//        匹配class属性名为switch的前一个同辈元素
        $(".ui-switch-next").prev()
//        匹配class属性名为switch的前面所有同辈元素
        $(".ui-switch-sub").prevAll()
//        匹配class值为ui-switch-next的元素前后所有同辈元素
        $(".ui-switch-next").siblings()
//        匹配class值为categorys的元素的前后所有同辈元素中，span标签元素
        $(".categorys").siblings("span")
        console.log(objs)
    </script>
</body>
</html>

　　

　　

posted on 2016-12-18 13:15  孔扎根  阅读(676)  评论(0)    收藏  举报

导航