编程 Javascript

jQuery 获取对象根据属性、内容匹配, 还有表单元素匹配

Posted in Javascript onMay 31, 2010

指定元素中包含 id 属性的, 如: $("span[id]")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

指定元素中不包含 id 属性的, 如: $("span:not(span[id])") 或 $("span:not([id])")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

包含 id 属性的, 如: $("body [id]")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

符合元素值的, 如: $("span[name='S2']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

不符合元素值的, 如: $("span[name!='S2']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

元素值开头是?, 如: $("span[name^='S']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

元素值结尾是?, 如: $("html [name$='1']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

元素值包含?, 如: $("body [name*='x']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

多个属性条件, 如(有 id 且 name 开始是 "D"): $("body [id][name^='D']")

<span id="span1" name="S1">AAA</span><br/> 
<span id="span2" name="S2">BBB</span><br/> 
<span name="Sx3">CCC</span><br/> 
<span name="Sx4">DDD</span><br/> 
<div id="div1" name="Dx1">EEE</div> 
<div name="D2">FFF</div>

查找包含 "AB" 的 span: $("span:contains('AB')")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div>

从 div 中查找包含 "AB" 的 span: $("div span:contains('AB')")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div>

查找包含的 span: $("span:has('b')")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div>

查找空的 span: $("span:empty")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div>

查找非空的(也就是作为父元素的) span: $("span:parent")

<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
<div> 
<span>ABC</span><br/> 
<span><b>ABC</b></span><br/> 
<span></span> 
</div>

:hidden 与 :visible 分别对应隐藏与显示的元素; 下例让已显示的变红, 让隐藏的显示为灰色.

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
</head> 
<body> 
<div>111</div> 
<div>222</div> 
<div style="display:none">333</div> 
<div style="display:none">444</div> 
</body> 
</html> 
<script> 
$("div:visible").css("color", "red"); 
$("div:hidden").css("display", "").css("color", "silver"); 
</script>

表单匹配:
:input 匹配:
<input ... />
<select></select>
<textarea></textarea>
<button></button>

:text 匹配 <input type="text" />
:password 匹配 <input type="password" />
:radio 匹配 <input type="radio" />
:checkbox 匹配 <input type="checkbox" />
:submit 匹配 <input type="submit" />
:reset 匹配 <input type="reset" />
:image 匹配 <input type="image" />
:file 匹配 <input type="" />
:button 匹配 <button></button>
:enabled 匹配所有可用的 input 元素
:disabled 匹配所有不可用的 input 元素
:checked 匹配所有选中的被选中复选框、单选框
:selected 匹配所有选中的 option 元素

jQuery 获取对象根据属性、内容匹配, 还有表单元素匹配

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

获得所有表单值的JQuery实现代码[IE暂不支持]

May 24 Javascript

js 自动播放的实例代码

Nov 19 Javascript

简单实现JS对dom操作封装

Dec 02 Javascript

jQuery设置Cookie及删除Cookie实例分析

Apr 15 Javascript

浅谈Sublime Text 3运行JavaScript控制台

Jun 06 Javascript

BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)

Aug 18 Javascript

jQuery手指滑动轮播效果

Dec 22 Javascript

JS中Array数组学习总结

Jan 18 Javascript

基于vue和react的spa进行按需加载的实现方法

Sep 29 Javascript

vue实现行列转换的一种方法

Aug 06 Javascript

基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

Apr 27 Javascript

微信小程序完美解决scroll-view高度自适应问题的方法

Aug 08 Javascript

jQuery 获取对象定位子对象

May 31 #Javascript

jQuery 获取对象基本选择与层级

May 31 #Javascript

javascript 判断数组是否已包含了某个元素的函数

May 30 #Javascript

基于jquery的inputlimiter 实现字数限制功能

May 30 #Javascript

JQuery Easyui Tree的oncheck事件实现代码

May 28 #Javascript

一个收集图片的bookmarlet(js 刷新页面中的图片)

May 27 #Javascript

js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

May 27 #Javascript

You might like

基于mysql的bbs设计（五）

2006/10/09 PHP

php实现的太平洋时间和北京时间互转的自定义函数分享

2014/08/19 PHP

PHP各种异常和错误的拦截方法及发生致命错误时进行报警

2016/01/19 PHP

vmware linux系统安装最新的php7图解

2019/04/14 PHP

PHP实现简易用户登录系统

2020/07/10 PHP

js常用函数不错

2006/09/08 Javascript

javascript面向对象编程(一) 实例代码

2010/06/25 Javascript

让JavaScript拥有类似Lambda表达式编程能力的方法

2010/09/12 Javascript

JQuery1.4+ Ajax IE8 内存泄漏问题

2010/10/15 Javascript

JQuery PHP图片在线裁剪实例

2020/07/27 Javascript

关于foreach循环中遇到的问题小结

2017/05/08 Javascript

微信分享调用jssdk实例

2017/06/08 Javascript

js指定步长实现单方向匀速运动

2017/07/17 Javascript

JS手机端touch事件计算滑动距离的方法示例

2017/10/26 Javascript

详解如何在Vue里建立长按指令

2018/08/20 Javascript

vue计算属性computed、事件、监听器watch的使用讲解

2019/01/21 Javascript

小程序封装wx.request请求并创建接口管理文件的实现

2019/04/29 Javascript

ES6 class的应用实例分析

2019/06/27 Javascript

Vue引入Stylus知识点总结

2020/01/16 Javascript

jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

2020/06/02 jQuery

Vuex的热更替如何实现

2020/06/05 Javascript

简介JavaScript错误处理机制

2020/08/04 Javascript

微信小程序实现首页弹出广告

2020/12/03 Javascript

[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG

2014/05/26 DOTA

[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧

2018/04/06 DOTA

python中map、any、all函数用法分析

2015/04/21 Python

python关键字and和or用法实例

2015/05/28 Python

理解Python中的绝对路径和相对路径

2017/08/30 Python

windows下python之mysqldb模块安装方法

2017/09/07 Python

Python如何实现后端自定义认证并实现多条件登陆

2020/06/22 Python

医学生自荐信

2013/12/03 职场文书

廉洁家庭事迹材料

2014/05/15 职场文书

高中生思想道德自我评价

2015/03/09 职场文书

外科护士长工作总结

2015/08/12 职场文书

学习计划是什么

2019/04/30 职场文书

mysql升级到5.7时,wordpress导数据报错1067的问题

2021/05/27 MySQL

jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

jQuery 获取对象根据属性、内容匹配, 还有表单元素匹配