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

指定元素中包含 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/> 
<pan><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 元素

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

c# 获取串口设备的输入(unsigned char *和 char*)

因为是C#,所以平台肯定是.NET了。 之前因为一个小小的业务需要接触了下密码键盘的操作。其实就是简单的获取用户输入密码的操作,没碰到什么大的问题,但是查资料的...

34011
来自专栏GreenLeaves

C# 通过IEnumberable接口和IEnumerator接口实现自定义集合类型foreach功能

1、IEnumerator和IEnumerable的作用 其实IEnumerator和IEnumerable的作用很简单,就是让除数组和集合之外的类型也能支持f...

17810
来自专栏刘笑江的专栏

learn-haskell

973
来自专栏LinXunFeng的专栏

iOS - 通过runtime获取某个类中所有的变量和方法

892
来自专栏C#

数组未必一定需从0开始,谈一下非0开始的数组

  谈到数组时,当被问及数组是从什么数开始时,估计大部分程序员都会直接说出数组当然是从0开始的。这个回答当然没有错,现在我们就来了解一下C#中的下限非...

1735
来自专栏林德熙的博客

win10 uwp 如何让一个集合按照需要的顺序进行排序

虽然这是 C# 的技术,但是我是用在 uwp ,于是就把标题写这个名。有一天,我的小伙伴让我优化一个列表。这个列表是 ListView 他绑定了一个 Obser...

141
来自专栏恰同学骚年

设计模式的征途—23.解释器(Interpreter)模式

虽然目前计算机编程语言有好几百种,但有时人们还是希望用一些简单的语言来实现特定的操作,只需要向计算机输入一个句子或文件,就能按照预定的文法规则来对句子或文件进行...

692
来自专栏前端说吧

Sass-学习笔记【基础篇】

3354
来自专栏BY的专栏

Swift 4 新特性

2679
来自专栏友弟技术工作室

golang之Struct什么是结构体struct?

最近在复习golang,学习的东西,如果不使用,很快就会忘记。所以,准备复习完golang,做一个练手的小项目,加深对golang的学习。今天开始公司,进入封闭...

3826

扫描关注云+社区