首页
所有分类
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 相关文章推荐
jquery png 透明解决方案(推荐)
Aug 21 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
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
德生(17) 电子管(5) 东方红(1) PL-365(1) 海燕B411(1) 修复(2) DSP(2) 车机(1) 接收机(2) TECSUN(1)
You might like
PHP 中的类
2006/10/09 PHP
mysql 的 like 问题，超强毕杀记！！！
2007/01/18 PHP
php email邮箱正则
2008/10/08 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
2017/08/30 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
[01:12]（回顾）DOTA2国际邀请赛，全世界DOTAer的盛宴
2014/07/01 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Etam俄罗斯：法国女士内衣和家居服网上商店
2019/10/30 全球购物
什么是Remote Module
2016/06/10 面试题