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 条评论
登录 后参与评论

相关文章

来自专栏技术博客

编写高质量代码改善C#程序的157个建议[10-12]

  本文已更新至http://www.cnblogs.com/aehyok/p/3624579.html 。本文主要学习记录以下内容:

734
来自专栏c#开发者

lightswitch conditional formatting change color

BTW, the best way to do a conditional color setting in LS beta 2 is to use the n...

2705
来自专栏lulianqi

Stream 流操作

Stream 是所有流的抽象基类(不能被实例化,需要使用他的派生类FileStream/MemoryStream/BufferedStream)。流是字节序列的...

812
来自专栏xingoo, 一个梦想做发明家的程序员

【设计模式】—— 组合模式Composite

  模式意图   使对象组合成树形的结构。使用户对单个对象和组合对象的使用具有一致性。   应用场景   1 表示对象的 部分-整体 层次结构   2 忽略组...

1718
来自专栏码匠的流水账

聊聊storm trident的coordinator

storm-1.2.2/storm-core/src/jvm/org/apache/storm/trident/topology/MasterBatchCoor...

834
来自专栏软件开发

MyBatis学习总结(二)——MyBatis核心配置文件与输入输出映射

在上一章中我们学习了《MyBatis学习总结(一)——ORM概要与MyBatis快速起步》,这一章主要是介绍MyBatis核心配置文件、使用接口+XML实现完整...

622
来自专栏码匠的流水账

spring security oauth2使用redis存储token

本文就来讲述一下spring security oauth2使用redis来存储token的配置及在redis中的存储结构

1980
来自专栏菩提树下的杨过

objective-C中如何判断一个类中有没有定义某个方法

C#中可以通过反射分析元数据来解决这个问题,示例代码如下: using System; using System.Reflection; namespace ...

1829
来自专栏JAVA同学会

利用java反射机制编写solr通用的java客户端

通过上一篇的讲解,我们知道了dynamicFiled字段,它是动态的,不需要显示的声明。而且一些常用的基本类型solr已经默认给我们创建好了。

711
来自专栏Java大联盟

Spring Data MongoDB:Repository

使用Spring Data可以帮助我们快速构建项目,非常方便,Spring Data在数据持久层已经写好了常用功能,我们只需要定义一个接口去继承Spring D...

961

扫码关注云+社区