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 元素

Javascript 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 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聊天室技术
2006/10/09 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python中super函数的用法
2017/11/17 Python
python正则实现提取电话功能
2018/02/24 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
企业文明单位申报材料
2014/05/16 职场文书
个人授权委托书范文
2014/09/21 职场文书
色戒观后感
2015/06/12 职场文书
矛盾论读书笔记
2015/06/29 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
配置Kubernetes外网访问集群
2022/03/31 Servers