jQuery学习笔记—

jQuery学习笔记——遍历

jQuery——遍历

(1) 祖先：

3个方法：

.parent(); //返回被选元素的"直接"父元素

.parents(); //返回被选元素的"所有"祖先元素

　　->扩展：返回被选元素的"所有"祖先元素且是<ul>元素

　　　　$("#targetLi").parents("ul");

　　其他情况以此类推。

.parentsUntil(); //返回被选元素的"两个给定元素之间的"所有祖先元素

$("span").parentsUntil("div");

即：返回介于<span>与<div>元素之间的所有祖先元素

(2) 后代：

2个方法：

.children(); //返回被选元素的所有直接子元素

.find(); //返回被选元素的后代元素，一路递进直到最后一个后代

.find("*"); //返回被选元素的所有后代

(3)扩展，和筛选器同用的时候：

    <body>
        <div id="div1">
            <div id="div1-1" title="A">
                <div id="div1-1-1"></div>
            </div>
            <div id="div1-2" title="B">
                <div id="div1-2-1"></div>
                <div id="div1-2-2" title="B">
                    <div id="div1-2-2-1"></div>
                </div>
            </div>
        </div>
    </body>

case1:

case2:

case3:

case4:

总结出，在筛选器里面带有">"的，就会只遍历直接下属层(儿子层)，而不会遍历更下属层(孙子层，曾孙子层...)

同时，支持筛选器的各项语法。

(4) 同胞：

7个函数：

————————————————————————

前后都遍历

.siblings(); //返回被选元素的所有同胞元素

————————————————————————

只向后遍历：

.next(); //返回被选元素的下一个同胞元素

.nextAll(); //返回被选元素的所有跟随的同胞元素

.nextUntil(); //返回被选元素和指定元素之间的所有跟随的同胞元素

如： $("h2").nextUntil("h6"); //返回介于 <h2> 与 <h6> 元素之间的所有同胞元素

————————————————————————

只向前遍历

.prev();.prevAll();.prevUntil();和前面的next反向类似，不再赘述。

(4) 过滤：

.first(); //首个

.last(); //尾个

.eq(); //指定index的

如： $("div").eq(3); //第4个div

.filter(); //规定一个标准，不符合标准的会被从集合删除，匹配的会被返回

如：$("p").filter(".intro"); //返回所有带有类名"intro"的<p>元素

.not(); //和.filter()相反

如：$("p").not(".intro"); //返回所有不带有类名"intro"的<p>元素