博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 练习[二]: 获取对象(3) - 根据属性、内容匹配, 还有表单元素匹配
阅读量:7088 次
发布时间:2019-06-28

本文共 4127 字,大约阅读时间需要 13 分钟。

  hot3.png

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

转载于:https://my.oschina.net/hermer/blog/319271

你可能感兴趣的文章
正确理解Python文件读写模式字w+、a+和r+
查看>>
不可不知的DIP、IoC、DI以及IoC容器
查看>>
大漠教程 找字 找图片
查看>>
不同时间复杂度的规模上限
查看>>
Codeforces Round #114 (Div. 1) E. Wizards and Bets 高斯消元
查看>>
怎样调通微信支付及微信发货通知接口(Js API)
查看>>
Android 属性动画(Property Animation) 全然解析 (下)
查看>>
推断汉字正則表達式更严谨方法!
查看>>
如何避免误删CleanMyMac语言文件
查看>>
Linux下免安装mysql
查看>>
jquery实现返回基部案例效果
查看>>
快钱报错:javax.net.ssl.SSLProtocolException: handshake alert: unrecognized_name解决
查看>>
Hadoop集群WordCount运行详解(转)
查看>>
[转]SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)
查看>>
一次性搞清楚equals和hashCode
查看>>
Android Studio IDE的 LogCat如何过滤指定应用的调试信息
查看>>
23个常用正则表达式(数值和字符串)
查看>>
struts2中struts.xml配置文件详解
查看>>
Javascript中的with用法
查看>>
GIS-008-ArcGIS JS API 全图
查看>>