编程 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 相关文章推荐

屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键的javascript代码

Apr 01 Javascript

LBS blog sql注射漏洞[All version]-官方已有补丁

Aug 26 Javascript

JQuery 学习笔记选择器之三

Jul 23 Javascript

js跨域问题之跨域iframe自适应大小实现代码

Jul 17 Javascript

javascript实现window.print()去除页眉页脚

Dec 30 Javascript

JQuery中clone方法复制节点

May 18 Javascript

jQuery原型属性和原型方法详解

Jul 07 Javascript

javascript父子页面通讯实例详解

Jul 17 Javascript

JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

Sep 15 Javascript

使用jQuery mobile库检测url绝对地址和相对地址的方法

Dec 04 Javascript

使用bootstraptable插件实现表格记录的查询、分页、排序操作

Aug 06 Javascript

Node.js之readline模块的使用详解

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

BBS(php & mysql)完整版(一)

2006/10/09 PHP

FireFox浏览器使用Javascript上传大文件

2013/10/30 PHP

php生成图片缩略图的方法

2015/04/07 PHP

摘自织梦CMS中的图片处理类

2015/08/08 PHP

php json相关函数用法示例

2017/03/28 PHP

PHP多种序列化/反序列化的方法详解

2017/06/23 PHP

解决Laravel blade模板转义html标签的问题

2019/09/03 PHP

php进行md5加密简单实例方法

2019/09/19 PHP

Laravel框架处理用户的请求操作详解

2019/12/20 PHP

一个简单的JavaScript 日期计算算法

2009/09/11 Javascript

JavaScript 学习笔记（十一）

2010/01/19 Javascript

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

2010/03/05 Javascript

jQuery 翻牌或百叶窗效果(内容三秒自动切换)

2012/06/14 Javascript

完美解决IE低版本不支持call与apply的问题

2013/12/05 Javascript

javascript 按键事件(兼容各浏览器)

2013/12/20 Javascript

原生JS实现幻灯片

2017/02/22 Javascript

angularjs过滤器--filter与ng-repeat配合有奇效

2017/04/20 Javascript

JavaScript如何借用构造函数继承

2019/11/06 Javascript

深入分析JavaScript 事件循环(Event Loop)

2020/06/19 Javascript

Vue Render函数原理及代码实例解析

2020/07/30 Javascript

vue 组件基础知识总结

2021/01/26 Vue.js

[00:28]DOTA2北京网鱼队选拔赛

2015/04/08 DOTA

Python完全新手教程

2007/02/08 Python

使用Python读写文本文件及编写简单的文本编辑器

2016/03/11 Python

回调函数的意义以及python实现实例

2017/06/20 Python

Python字符串大小写转换拼接删除空白

2019/09/19 Python

Python字典中的值为列表或字典的构造实例

2019/12/16 Python

We Fashion荷兰：一家国际时装公司

2018/04/18 全球购物

波兰最大的宠物用品网上商店：FERA.PL

2019/08/11 全球购物

管理部部长岗位职责

2013/12/05 职场文书

半年思想汇报

2013/12/30 职场文书

会议主持词开场白

2015/05/28 职场文书

2019年幼儿园家长接送责任书

2019/10/29 职场文书

用python开发一款操作MySQL的小工具

2021/05/12 Python

Go语言应该什么情况使用指针

2021/07/25 Golang

python文件与路径操作神器 pathlib

2022/04/01 Python

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

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