KingKong Bruce記事: 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 文件翻譯編寫。

Content Filters :contains()
Content Filters :empty
Content Filters :has()
Content Filters :parent

KingKong Bruce記事

網頁

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