编程 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 imgareaselect 使用利用js与程序结合实现图片剪切

Jul 30 Javascript

zeroclipboard复制到剪切板的flash

Aug 04 Javascript

JavaScript Math.ceil() 函数使用介绍

Dec 11 Javascript

5款JavaScript代码压缩工具推荐

Jul 07 Javascript

javascript 自定义回调函数示例代码

Sep 26 Javascript

js定义类的几种方法(推荐)

Jun 08 Javascript

javascript replace()第二个参数为函数时的参数用法

Dec 26 Javascript

获取当前按钮或者html的ID名称实例(推荐)

Jun 23 Javascript

微信小程序使用Promise简化回调

Feb 06 Javascript

JavaScript对象的特性与实践应用深入详解

Dec 30 Javascript

JavaScript之解构赋值的理解

Jan 30 Javascript

详解在微信小程序的JS脚本中使用Promise来优化函数处理

Mar 06 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

解析php中mysql_connect与mysql_pconncet的区别详解

2013/05/15 PHP

php+ajax无刷新上传图片的实现方法

2016/12/06 PHP

Jquery 设置标题的自动翻转

2009/10/03 Javascript

Javascript实现简单的富文本编辑器附演示

2014/06/16 Javascript

加随机数引入脚本不让浏览器读取缓存

2014/09/04 Javascript

深入理解javascript作用域和闭包

2014/09/23 Javascript

jquery实现页面百叶窗走马灯式翻滚显示效果的方法

2015/03/12 Javascript

如何用jQuery实现ASP.NET GridView折叠伸展效果

2015/09/26 Javascript

jQuery插件Timelinr 实现时间轴特效

2015/10/04 Javascript

jQuery+JSON实现AJAX二级联动实例分析

2015/12/18 Javascript

webuploader模态框ueditor显示问题解决方法

2016/12/27 Javascript

Vuex模块化实现待办事项的状态管理

2017/03/15 Javascript

angular使用post、get向后台传参的问题实例

2017/05/27 Javascript

angularjs实现猜数字大小功能

2020/05/20 Javascript

Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法

2018/04/09 Javascript

微信小程序云开发模糊查询实现解析

2019/09/02 Javascript

使用Python生成XML的方法实例

2017/03/21 Python

django定期执行任务(实例讲解)

2017/11/03 Python

python numpy格式化打印的实例

2018/05/14 Python

Python读取本地文件并解析网页元素的方法

2018/05/21 Python

Python集合基本概念与相关操作实例分析

2019/10/30 Python

关于keras.layers.Conv1D的kernel_size参数使用介绍

2020/05/22 Python

python时间time模块处理大全

2020/10/25 Python

CSS3属性选择符介绍

2008/10/17 HTML / CSS

css3实现3D文本悬停改变效果的示例代码

2019/01/16 HTML / CSS

HTML5的自定义属性data-*详细介绍和JS操作实例

2014/04/10 HTML / CSS

html5教你做炫酷的碎片式图片切换 (canvas)

2017/07/28 HTML / CSS

国际知名军事风格休闲装品牌：Alpha Industries（阿尔法工业）

2017/05/24 全球购物

雷蛇美国官网：Razer

2020/04/03 全球购物

比较基础的php面试题及答案-填空题

2014/04/26 面试题

什么是Oracle的后台进程background processes？都有哪些后台进程？

2012/04/26 面试题

酒吧员工的岗位职责

2013/11/26 职场文书

先进个人获奖感言

2014/01/24 职场文书

银行工作检查书范文

2014/01/31 职场文书

公司租房协议书

2014/10/14 职场文书

JavaScript流程控制（分支）

2021/12/06 Javascript

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

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