编程 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中的有名函数和无名函数

Oct 17 Javascript

网页自动跳转代码收集

Sep 27 Javascript

JS、CSS加载中的小问题探讨

Nov 26 Javascript

javascript学习笔记（七）Ajax和Http状态码

Oct 08 Javascript

JS实现很实用的对联广告代码（可自适应高度）

Sep 18 Javascript

js实现n秒倒计时后才可以点击的效果

Dec 20 Javascript

谈一谈javascript中继承的多种方式

Feb 19 Javascript

Bootstrap基本组件学习笔记之进度条(15)

Dec 08 Javascript

angular2 ng build部署后base文件路径问题详细解答

Jul 15 Javascript

jQuery的时间datetime控件在AngularJs中的使用实例(分享)

Aug 17 jQuery

AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

Apr 21 Javascript

vue 源码解析之虚拟Dom-render

Aug 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

php+oracle 分页类

2006/10/09 PHP

MySQL中create table语句的基本语法是

2007/01/15 PHP

解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题

2009/03/13 PHP

解析关于wamp启动是80端口被占用的问题

2013/06/21 PHP

jQuery之排序组件的深入解析

2013/06/19 Javascript

JS判断当前页面是否在微信浏览器打开的方法

2015/12/08 Javascript

JQuery的Pager分页器实现代码

2016/05/03 Javascript

深入理解事件冒泡(Bubble)和事件捕捉(capture)

2016/05/28 Javascript

JavaScript中 this 指向问题深度解析

2017/02/21 Javascript

用户管理的设计_jquery的ajax实现二级联动效果

2017/07/13 jQuery

js实现关闭网页出现是否离开提示

2017/12/07 Javascript

浅谈React的最大亮点之虚拟DOM

2018/05/29 Javascript

利用js-cookie实现前端设置缓存数据定时失效

2019/06/18 Javascript

微信小程序轮播图实现原理及优化详解

2019/09/29 Javascript

微信小程序开发数据缓存基础知识辨析及运用实例详解

2020/11/06 Javascript

vue 基于abstract 路由模式实现页面内嵌的示例代码

2020/12/14 Vue.js

python图像处理之反色实现方法

2015/05/30 Python

Pandas之Fillna填充缺失数据的方法

2019/06/25 Python

教你如何编写、保存与运行Python程序的方法

2019/07/12 Python

Python math库 ln(x)运算的实现及原理

2019/07/17 Python

pycharm配置当鼠标悬停时快速提示方法参数

2019/07/31 Python

python基于pdfminer库提取pdf文字代码实例

2019/08/15 Python

python分别打包出32位和64位应用程序

2020/02/18 Python

python中使用you-get库批量在线下载bilibili视频的教程

2020/03/10 Python

什么是python的函数体

2020/06/19 Python

带有css3动画效果的兼容多浏览器简单导航条示例

2014/01/26 HTML / CSS

internal修饰符起什么作用

2013/12/16 面试题

感恩教师节演讲稿

2014/09/03 职场文书

运动会广播稿150字（9篇）

2014/09/20 职场文书

悬空寺导游词

2015/02/05 职场文书

用人单位聘用意向书

2015/05/11 职场文书

楚门的世界观后感

2015/06/03 职场文书

Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境

2021/03/29 PHP

MySQL分库分表与分区的入门指南

2021/04/22 MySQL

MySQL学习必备条件查询数据

2022/03/25 MySQL

Python中itertools库的四个函数介绍

2022/04/06 Python

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

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