jQuery 的筛选常用函数：

not, 排除指定的元素

slice， 选取指定元素的一个子集

find，选择一个元素，和空格操作相同，例如 $("p span")相同。

next, nextAll, nextUntil， 查找相邻的同辈元素（unitl的操作，不包含最终的那个元素）

parent, parents, parentsUntil 查找当前元素的祖先元素

prev, prevAll, prevUntil 查找当前元素的前一个同辈元素

contents， 选取当前元素的子元素

end 回到最近的一个破坏性操作之前，即，将匹配的元素列表变为前一次的状态

andSelf 加入先前选取的元素到当前元素中

sublings （兄弟意思）选取当前的元素的一个同辈元素的子集

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.11.1.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>========jQuery 的筛选操作2=========</p>

<p>Hello111</p>
<p id="selected">Hello Again</p>
<p>Hello222</p>

<p>Hello</p>
<p>cruel</p>
<p>World</p>


<p>Hello</p>
<div class="outer_div">
    <span>Hello Again11</span>
    <span class="selected">Hello Again22</span>
    <span>Hello Again33</span>
    <div>inner div</div>
</div>
<p>And Again


<p><span>Hello</span>, how are you?</p>

<p class="nextp">Hello</p>
<p class="selected">Hello Again next p</p>
<div class="selected">this is div,<span class="testparent">And Again</span></div>
<div class="selected2"><span>And Again2222</span></div>

<dl>
    <dt>term 1</dt>
    <dd>definition 1-a</dd>
    <dd>definition 1-b</dd>
    <dd>definition 1-c</dd>
    <dd>definition 1-d</dd>

    <dt id="term-2">term 2</dt>
    <dd>definition 2-a</dd>
    <dd>definition 2-b</dd>
    <dd>definition 2-c</dd>

    <dt>term 3</dt>
    <dd>definition 3-a</dd>
    <dd>definition 3-b</dd>
</dl>


<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>


<p>Hello</p>
<div>this is div,<span>Hello Again</span></div>
<p class="test_prev">And Again test_prev</p>
<p>And Again test_prev after</p>


<dl>
    <dt>term 1</dt>
    <dd>definition 1-a</dd>
    <dd>definition 1-b</dd>
    <dd>definition 1-c</dd>
    <dd>definition 1-d</dd>

    <dt id="term2">term 2</dt>
    <dd>definition 2-a</dd>
    <dd>definition 2-b</dd>
    <dd>definition 2-c</dd>

    <dt>term 3</dt>
    <dd>definition 3-a</dd>
    <dd>definition 3-b</dd>
</dl>


<p class="test_end"><span>Hello</span>,how are you?</p>

<p class="test_content">Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

<div class="test_div">this is div
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
</div>


<div class="test_subling"><span>Hello</span></div>
<p class="selected2">Hello Again22222</p>
<p>And Again</p>

</body>
</html>
<script>
    $(function () {
        //not(expr|ele|fn) 排除元素
        // $("p").not($("#selected")).css("color", "red")

        //slice 选取元素的一个子集
        //$("p").slice(0, 1).wrapInner("<b></b>");

        //children 选取元素的子元素
        // $("div.outer_div").children().css("color", "red");
        //$("div").children(".selected").css("color", "red");

        //find 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
        //$("p").find("span").css("color", "red");
        //$("p span").css("color", "red");

        //next找到每个段落的后面紧邻的同辈元素。
        // $("p.nextp").next().css("color", "red");
        //$("p.nextp").next(".selected").css("color", "red");

        //nextAll 查找当前元素之后所有的同辈元素。
        //$("p.nextp").nextAll(".selected").css("color", "red");

        //nextUntil 直到出现某个元素之前，选取一个范围
        //$('#term-2').nextUntil('dt').css('color', 'red');

        //parents 祖先元素
        // $("span.testparent").parents().css("color","red");//直接找到了body,然后设置了style="color:red"

        //parent 直接祖先
        // $("span.testparent").parent().css("color","red");

        //parentsUntil 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。(不包括那个元素)
        //$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');

        //prev前一个同辈元素。
        // $("p.test_prev").prev().css("color", "red");


        //prevAll查找当前元素之前所有的同辈元素
        //$("p.test_prev").prevAll().css("color", "red");

        //查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。(不包括那个同辈的元素)
        // $('#term2').prevUntil('dt').css('background-color', 'red');

        //end 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
        /**
         * 选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素
         */
        // $("p.test_end").find("span").css("color","yellow").end().css("background-color", "red");

        //content 这个例子是选择类test_content的元素p的子元素
        //$("p.test_content").contents().css("color", "red");

        //andSelf加入先前所选的加入当前元素中
        //$("div.test_div").find("p").css("color", "yellow").andSelf().css("background-color", "red");


        //siblings (兄弟意思)取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
        //$("div.test_subling").siblings(".selected2").css("background-color", "red");
    });

</script>

jQuery的筛选操作2

jQuery 的筛选常用函数：

猜你喜欢