jQuery 獲取物件 根據屬性、內容匹配, 還有表單元素匹配
指定元素中包含 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/>
<pan><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 元素