首页
所有分类
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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
Vue props用法详解(小结)
Jul 03 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
vue-router 控制路由权限的实现
Sep 24 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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
GTX1660(1) i5 9400(1) i5 10400(1) win10(43) ipad(1) 速龙(1) i7 6700(1) Tomcat(18) win11(40) 窗口函数(3)
You might like
php cookie的操作实现代码(登录)
2010/12/29 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
javascript设计模式 封装和信息隐藏（上）
2012/07/24 Javascript
jQuery快速上手：写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
解析微信JS-SDK配置授权，实现分享接口
2016/12/09 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
vue router导航守卫（router.beforeEach()）的使用详解
2019/04/19 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python编程实现蚁群算法详解
2017/11/13 Python
python微信公众号开发简单流程
2018/03/23 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Mytheresa中国官网：德国时尚奢侈品商城
2017/08/04 全球购物
美国独家设计师眼镜在线光学商店：Glasses Gallery
2017/12/28 全球购物
一个精品风格的世界：Atterley
2019/05/01 全球购物
意大利在线大学图书馆：Libreria universitaria
2019/07/16 全球购物
经济实惠的名牌太阳镜和眼镜：Privé Revaux
2021/02/07 全球购物
自动化专业个人求职信范文
2013/11/29 职场文书
求职意向书范文
2014/04/01 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS