首页
所有分类
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 相关文章推荐
判断对象是否Window的实现代码
Jan 10 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JS控制表单提交的方法
Jul 09 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
vue接口请求加密实例
Aug 11 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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
UV(1) 策略(1) 内存(1) 线程(1) 连接数(1) ipv6(1) PV(1) 弱口令(1) 缓存(3) 访问日志(2)
You might like
MySQL相关说明
2007/01/15 PHP
Session的工作机制详解和安全性问题（PHP实例讲解）
2014/04/10 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
轻松创建nodejs服务器（1）：一个简单nodejs服务器例子
2014/12/18 NodeJs
js实现文字闪烁特效的方法
2015/12/17 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
JS图片压缩（pc端和移动端都适用）
2017/01/12 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
input输入框内容实时监测(附代码)
2017/08/15 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python时间日期操作方法实例小结
2020/02/06 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
HomeAway澳大利亚：预订你的度假屋，公寓、度假村、别墅等
2019/02/20 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
优秀学生事迹材料
2014/02/08 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
军训个人总结
2015/03/03 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL