指定元素中包含 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
元素
jquery
内容选择器(根据内容匹配元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>内容选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
.yang{ border-collapse: collapse; width:500px;height:30px;border:1px solid red;"}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
/*
:contains(text) //根据内容匹配元素
:empty //匹配内容为空的元素
:has(selector) //匹配包含指定选择器的元素
:parent //匹配内容不为空的元素
*/
window.onload=function(){
$('#btnOk').click(function(){
//根据内容匹配元素
$("li:contains('国')").html('水浒传');
});
};
</script>
</head>
<body>
<ol>
<li>三国演义</li>
<li>西游记</li>
<li></li>
<li>红楼梦</li>
</ol>
<hr/>
<input type="button" id='btnOk' value='确定' />
</body>
</html>