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

一个XML格式数据转换为图表的例子

Feb 09 Javascript

用表格输出1-1000之间的数字实现代码(附特效)

Apr 21 Javascript

js实现按Ctrl+Enter发送效果

Sep 18 Javascript

Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

Sep 28 Javascript

使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

Oct 17 Javascript

JS实现的点击表头排序功能示例

Mar 27 Javascript

在Vue中使用echarts的实例代码（3种图）

Jul 10 Javascript

vue中eventbus被多次触发以及踩过的坑

Dec 02 Javascript

node跨域转发 express+http-proxy-middleware的使用

May 31 Javascript

详解vue文件中使用echarts.js的两种方式

Oct 18 Javascript

vue鼠标悬停事件实例详解

Apr 01 Javascript

jQuery实现雪花飘落效果

Aug 02 jQuery

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合并数组array_merge函数运算符加号与的区别

2008/10/31 PHP

php mongodb操作类带几个简单的例子

2016/08/25 PHP

php实现基于openssl的加密解密方法

2016/09/30 PHP

PHP 7.1新特性的汇总介绍

2016/12/16 PHP

PHP数据对象映射模式实例分析

2019/03/29 PHP

彪哥1.1(智能表格)提供下载

2006/09/07 Javascript

原生js实现改变随意改变div属性style的名称和值的结果

2013/09/26 Javascript

Jquery api 速查表分享

2015/01/12 Javascript

总结JavaScript三种数据存储方式之间的区别

2016/05/03 Javascript

jQuery插件cxSelect多级联动下拉菜单实例解析

2016/06/24 Javascript

jQuery操作cookie

2016/08/08 Javascript

微信小程序 wx.request(object) API详解及实例代码

2016/09/30 Javascript

浅谈jquery上下滑动的注意事项

2016/10/13 Javascript

jquery获取table指定行和列的数据方法(当前选中行、列)

2016/11/07 Javascript

Bootstrap基本组件学习笔记之按钮组(8)

2016/12/07 Javascript

javascript实现复选框全选或反选

2017/02/04 Javascript

vue学习笔记之指令v-text && v-html && v-bind详解

2017/05/12 Javascript

bootstrap是什么_动力节点Java学院整理

2017/07/14 Javascript

input file样式修改以及图片预览删除功能详细概括（推荐）

2017/08/17 Javascript

通过button将form表单的数据提交到action层的实例

2017/09/08 Javascript

vue里面使用mui的弹出日期选择插件实例

2018/09/16 Javascript

Vue + Scss 动态切换主题颜色实现换肤的示例代码

2020/04/27 Javascript

js实现简单图片拖拽效果

2021/02/22 Javascript

python计算牛顿迭代多项式实例分析

2015/05/07 Python

对Python协程之异步同步的区别详解

2019/02/19 Python

keras处理欠拟合和过拟合的实例讲解

2020/05/25 Python

CSS3 实现图形下落动画效果

2020/11/13 HTML / CSS

HTML5录音实践总结(Preact)

2020/05/07 HTML / CSS

Tostadora意大利：定制T恤

2019/04/08 全球购物

美国美食礼品篮网站：Gourmet Gift Baskets

2019/12/15 全球购物

Python里面如何实现tuple和list的转换

2012/06/13 面试题

机械工程师求职自我评价

2013/09/23 职场文书

终端业务员岗位职责

2013/11/27 职场文书

光荣入党自我鉴定

2014/01/22 职场文书

表决心的诗句大全

2014/03/11 职场文书

张丽莉观后感

2015/06/16 职场文书

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

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