1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > jQuery 获取对象 根据属性 内容匹配 还有表单元素匹配

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

时间:2022-04-11 01:46:00

相关推荐

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

指定元素中包含 id 属性的, 如: $("span[id]")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div name="Dx1">EEE</div>

<div name="D2">FFF</div>

指定元素中不包含 id 属性的, 如: $("span:not(span[id])") 或 $("span:not([id])")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div name="Dx1">EEE</div>

<div name="D2">FFF</div>

包含 id 属性的, 如: $("body [id]")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div name="Dx1">EEE</div>

<div name="D2">FFF</div>

符合元素值的, 如: $("span[name="S2"]")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div name="Dx1">EEE</div>

<div name="D2">FFF</div>

不符合元素值的, 如: $("span[name!="S2"]")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div name="Dx1">EEE</div>

<div name="D2">FFF</div>

元素值开头是?, 如: $("span[name^="S"]")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div name="Dx1">EEE</div>

<div name="D2">FFF</div>

元素值结尾是?, 如: $("html [name$="1"]")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div name="Dx1">EEE</div>

<div name="D2">FFF</div>

元素值包含?, 如: $("body [name*="x"]")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div name="Dx1">EEE</div>

<div name="D2">FFF</div>

多个属性条件, 如(有 id 且 name 开始是 "D"): $("body [id][name^="D"]")

代码如下:

<span name="S1">AAA</span><br/>

<span name="S2">BBB</span><br/>

<span name="Sx3">CCC</span><br/>

<span name="Sx4">DDD</span><br/>

<div 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="/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 元素

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。