如何使用jQuery筛选排除元素以修改指定标签的属性
简单案例:
$(function(){ $("td[id][id!='']").click(function(){ //你的逻辑 }); });
上述代码,有id且id不为空的td都会执行“你的逻辑”。
=======================转载=======================
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() 获取指定元素的所有祖先元素,一直到
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会被选中 <p> <p>我是第一个P</p> <p>我是第二个P</p> //会被选中,索引值为1 <p>我是第三个P</p> <p>我是第四个P</p> </p>
语法:first() 此方法没有参数
$("p").first(); <p> <p>我是第一个P</p> //我的索引值是0,我是第一个,我会被选中 <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </p>
语法:last() 此方法没有参数
$("p").last(); <p> <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> //我是最后一个,我会被选中 </p>
语法:hasClass(class) class为类别名 //返回布尔值
if($("p").hasClass("p2")) { alert("我里面含有class=p2的元素"); //会弹出,p里的确存在class="p2"的元素 } <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </p>
语法:filter(expr|obj|ele|fn) expr:匹配表达式|obj:jQuery对象,用于匹配现有元素 | DOM:用于匹配的DOM元素 | function返回值作为匹配条件
$("p").filter(".p2"); <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> //我会被选中,我的class="p2" <p>我是第三个P</p> <p>我是第四个P</p> </p>
语法:is(expr|obj|ele|fn) expr:匹配表达式|obj:jQuery对象,用于匹配现有元素 | DOM:用于匹配的DOM元素 | function返回值作为匹配条件
$($("p").first().is(".p2")) { alert("不会弹出,因为第一个P的class不等于p2"); } <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> //我会被选中,我的class="p2" <p>我是第三个P</p> <p>我是第四个P</p> </p>
七、map()
八、has() 筛选出包含指定子元素的元素
语法:has(expr|ele) expr:选择表达式 | DOM元素选择
$("p").has("p"); <p> //本p会被选中,因为该p含有p子元素 <p>我是第一个P</p> <p class="p2">我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> </p> <p> <span>我是一个span</spam> </p>
九、not() 排除能够被参数中匹配的元素
语法:not(expr|ele|fn) expr:选择表达式 | DOM元素选择 | fn的作用还不清楚
$("p").not(".p2"); <p> <p>我是第一个P</p> //会被选中,没有class=p2 <p class="p2">我是第二个P</p> //不会被选中,因为有class=p2被not(".p2")排除了 <p>我是第三个P</p> //会被选中,没有class=p2 <p>我是第四个P</p> //会被选中,没有class=p2 </p>
十、slice() 从指定索引开始,截取指定个数的元素
语法:slice(start, [end]) start位置, end可选,结束位置,不包含结束位置那个。如果不指定,则匹配到最后一个。
$("p").slice(1,3) <p> <p>我是第一个P</p> //不会被选中,我索引为0 <p class="p2">我是第二个P</p> //会被选中,我索引为1 <p>我是第三个P</p> //会被选中,我索引为2 <p>我是第四个P</p> //不会被选中,虽然我的索引为3,但是不包括我 </p>
********************** 筛选 *********************************
十一、children() 筛选获取指定元素的资源
语法:children(expr); 获取指定元素的资源,expr为子元素筛选条件
$("p").children(".p2"); <p> <p>我是第一个P</p> //不会被选中,虽然我是p的子元素,但是我没class=p2 <p class="p2">我是第二个P</p> //会被选中,我既是p的子元素,又有class=p2 <p>我是第三个P</p> //不会被选中,虽然我是p的子元素,但是我没class=p2 <p>我是第四个P</p> //不会被选中,虽然我是p的子元素,但是我没class=p2 </p>
十二、closest() 从当前元素开始,返回最先匹配到的符合条件的父元素
$("span").closest("p","p"); <p> //不会被选中,被P抢了先机 <p>我是第一个P //P会被选中,因为P符合条件,而且是最先匹配到的,虽然p也符合条件了,但是p不是最先匹配到的。因此p不会被选中。 <span>我是P里的span</span> </p> </p>
十三、find() 从指定元素中查找子元素
语法:find(expr|obj|ele) expr:匹配表达式 | obj用于匹配的jQuery对象 | DOM元素
$("p").find(".p2"); <p> <p>我是第一个P</p> //不会被选中,虽然我是p的子元素,但是我没class=p2 <p class="p2">我是第二个P</p> //会被选中,我既是p的子元素,又有class=p2 <p>我是第三个P</p> //不会被选中,虽然我是p的子元素,但是我没class=p2 <p>我是第四个P</p> //不会被选中,虽然我是p的子元素,但是我没class=p2 </p>
十四、next() 获取指定元素的下一个兄弟元素
语法:next(expr) expr:可选,筛选条件,如果下一个兄弟元素不符合改条件,则返回空。
$(".p2").next(); //如果筛选改为$(".p2").next(".p4")那选中的是哪个呢?答案是:没选中任何元素,因为虽然有个class=p4的P,但它不是.p2的下一个。 <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> <p>我是第三个P</p> //我是.p2的next <p class="p4">我是第四个P</p> </p>
十五、nextAll() 获取其后的所有兄弟元素
语法:nextAll(expr) expr:可选,筛选条件,获取其后符合expr条件的所有兄弟元素
$(".p2").nextAll(); //如果筛选条件改为 $(".p2").nextAll(".p4"); 则只有我是第四个P会被选中 <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> <p>我是第三个P</p> //会被选中,是.p2后面的兄弟元素 <p class="p4">我是第四个P</p> //会被选中,是.p2后面的兄弟元素 </p>
十六、nextUntil() 获取其后的元素,直到参数能匹配上的为止,不包括结束条件那个
语法:nextUntil([expr|ele][,fil]) expr筛选表达式 | DOM元素筛选,注意不包括参数里的那一个
$(".p2").nextUntil(".p4"); //注意此方法并不会包括.p4 <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> <p>我是第三个P</p> //会被选中,是.p2后面的兄弟元素 <p class="p4">我是第四个P</p> //不会被选中,我作为结束条件,但不包括我 </p>
十七、offsetPosition() 返回第一个用于定位的祖先元素,即查找祖先元素中position为relative或absolute的元素。
语法:offsetPosition() 此方法没有参数 由于CSS的绝对定位的定位基准是相对最近的一个已定位元素,因此此方法的作用不言而喻。
$("span").offsetParent(); <p style="position:relative"> //选中的是p,因此p是已定位元素。 <p> <span>我是一个span</span> </p> </p>
十八、parent() 获取指定元素的直接父元素
语法:parent(expr) expr为筛选条件,如果直接父元素不符合条件,则不返回任何元素(无论它的祖先是否具有能与expr匹配的)
$("span").parent(); <p style="position:relative"> <p> //我是span的直接父元素,我会被匹配到 <span>我是一个span</span> </p> </p>
十九、parents() 获取指定元素的所有祖先元素,一直到
语法:parents(expr) expr为筛选条件,如果某个祖先元素不符合expr则排除
$("span").parents(); <p style="position:relative"> //我是span的祖先元素,我也会被匹配到.另外<body></body>也会被匹配到 <p> //我是span的直接父元素,我会被匹配到 <span>我是一个span</span> </p> </p>
二十、parentsUntil() 获取指定元素的祖先元素,知道参数里能匹配到的为止
语法:parentsUntil(expr) expr为停止参数,一直匹配到expr为止,同时参数的条件是不会被匹配中的。
$("span").parentsUntil("p"); <p style="position:relative"> //我是span的祖先元素,但是我作为停止条件,我也不会被选中 <p> //我是span的直接父元素,我会被选中 <span>我是一个span</span> </p> </p>
二十一、prev() 获取指定元素的前一个兄弟元素
语法:prev(expr) expr:可选。当上一个兄弟元素不符合参数中的条件时,不返回任何元素。
$(".p2").prev(); <p> <p>我是第一个P</p> //我会被选中,我是.p2的前一个元素。 <p class="p2">我是第二个P</p> <p>我是第三个P</p> <p class="p4">我是第四个P</p> </p>
二十二、prevAll() 获取指定元素前面的所有兄弟元素
语法:prevAll(expr) expr:可选,排除所有不能够被expr匹配上的元素
$(".p4").prevAll(".p2"); <p> <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> </p>
二十三、prevUntil() 获取指定元素前面的所有兄弟元素,直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配
语法:prevUntil([expr|ele][,fil]) expr匹配表达式 | DOM元素匹配
$(".p4").prevUntil(".p2"); <p> <p>我是第一个P</p> //不会被选中,到p2就停止了 <p class="p2">我是第二个P</p> //不会被选中,我是停止条件,不包括我 <p>我是第三个P</p> //会被选中,我在.p2前,递归到我在到.p2 <p class="p4">我是第四个P</p> //不会被选中,我自己怎么可能是我自己前面的呢? </p>
/******************** 串联 *******************************/
二十四、siblings() 获取指定元素的兄弟元素,不分前后
语法:siblings(expr); expr为筛选条件,不符合条件的不会选中
$(".p2").siblings(); <p> <p>我是第一个P</p> //会被选中,我是.p2的兄弟元素 <p class="p2">我是第二个P</p> //不会被选中,我是自己 <p>我是第三个P</p> //会被选中,我是.p2的兄弟元素 <p class="p4">我是第四个P</p> //会被选中,我是.p2的兄弟元素 </p>
二十五、add() 将选中的元素添加到jQuery对象集合中
add(expr|elements|html|jQueryObject) expr:选择器表达式 | DOM表达式 | Html片段 | jQuery对象,将jQuery对象集合一起方便操作;
$(".p2").add("span").css("background-color","red"); <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> //会变红 <p>我是第三个P</p> <p class="p4">我是第四个P</p> </p> <span>我是一个span</span> //会变红
二十六、andSelf() 将自身加到选中的jQuery集合中,以方便一次性操作
andSelf() 此方法无参数
$(".p2").nextAll().andSelf().css("background-color","red"); <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> //会变红,这就是andSelf()的效果 <p>我是第三个P</p> //会变红 <p class="p4">我是第四个P</p> //会变红 </p>
二十七、end() 将改变当前选择器选中的操作回退为上一个状态。
end() 此方法没有参数
$(".p2").next().end().css("background-color","red"); <p> <p>我是第一个P</p> <p class="p2">我是第二个P</p> //会变红,这就end()的效果 <p>我是第三个P</p> //不会变红,尽管next()方法之后选中的是这一个,但是由于被end()方法回退了因此是上一个。 <p class="p4">我是第四个P</p> </p>
以上是如何使用jQuery筛选排除元素以修改指定标签的属性的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

在日常办公中经常使用Excel来处理数据,时常遇到需要使用“筛选”功能。当我们在Excel中选择执行“筛选”时,对于同一列而言,最多只能筛选两个条件,那么,你知道excel同时筛选3个以上关键词该怎么操作吗?接下来,就让小编为大家演示一遍。第一种方法是将条件逐步添加到筛选器中。如果要同时筛选出三个符合条件的明细,首先需要逐步筛选出其中一个。开始时,可以先根据条件筛选出姓“王”的员工。然后单击【确定】,接着在筛选结果中勾选【将当前所选内容添加到筛选器】。操作步骤如下所示。 同样,再次分别执行筛选

Excel表格是一款是很经常使用的办公软件,很多用户都会在表格中记录下各种数据,但是表格明明有数据单筛选是空白,关于这个问题,很多用户都不知道要怎么解决,没有关系,本期软件教程内容就来为广大用户们进行解答,有需要的用户欢迎来查看解决方法吧。 Excel表格中明明有数据但筛选空白怎么办? 第一种原因,表格中含有空行 我们要筛选所有姓“李”的人,但可以看到并没有筛选出正确的结果,因为表格中含有空行,这种情况如何处理呢? 解决方法: 步骤一:选中所有的内容再进行筛选 按c

CrystalDiskMark是一款适用于硬盘的小型HDD基准测试工具,可以快速测量顺序和随机读/写速度。接下来就让小编为大家介绍一下CrystalDiskMark,以及crystaldiskmark如何使用吧~一、CrystalDiskMark介绍CrystalDiskMark是一款广泛使用的磁盘性能测试工具,用于评估机械硬盘和固态硬盘(SSD)的读写速度和随机I/O性能。它是一款免费的Windows应用程序,并提供用户友好的界面和各种测试模式来评估硬盘驱动器性能的不同方面,并被广泛用于硬件评

foobar2000是一款能随时收听音乐资源的软件,各种音乐无损音质带给你,增强版本的音乐播放器,让你得到更全更舒适的音乐体验,它的设计理念是将电脑端的高级音频播放器移植到手机上,提供更加便捷高效的音乐播放体验,界面设计简洁明了易于使用它采用了极简的设计风格,没有过多的装饰和繁琐的操作能够快速上手,同时还支持多种皮肤和主题,根据自己的喜好进行个性化设置,打造专属的音乐播放器支持多种音频格式的播放,它还支持音频增益功能根据自己的听力情况调整音量大小,避免过大的音量对听力造成损害。接下来就让小编为大

网易邮箱,作为中国网民广泛使用的一种电子邮箱,一直以来以其稳定、高效的服务赢得了用户的信赖。而网易邮箱大师,则是专为手机用户打造的邮箱软件,它极大地简化了邮件的收发流程,让我们的邮件处理变得更加便捷。那么网易邮箱大师该如何使用,具体又有哪些功能呢,下文中本站小编将为大家带来详细的内容介绍,希望能帮助到大家!首先,您可以在手机应用商店搜索并下载网易邮箱大师应用。在应用宝或百度手机助手中搜索“网易邮箱大师”,然后按照提示进行安装即可。下载安装完成后,我们打开网易邮箱账号并进行登录,登录界面如下图所示

在如今云存储已经成为我们日常生活和工作中不可或缺的一部分。百度网盘作为国内领先的云存储服务之一,凭借其强大的存储功能、高效的传输速度以及便捷的操作体验,赢得了广大用户的青睐。而且无论你是想要备份重要文件、分享资料,还是在线观看视频、听取音乐,百度网盘都能满足你的需求。但是很多用户们可能对百度网盘app的具体使用方法还不了解,那么这篇教程就将为大家详细介绍百度网盘app如何使用,还有疑惑的用户们就快来跟着本文详细了解一下吧!百度云网盘怎么用:一、安装首先,下载并安装百度云软件时,请选择自定义安装选

MetaMask(中文也叫小狐狸钱包)是一款免费的、广受好评的加密钱包软件。目前,BTCC已支持绑定MetaMask钱包,绑定后可使用MetaMask钱包进行快速登入,储值、买币等,且首次绑定还可获得20USDT体验金。在BTCCMetaMask钱包教学中,我们将详细介绍如何注册和使用MetaMask,以及如何在BTCC绑定并使用小狐狸钱包。MetaMask钱包是什么?MetaMask小狐狸钱包拥有超过3,000万用户,是当今最受欢迎的加密货币钱包之一。它可免费使用,可作为扩充功能安装在网络

Apple在周二推出了iOS17.4更新,为iPhone带来了一系列新功能和修复。这次更新包括了全新的表情符号,同时欧盟用户也能够下载其他应用商店。此外,更新还加强了对iPhone安全性的控制,引入了更多的「失窃设备保护」设置选项,为用户提供更多选择和保障。"iOS17.3首次引入了“失窃设备保护”功能,为用户的敏感资料增加了额外的安全保障。当用户不在家等熟悉地点时,该功能要求用户首次输入生物特征信息,并在一小时后再次输入信息才能访问和更改某些数据,如修改AppleID密码或关闭失窃设备保护功能
