概述jQuery的元素筛选

2024-03-09 01:38:03 50

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>
<pclass="p2">我是第二个P</p>
<p>我是第三个P</p>
<p>我是第四个P</p>
</div>

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

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

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

$($("p").first().is(".p2"))
{
alert("不会弹出，因为第一个P的class不等于p2");
}
<div>
<p>我是第一个P</p>
<pclass="p2">我是第二个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>
<pclass="p2">我是第二个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
<pclass="p2">我是第二个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
<pclass="p2">我是第二个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
<pclass="p2">我是第二个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
<pclass="p2">我是第二个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>
<pclass="p2">我是第二个P</p>
<p>我是第三个P</p>//我是.p2的next
<pclass="p4">我是第四个P</p>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

andSelf()此方法无参数

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

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

end()此方法没有参数

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

二十八、contents未明白

以上就是本文的全部内容，有问题的可以和小编联系，谢谢对毛票票的支持！

概述jQuery的元素筛选

热门推荐

随机推荐