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

简介: 指定元素中包含 id 属性的, 如: $("span[id]")  代码如下: AAA BBB CCC DDD EEE FFF  指定元素中不包含 id 属性的, 如: $("span:not(span[id])") 或 $("span:not([id])")  代码如下: AA...

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

目录
相关文章
|
26天前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
27天前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
27天前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
1月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
1月前
|
JavaScript
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?
17 2
|
2月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
44 0
|
3月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
19 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
27 0
|
JavaScript 数据格式 XML
全面入门jQuery最佳实践(二)-jQuery的属性与样式
1 .attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。
1102 0