概述jQuery的元素筛选_Javascript教程-查字典教程网

摘要：1、eq()筛选指定索引号的元素2、first()筛选出第一个匹配的元素3、last()筛选出最后一个匹配的元素4、hasClass()检查...

1、eq() 筛选指定索引号的元素

2、first()筛选出第一个匹配的元素

3、last() 筛选出最后一个匹配的元素

4、hasClass()检查匹配的元素是否含有指定的类

5、filter()筛选出与指定表达式匹配的元素集合

6、is() 检查元素是否参数里能匹配上的

7、map()

8、has()筛选出包含指定子元素的元素

9、not()排除能够被参数中匹配的元素

10、slice()从指定索引开始，截取指定个数的元素

11、children()筛选获取指定元素的资源

12、closest() 从当前元素开始，返回最先匹配到的符合条件的父元素

13、find()从指定元素中查找子元素

14、next() 获取指定元素的下一个兄弟元素

15、nextAll() 获取其后的所有兄弟元素

16、nextUntil() 获取其后的元素，直到参数能匹配上的为止,不包括结束条件那个

17、offsetPosition()返回第一个用于定位的祖先元素，即查找祖先元素中position为relative或absolute的元素。

18、parent()获取指定元素的直接父元素

19、parents() 获取指定元素的所有祖先元素，一直到<body></body>

20、parentsUntil()获取指定元素的祖先元素，知道参数里能匹配到的为止

21、prev()获取指定元素的前一个兄弟元素

22、prevAll()获取指定元素前面的所有兄弟元素

23、prevUntil() 获取指定元素前面的所有兄弟元素，直到参数里的条件能够匹配到的。注意参数条件本身不会被匹配

24、siblings() 获取指定元素的兄弟元素，不分前后

25、add()将选中的元素添加到jQuery对象集合中

26、andSelf()将自身加到选中的jQuery集合中,以方便一次性操作

27、end() 将改变当前选择器选中的操作回退为上一个状态。

28、contents未明白

************************* 筛选 ************************************

一、eq()筛选指定索引号的元素

语法：eq(index|-index)索引号从0开始，若为负值，则从最后一个开始倒数，最后一个从-1开始

$("p").eq(1);//如果选择器改为 $("p").eq(-1)，则我是第四个P会被选中 <div> <p>我是第一个P</p> <p>我是第二个P</p>//会被选中，索引值为1 <p>我是第三个P</p> <p>我是第四个P</p> </div>

二、first()筛选出第一个匹配的元素

语法：first()此方法没有参数

$("p").first(); <div> <p>我是第一个P</p>//我的索引值是0，我是第一个，我会被选中 <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </div>

三、last()筛选出最后一个匹配的元素

语法：last()此方法没有参数

$("p").last(); <div> <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> //我是最后一个，我会被选中 </div>

四、hasClass()检查匹配的元素是否含有指定的类

语法：hasClass(class)class为类别名//返回布尔值

if($("p").hasClass("p2")) { alert("我里面含有class=p2的元素");//会弹出，p里的确存在class="p2"的元素 } <div> <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </div>

五、filter()筛选出与指定表达式匹配的元素集合

$("p").filter(".p2"); <div> <p>我是第一个P</p> <p>我是第二个P</p>//我会被选中，我的class="p2" <p>我是第三个P</p> <p>我是第四个P</p> </div>

六、is()检查元素是否参数里能匹配上的

$($("p").first().is(".p2")) { alert("不会弹出，因为第一个P的class不等于p2"); } <div> <p>我是第一个P</p> <p>我是第二个P</p>//我会被选中，我的class="p2" <p>我是第三个P</p> <p>我是第四个P</p> </div>

七、map()

八、has()筛选出包含指定子元素的元素

语法:has(expr|ele)expr:选择表达式 | DOM元素选择

$("div").has("p"); <div>//本div会被选中，因为该div含有p子元素 <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </div> <div> <span>我是一个span</spam> </div>

九、not()排除能够被参数中匹配的元素

语法：not(expr|ele|fn)expr:选择表达式 | DOM元素选择 | fn的作用还不清楚

$("p").not(".p2"); <div> <p>我是第一个P</p>//会被选中，没有class=p2 <p>我是第二个P</p> //不会被选中，因为有class=p2被not(".p2")排除了 <p>我是第三个P</p>//会被选中，没有class=p2 <p>我是第四个P</p> //会被选中，没有class=p2 </div>

十、slice()从指定索引开始，截取指定个数的元素

语法：slice(start, [end])start位置，end可选，结束位置，不包含结束位置那个。如果不指定，则匹配到最后一个。

$("p").slice(1,3) <div> <p>我是第一个P</p>//不会被选中，我索引为0 <p>我是第二个P</p> //会被选中，我索引为1 <p>我是第三个P</p>//会被选中，我索引为2 <p>我是第四个P</p> //不会被选中，虽然我的索引为3，但是不包括我 </div>

********************** 筛选 *********************************

十一、children()筛选获取指定元素的资源

语法：children(expr);获取指定元素的资源，expr为子元素筛选条件

$("div").children(".p2"); <div> <p>我是第一个P</p>//不会被选中，虽然我是div的子元素，但是我没class=p2 <p>我是第二个P</p> //会被选中，我既是p的子元素，又有class=p2 <p>我是第三个P</p>//不会被选中，虽然我是div的子元素，但是我没class=p2 <p>我是第四个P</p> //不会被选中，虽然我是div的子元素，但是我没class=p2 </div>

十二、closest()从当前元素开始，返回最先匹配到的符合条件的父元素

$("span").closest("p","div"); <div> //不会被选中，被P抢了先机 <p>我是第一个P//P会被选中，因为P符合条件，而且是最先匹配到的，虽然div也符合条件了，但是div不是最先匹配到的。因此div不会被选中。 <span>我是P里的span</span> </p> </div>

十三、find()从指定元素中查找子元素

语法：find(expr|obj|ele)expr:匹配表达式 | obj用于匹配的jQuery对象 | DOM元素

$("div").find(".p2"); <div> <p>我是第一个P</p>//不会被选中，虽然我是div的子元素，但是我没class=p2 <p>我是第二个P</p> //会被选中，我既是p的子元素，又有class=p2 <p>我是第三个P</p>//不会被选中，虽然我是div的子元素，但是我没class=p2 <p>我是第四个P</p> //不会被选中，虽然我是div的子元素，但是我没class=p2 </div>

十四、next()获取指定元素的下一个兄弟元素

语法：next(expr)expr:可选，筛选条件，如果下一个兄弟元素不符合改条件，则返回空。

$(".p2").next();//如果筛选改为$(".p2").next(".p4")那选中的是哪个呢？答案是：没选中任何元素，因为虽然有个class=p4的P，但它不是.p2的下一个。 <div> <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p>//我是.p2的next <p>我是第四个P</p> </div>

十五、nextAll() 获取其后的所有兄弟元素

语法：nextAll(expr)expr:可选，筛选条件，获取其后符合expr条件的所有兄弟元素

$(".p2").nextAll();//如果筛选条件改为 $(".p2").nextAll(".p4");则只有我是第四个P会被选中 <div> <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p>//会被选中，是.p2后面的兄弟元素 <p>我是第四个P</p> //会被选中，是.p2后面的兄弟元素 </div>

十六、nextUntil()获取其后的元素，直到参数能匹配上的为止,不包括结束条件那个

语法：nextUntil([expr|ele][,fil])expr筛选表达式 | DOM元素筛选，注意不包括参数里的那一个

$(".p2").nextUntil(".p4");//注意此方法并不会包括.p4 <div> <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p>//会被选中，是.p2后面的兄弟元素 <p>我是第四个P</p> //不会被选中，我作为结束条件，但不包括我 </div>

十七、offsetPosition()返回第一个用于定位的祖先元素，即查找祖先元素中position为relative或absolute的元素。

语法：offsetPosition()此方法没有参数由于CSS的绝对定位的定位基准是相对最近的一个已定位元素，因此此方法的作用不言而喻。

$("span").offsetParent(); <div>//选中的是div，因此div是已定位元素。 <p> <span>我是一个span</span> </p> </div>

十八、parent()获取指定元素的直接父元素

语法：parent(expr)expr为筛选条件，如果直接父元素不符合条件，则不返回任何元素(无论它的祖先是否具有能与expr匹配的)

$("span").parent(); <div> <p>//我是span的直接父元素，我会被匹配到 <span>我是一个span</span> </p> </div>

十九、parents() 获取指定元素的所有祖先元素，一直到<body></body>

语法：parents(expr)expr为筛选条件，如果某个祖先元素不符合expr则排除

$("span").parents(); <div>//我是span的祖先元素，我也会被匹配到.另外<body></body>也会被匹配到 <p>//我是span的直接父元素，我会被匹配到 <span>我是一个span</span> </p> </div>

二十、parentsUntil()获取指定元素的祖先元素，知道参数里能匹配到的为止

语法：parentsUntil(expr)expr为停止参数，一直匹配到expr为止，同时参数的条件是不会被匹配中的。

$("span").parentsUntil("div"); <div>//我是span的祖先元素，但是我作为停止条件，我也不会被选中 <p>//我是span的直接父元素，我会被选中 <span>我是一个span</span> </p> </div>

二十一、prev()获取指定元素的前一个兄弟元素

语法：prev(expr)expr：可选。当上一个兄弟元素不符合参数中的条件时，不返回任何元素。

$(".p2").prev(); <div> <p>我是第一个P</p>//我会被选中，我是.p2的前一个元素。 <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </div>

二十二、prevAll()获取指定元素前面的所有兄弟元素

语法：prevAll(expr)expr:可选，排除所有不能够被expr匹配上的元素

$(".p4").prevAll(".p2"); <div> <p>我是第一个P</p>//不会被选中，虽然我是.p4前面的兄弟元素，但是我没有class=p2 <p>我是第二个P</p> //会被选中，我既是.p4前面的兄弟元素，而且我有class=p2 <p>我是第三个P</p>//不会被选中，虽然我是.p4前面的兄弟元素，但是我没有class=p2 <p>我是第四个P</p> </div>

二十三、prevUntil()获取指定元素前面的所有兄弟元素，直到参数里的条件能够匹配到的。注意参数条件本身不会被匹配

语法：prevUntil([expr|ele][,fil])expr匹配表达式 | DOM元素匹配

$(".p4").prevUntil(".p2"); <div> <p>我是第一个P</p>//不会被选中，到p2就停止了 <p>我是第二个P</p> //不会被选中，我是停止条件，不包括我 <p>我是第三个P</p>//会被选中，我在.p2前，递归到我在到.p2 <p>我是第四个P</p> //不会被选中，我自己怎么可能是我自己前面的呢？ </div>

/******************** 串联 *******************************/

二十四、siblings()获取指定元素的兄弟元素，不分前后

语法：siblings(expr);expr为筛选条件，不符合条件的不会选中

$(".p2").siblings(); <div> <p>我是第一个P</p>//会被选中，我是.p2的兄弟元素 <p>我是第二个P</p> //不会被选中，我是自己 <p>我是第三个P</p>//会被选中，我是.p2的兄弟元素 <p>我是第四个P</p> //会被选中，我是.p2的兄弟元素 </div>

二十五、add()将选中的元素添加到jQuery对象集合中

$(".p2").add("span").css("background-color","red"); <div> <p>我是第一个P</p> <p>我是第二个P</p> //会变红 <p>我是第三个P</p> <p>我是第四个P</p> </div> <span>我是一个span</span>//会变红

二十六、andSelf()将自身加到选中的jQuery集合中,以方便一次性操作

andSelf()此方法无参数

$(".p2").nextAll().andSelf().css("background-color","red"); <div> <p>我是第一个P</p> <p>我是第二个P</p> //会变红,这就是andSelf()的效果 <p>我是第三个P</p>//会变红 <p>我是第四个P</p> //会变红 </div>

二十七、end() 将改变当前选择器选中的操作回退为上一个状态。

end()此方法没有参数

$(".p2").next().end().css("background-color","red"); <div> <p>我是第一个P</p> <p>我是第二个P</p> //会变红,这就end()的效果 <p>我是第三个P</p>//不会变红,尽管next()方法之后选中的是这一个，但是由于被end()方法回退了因此是上一个。 <p>我是第四个P</p> </div>

二十八、contents未明白

以上就是本文的全部内容，有问题的可以和小编联系，谢谢对查字典教程网的支持！