概述jQuery的元素筛选


Posted in Javascript onNovember 23, 2016

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 class="p2">我是第二个P</p>


<p>我是第三个P</p>


<p>我是第四个P</p>

</div> 

 五、filter()

筛选出与指定表达式匹配的元素集合

语法:filter(expr|obj|ele|fn)

expr:匹配表达式|obj:jQuery对象,用于匹配现有元素 | DOM:用于匹配的DOM元素 | function返回值作为匹配条件

$("p").filter(".p2");

<div>


<p>我是第一个P</p>


<p class="p2">我是第二个P</p>
//我会被选中,我的class="p2"


<p>我是第三个P</p>


<p>我是第四个P</p>

</div>

 六、is()

检查元素是否参数里能匹配上的

语法:is(expr|obj|ele|fn)

expr:匹配表达式|obj:jQuery对象,用于匹配现有元素 | DOM:用于匹配的DOM元素 | function返回值作为匹配条件

$($("p").first().is(".p2"))

{


alert("不会弹出,因为第一个P的class不等于p2"); 

}

<div>


<p>我是第一个P</p>


<p class="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>


<p class="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


<p class="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


<p class="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


<p class="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


<p class="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>






<p class="p2">我是第二个P</p>  


<p>我是第三个P</p>



//我是.p2的next


<p class="p4">我是第四个P</p>

</div>  

十五、nextAll()

  获取其后的所有兄弟元素

  语法:nextAll(expr)

expr:可选,筛选条件,获取其后符合expr条件的所有兄弟元素

$(".p2").nextAll();
//如果筛选条件改为 $(".p2").nextAll(".p4");
则只有我是第四个P会被选中

<div>


<p>我是第一个P</p>






<p class="p2">我是第二个P</p>  


<p>我是第三个P</p>



//会被选中,是.p2后面的兄弟元素


<p class="p4">我是第四个P</p> //会被选中,是.p2后面的兄弟元素

</div>  

十六、nextUntil()

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

 语法:nextUntil([expr|ele][,fil])

expr筛选表达式 | DOM元素筛选,注意不包括参数里的那一个

$(".p2").nextUntil(".p4");

//注意此方法并不会包括.p4

<div>


<p>我是第一个P</p>






<p class="p2">我是第二个P</p>  


<p>我是第三个P</p>



//会被选中,是.p2后面的兄弟元素


<p class="p4">我是第四个P</p> //不会被选中,我作为结束条件,但不包括我

</div>

十七、offsetPosition()

返回第一个用于定位的祖先元素,即查找祖先元素中position为relative或absolute的元素。

 语法:offsetPosition()

此方法没有参数

由于CSS的绝对定位的定位基准是相对最近的一个已定位元素,因此此方法的作用不言而喻。

$("span").offsetParent();

<div style="position:relative">
//选中的是div,因此div是已定位元素。


<p>



<span>我是一个span</span>


</p>

</div>

 十八、parent()

获取指定元素的直接父元素

语法:parent(expr)

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

$("span").parent();

<div style="position:relative">



<p>







//我是span的直接父元素,我会被匹配到



<span>我是一个span</span>


</p>

</div>

十九、parents()

    获取指定元素的所有祖先元素,一直到<body></body>

 语法:parents(expr)

expr为筛选条件,如果某个祖先元素不符合expr则排除

$("span").parents();

<div style="position:relative">
//我是span的祖先元素,我也会被匹配到.另外<body></body>也会被匹配到



<p>







//我是span的直接父元素,我会被匹配到



<span>我是一个span</span>


</p>

</div>

二十、parentsUntil()

获取指定元素的祖先元素,知道参数里能匹配到的为止

 语法:parentsUntil(expr)

expr为停止参数,一直匹配到expr为止,同时参数的条件是不会被匹配中的。

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

<div style="position:relative">
//我是span的祖先元素,但是我作为停止条件,我也不会被选中



<p>







//我是span的直接父元素,我会被选中



<span>我是一个span</span>


</p>

</div>

 二十一、prev()

获取指定元素的前一个兄弟元素

语法:prev(expr)

expr:可选。当上一个兄弟元素不符合参数中的条件时,不返回任何元素。

$(".p2").prev();



<div>


<p>我是第一个P</p>


//我会被选中,我是.p2的前一个元素。


<p class="p2">我是第二个P</p>  


<p>我是第三个P</p>






<p class="p4">我是第四个P</p> 

</div>

二十二、prevAll()

获取指定元素前面的所有兄弟元素

语法:prevAll(expr)

expr:可选,排除所有不能够被expr匹配上的元素

$(".p4").prevAll(".p2");



<div>


<p>我是第一个P</p>



//不会被选中,虽然我是.p4前面的兄弟元素,但是我没有class=p2


<p class="p2">我是第二个P</p>  //会被选中,我既是.p4前面的兄弟元素,而且我有class=p2


<p>我是第三个P</p>



//不会被选中,虽然我是.p4前面的兄弟元素,但是我没有class=p2


<p class="p4">我是第四个P</p>  

</div>

二十三、prevUntil()

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

语法:prevUntil([expr|ele][,fil])

expr匹配表达式 | DOM元素匹配

$(".p4").prevUntil(".p2");



<div>


<p>我是第一个P</p>



//不会被选中,到p2就停止了


<p class="p2">我是第二个P</p>  //不会被选中,我是停止条件,不包括我


<p>我是第三个P</p>



//会被选中,我在.p2前,递归到我在到.p2


<p class="p4">我是第四个P</p>  //不会被选中,我自己怎么可能是我自己前面的呢?

</div>

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

二十四、siblings()

获取指定元素的兄弟元素,不分前后

语法:siblings(expr);

expr为筛选条件,不符合条件的不会选中

$(".p2").siblings();



<div>


<p>我是第一个P</p>



//会被选中,我是.p2的兄弟元素


<p class="p2">我是第二个P</p>  //不会被选中,我是自己


<p>我是第三个P</p>



//会被选中,我是.p2的兄弟元素


<p class="p4">我是第四个P</p>  //会被选中,我是.p2的兄弟元素

</div>

二十五、add()

将选中的元素添加到jQuery对象集合中

add(expr|elements|html|jQueryObject)

expr:选择器表达式 | DOM表达式 | Html片段 | jQuery对象,将jQuery对象集合一起方便操作;

$(".p2").add("span").css("background-color","red");



<div>


<p>我是第一个P</p>






<p class="p2">我是第二个P</p>  //会变红


<p>我是第三个P</p>






<p class="p4">我是第四个P</p>  

</div>

<span>我是一个span</span>


//会变红

二十六、andSelf()

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

andSelf()

此方法无参数

$(".p2").nextAll().andSelf().css("background-color","red");

<div>


<p>我是第一个P</p>






<p class="p2">我是第二个P</p>  //会变红,这就是andSelf()的效果


<p>我是第三个P</p>



//会变红


<p class="p4">我是第四个P</p>  //会变红

</div>

二十七、end()

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

end()

 此方法没有参数

$(".p2").next().end().css("background-color","red");

<div>


<p>我是第一个P</p>






<p class="p2">我是第二个P</p>  //会变红,这就end()的效果


<p>我是第三个P</p>



//不会变红,尽管next()方法之后选中的是这一个,但是由于被end()方法回退了因此是上一个。


<p class="p4">我是第四个P</p>

</div>

 二十八、contents

未明白

以上就是本文的全部内容,有问题的可以和小编联系,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 #Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 #Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 #Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 #Javascript
详解jQuery的Cookie插件
Nov 23 #Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 #Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 #Javascript
You might like
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
javascript 写类方式之一
2009/07/05 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
使用JavaScript进行表单校验功能
2017/08/01 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
python函数的5种参数详解
2017/02/24 Python
python cs架构实现简单文件传输
2020/03/20 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python数学形态学实例分析
2019/09/06 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
历史系自荐信范文
2013/12/24 职场文书
倡议书范文
2014/04/16 职场文书
合伙协议书
2014/04/23 职场文书
大学生赌博检讨书
2014/09/22 职场文书
教师学习心得体会范文
2016/01/21 职场文书