jquery基础小总结

一、jQuery 遍历-同胞

通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

1.（1）、siblings()

siblings() 方法返回被选元素的所有同胞元素。

1. <style>

2. .sibling *{

3. display: block;

4. border: 2px solid lightgrey;

5. color: lightgrey;

6. padding: 5px;

7. margin: 15px;

8. }

9. </style>

10. <div class="sibling">div (父元素)

11. <p>p</p>

12. <span>span</span>

13. <h2>h2</h2>

14. <h3>h3</h3>

15. <p>p</p>16. </div>

17. <script src="jquery-1.12.4/jquery-1.12.4.js"></script>

18. <script>

19. $(function(){

20. //选择 h2 标签所有的兄弟标签，设置样式

21. $("h2").siblings().css({"color":"red","border":"2px solid red"});

22. });

23. </script>

1.2、next()

next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。

1. //选择 h2 标签下一个的兄弟标签，设置样式

2. $("h2").next().css({"color":"red","border":"2px solid red"});

         

1.3、nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

1. //选择 h2 标签后所有的兄弟标签，设置样式

2. $("h2").nextAll().css({"color":"red","border":"2px solid red"})

              

1.4、nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

 

1. //选择介于 <p> 与 <h2> 元素之间的所有同胞元素，设置样式

2. $("p").nextUntil("h2").css({"color":"red","border":"2px solid red"});

3.5、prev(), prevAll() & prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相

反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之

后元素遍历）。

二、jQuery 遍历-过滤

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置

来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

方法

方法	描述
first()	返回被选元素的首个元素。 1. //选取首个 <div> 元素内部的第一个 <p> 元素 2. $("div p").first();
ast()	返回被选元素的最后一个元素。 1. //选择最后一个 <div> 元素中的最后一个 <p> 元素 2. $("div p").last();

eq()	返回被选元素中带有指定索引号的元素。 1. //选取第二个 <p> 元素 2. $("p").eq(1);
filter()	筛选出与指定表达式匹配的元素集合。 1. //返回带有类名 "url" 的所有 <p> 元素 2. $("p").filter(".url");
not()	筛选出与指定表达式不匹配的元素集合。与 filter()相反 3. //返回不带有类名 "url" 的所有 <p> 元素 4. $("p").not(".url");
has()	保留包含特定后代的元素，去掉那些不含有指定后代的元素。