首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
微信小程序 时间格式化（util.formatTime(new Date)）详解
Nov 16 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
js实现简单图片拖拽效果
Feb 22 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
德劲1107(1) SRF-M100(1) 上海永华(1) 华普R-96(1) 安健(1) SHARP(1) A254(1) YH-R296(1) 德劲1102(1) GF515(1)
You might like
解析php中反射的应用
2013/06/18 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
python读写文件操作示例程序
2013/12/02 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python学生管理系统学习笔记
2019/03/19 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
Python安装Bs4的多种方法
2020/11/28 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
Expedia加拿大官方网站：加拿大最大的在线旅游提供商
2017/12/31 全球购物
西班牙最好的在线购买葡萄酒的商店：Vinoseleccion
2019/10/30 全球购物
新加坡第一的杂货零售商：NTUC FairPrice
2020/12/05 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
大课间活动制度
2014/01/18 职场文书
培训主管岗位职责
2014/02/01 职场文书
大学运动会入场词
2014/02/22 职场文书
村干部培训方案
2014/05/02 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
成本会计实训报告
2014/11/05 职场文书
初中作文评语集锦
2014/12/25 职场文书
小学数学教学反思范文
2016/02/16 职场文书