jQuery 獲取對象 根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
更新時間：2010年05月31日 14:27:31 作者：
jQuery 練習(xí) 獲取對象(3) - 根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
指定元素中包含 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>
元素值結(jié)尾是?, 如: $("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 分別對應(yīng)隱藏與顯示的元素; 下例讓已顯示的變紅, 讓隱藏的顯示為灰色.
<!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 匹配 所有選中的被選中復(fù)選框、單選框
:selected 匹配 所有選中的 option 元素
復(fù)制代碼 代碼如下:
<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])")
復(fù)制代碼 代碼如下:
<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]")
復(fù)制代碼 代碼如下:
<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']")
復(fù)制代碼 代碼如下:
<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']")
復(fù)制代碼 代碼如下:
<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']")
復(fù)制代碼 代碼如下:
<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>
元素值結(jié)尾是?, 如: $("html [name$='1']")
復(fù)制代碼 代碼如下:
<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']")
復(fù)制代碼 代碼如下:
<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']")
復(fù)制代碼 代碼如下:
<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')")
復(fù)制代碼 代碼如下:
<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')")
復(fù)制代碼 代碼如下:
<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')")
復(fù)制代碼 代碼如下:
<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")
復(fù)制代碼 代碼如下:
<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")
復(fù)制代碼 代碼如下:
<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 分別對應(yīng)隱藏與顯示的元素; 下例讓已顯示的變紅, 讓隱藏的顯示為灰色.
復(fù)制代碼 代碼如下:
<!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 匹配 所有選中的被選中復(fù)選框、單選框
:selected 匹配 所有選中的 option 元素
相關(guān)文章
jquery easyui如何實(shí)現(xiàn)格式化列
本篇文章主要介紹了jquery easyui如何實(shí)現(xiàn)格式化列 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
基于jquery的文章中所有圖片width大小批量設(shè)置方法
怎么設(shè)置文章中所有圖片width大小批量設(shè)置方法？這在實(shí)際應(yīng)用中很常見，下面有一段示例，希望對大家有所幫助2013-08-08
這篇文章主要介紹了jQuery實(shí)現(xiàn)的中英文切換功能,結(jié)合實(shí)例形式分析了jQuery結(jié)合插件translate.js實(shí)現(xiàn)中英文翻譯的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
jquery ajax 同步異步的執(zhí)行示例代碼，需要的朋友可以參考下。2010-06-06
jQuery 是繼 prototype 之后又一個優(yōu)秀的 Javascript 框架。其宗旨是—寫更少的代碼,做更多的事情。它是輕量級的 js 庫(壓縮后只有21k) ，這是其它的 js 庫所不及 的，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。2008-06-06
jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
jquery購物車實(shí)時結(jié)算特效實(shí)現(xiàn)思路
購物車是可以實(shí)時結(jié)算，下面為大家解釋下通過jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下2013-09-09
用jquery獲取select標(biāo)簽中選中的option值及文本的示例
下面小編就為大家分享一篇用jquery獲取select標(biāo)簽中選中的option值及文本的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jquery實(shí)現(xiàn)（textarea）placeholder自動換行
本文主要對jquery如何實(shí)現(xiàn)（textarea） placeholder自動換行的方法、思路進(jìn)行介紹，下面就跟小編一起來看下吧2016-12-12
基于Bootstrap和jQuery構(gòu)建前端分頁工具實(shí)例代碼
本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁工具實(shí)例代碼，包括前端分頁的優(yōu)缺點(diǎn)和解決辦法，對jquery bootstrap分頁知識感興趣的朋友一起通過本文學(xué)習(xí)吧2016-11-11