jQuery - Selectors (4) Content Filters - 內容過濾器

jQuery內容過濾器簡介

內容過濾器作用在找出元素內是否含有內容或關係,以產生所需要集合元素。

jQuery內容過濾器速查表

jQuery 內容過濾器
過濾器 說明 範例
:contains(text) 選擇包含指定文字(text)的元素。 $(':contains(text)')
:empty 選擇沒有子元素的元素(包含文字節點)。 $(':empty')
:has(selector) 選擇包含有selector的selector。 $(':has(selector)')
:parent 選擇包有父子元素的元素(包含文字節點)。 $(':parent')
:empty與:parent可以說是相反關係,:empty要沒有子元素,:parent要有父元素。而:has()的描述比較繞舌,看下面實例比較好理解。

jQuery內容過濾器範例

:contains(text)過濾器範例:過濾出包含特定文字的元素。

符合的text可以直接出現在所選擇的元素中,或在該元素的任何後代元素中。:contains(text)中括號內(text)的文字可為空,或用引號包圍。
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
// 1. 由div元素中過濾出包含文字John的元素
$("div:contains('John')").css("text-decoration", "underline");</script>
</body>
</html>

:empty過濾器範例:在所有元素中找出無子元素或文字的元素

:empty過濾器與:parent過濾器相反。
注意,:empty與:parent的子元素包含文字節點。

<!DOCTYPE html>
<html>
<head>
  <style>
  td { text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>
    <tr><td></td><td>TD#5</td></tr>
  </table>
<script>
// 1. 由td集合元素中過濾出沒有子元素的td元素
$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>
</body>
</html>
在W3C的建議中<p>元素至少有一個子節點,即使這個子節點是文字(http://www.w3.org/TR/html401/struct/text.html#edef-P)。另一方面,其他一些元素是空元素,例如,<input>、<img>、<br>、<hr>。

:has(selector)過濾器範例:由div集合元素(selector)中,過濾出包含有p元素(selector)的div

:has(selector)過濾器,想像成If a and b then ...這種條件式裡的b條件,先符合a條件和(and)符合b條件的選擇出來。

<!DOCTYPE html>
<html>
<head>
  <style>
  .test{ border: 3px inset red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div><p>Hello in a paragraph</p></div>
  <div>Hello again! (with no paragraph)</div>
<script>
// 1. 由div集合元素(selector)中,過濾出包含有p元素(selector)的div
$("div:has(p)").addClass("test");</script>
</body>
</html>
$("div:has(p)")裡p元素可以在div元素內的任何地方(另一種稱法:任何後代,任一階層)。

因為:has()是一個jQuery所延伸方法,並不是CSS規格的一部分,執行:has()查詢在原生DOM的querySelectorAll()方法中,並不能得到有利的執行效能。在主流瀏覽器中想要得到更好的效能,使用$("your-pure-css-selector").has(selector/DOMElement)來替代。

:parent過濾器範例:...。

:parent過濾器與:empty過濾器相反。
注意,:empty與:parent的子元素包含文字節點。

<!DOCTYPE html>
<html>
<head>
  <style>
  td { width:40px; background:green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <table border="1">
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
<script>
// 1. 由td集合元素中過濾出含有子元素和父元素的td
$("td:parent").fadeTo(1500, 0.3);</script>
</body>
</html>
在W3C的建議中<p>元素至少有一個子節點,即使這個子節點是文字(http://www.w3.org/TR/html401/struct/text.html#edef-P)。另一方面,其他一些元素是空元素,例如,<input>、<img>、<br>、<hr>。

因為:parent是一個jQuery所延伸方法,並不是CSS規格的一部分,執行:parent查詢在原生DOM的querySelectorAll()方法中,並不能得到有利的執行效能。想要得到更好的效能,使用$("your-pure-css-selector").filter(":parent")來替代。

KKBruce補充

內容過濾器,先有"內容"再進行"過濾",從上面範例中我們可以看得出來,我們都是要從一個集合元素裡想取出特定條件(b條件)時使用內容過濾器。要注意替代用法,:has()改用.has(),:parent改用.filter(":parent")來替代,盡量一開始就使用推薦的替代用法

jQuery基礎選擇器修改歷程

[2011/12/28] 參考 jQuery 1.7 文件翻譯編寫。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「+1」,我會很高興的。

无觅相关文章插件,迅速提升网站流量