首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

所属分类： 网络编程 / JavaScript 阅读数： 428
收藏 0 赞 0 分享
指定元素中包含 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="https://zhanzhang360.qulang.net/imgupload/005276/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 元素
更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return，需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。下面通过实例详解，需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数，用于操作当前数组自身，用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法，需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式：由ECMA-262规范定义的JavaScript标准，对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时，alert弹出的提示框中文显示为乱码，怎么解决此问题呢？下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法，一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现（同步与异步）

这篇文章主要介绍了JS分页的实现（同步与异步）,需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能，下面小编把实例demo分享到脚本之家平台，需要的朋友参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22