管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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/>

　　<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 元素

教程首页 更多教程