首页 | 软件中心 | Designand Inspiration
读库教程网 > 网络教程 > 技术开发 > Java > jQuery练习二]:获取对象(3)-根据属性、内容婚配,尚有表单元素婚配

jQuery练习二]:获取对象(3)-根据属性、内容婚配,尚有表单元素婚配

添加:2010年6月17日



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


读库教程网文章由网络收集后整理发布,文章发布人拥有该内容的所有权力及责任!

如果你喜欢这页,可以按Ctrl+D收藏起来。

相关内容
相关评论
公益广告
精彩推荐
友情链接: 百分百青年 | 烛光信息网 | 夏布新网 | 新育互联网
管理员:QQ:27038219, E-mail:27038219@qq.com今日更新
读库教程网所有文章从网络收集所发布,文章发布人拥有该内容的所有权力及责任,转载时请注明出处!
Template designed by www.dkuu.com. Optimized for 1024x768 to Firefox,Opera and MS-IE6/IE7.