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

JavaScript For Beginners(转载)

Jan 05 Javascript

js removeChild 障眼法可能出现的错误

Oct 06 Javascript

Js控制弹窗实现在任意分辨率下居中显示

Aug 01 Javascript

javascript里使用php代码实例

Dec 13 Javascript

通过设置CSS中的position属性来固定层的位置

Dec 14 Javascript

jQuery常用的一些技巧汇总

Mar 26 Javascript

javascript Promise简单学习使用方法小结

May 17 Javascript

JavaScript通过filereader接口读取文件

May 10 Javascript

AngularJS实现controller控制器间共享数据的方法示例

Oct 30 Javascript

Vue 组件修改根实例的数据的方法

Apr 02 Javascript

Vue+webpack实现懒加载过程解析

Feb 17 Javascript

js验证账户名是否重复

May 26 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

利用文件属性结合Session实现在线人数统计

2006/10/09 PHP

php HtmlReplace输入过滤安全函数

2010/07/03 PHP

提示Trying to clone an uncloneable object of class Imagic的解决

2011/10/27 PHP

PHP实现对文本数据库的常用操作方法实例演示

2014/07/04 PHP

PHP实现的简单缓存类

2015/07/29 PHP

一个简单的php路由类

2016/05/29 PHP

PHP的RSA加密解密方法以及开发接口使用

2018/02/11 PHP

Yii框架通过请求组件处理get，post请求的方法分析

2019/09/03 PHP

List all the Databases on a SQL Server

2007/06/21 Javascript

js截取函数(indexOf,join等)

2010/09/01 Javascript

基于jquery实现控制经纬度显示地图与卫星

2013/05/20 Javascript

禁止iframe页面的所有js脚本如alert及弹出窗口等

2014/09/03 Javascript

javascript实现简单查找与替换的方法

2015/07/22 Javascript

jQuery实现的Div窗口震动效果实例

2015/08/07 Javascript

Three.js基础部分学习

2017/01/08 Javascript

Bootstrap风格的zTree右键菜单

2017/02/17 Javascript

jQuery阻止移动端遮罩层后页面滚动

2017/03/15 Javascript

微信小程序页面滑动屏幕加载数据效果

2020/11/16 Javascript

PHP 实现一种多文件上传的方法

2017/09/20 Javascript

微信小程序定位当前城市的方法

2018/07/19 Javascript

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

2018/08/20 Javascript

angular 数据绑定之[]和{{}}的区别

2018/09/25 Javascript

js实现点击展开隐藏效果（实例代码）

2018/09/28 Javascript

vue-router命名路由和编程式路由传参讲解

2019/01/19 Javascript

基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

2019/04/04 Javascript

Vue-cli打包后部署到子目录下的路径问题说明

2020/09/02 Javascript

Python中Random和Math模块学习笔记

2015/05/18 Python

Django imgareaselect手动剪切头像实现方法

2015/05/26 Python

python简单操作excle的方法

2018/09/12 Python

python通过SSH登陆linux并操作的实现

2019/10/10 Python

python字符串,元组,列表,字典互转代码实例详解

2020/02/14 Python

Python基于pandas绘制散点图矩阵代码实例

2020/06/04 Python

2014年毕业演讲稿范文

2014/05/13 职场文书

单方离婚协议书范本2014

2014/10/28 职场文书

2016党校学习心得体会

2016/01/07 职场文书

Navicat连接MySQL错误描述分析

2021/06/02 MySQL

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

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