手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
摘要:指定元素中包含id属性的,如:$("span[id]")复制代码代码如下:AAABBBCCCDDDEEEFFF指定元素中不包含id属性的,如...

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

<div>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 获取对象 根据属性、内容匹配, 还有表单元素匹配】相关文章:

实例剖析AngularJS框架中数据的双向绑定运用

js-穷举法 (y0h)

JavaScript实现简单的数字倒计时

jQuery实现弹出窗口中切换登录与注册表单

怎么用javascript进行拖拽第1/2页

特殊字符、常规符号及其代码对照表

JavaScript获取并更改input标签name属性的方法

JavaScript框架是什么?怎样才能叫做框架?

javascript结合Flexbox简单实现滑动拼图游戏

JQuery使用index方法获取Jquery对象数组下标的方法

精品推荐
分类导航