jQuery內容過濾器簡介
內容過濾器作用在找出元素內是否含有內容或關係，以產生所需要集合元素。jQuery內容過濾器速查表
| 過濾器 | 說明 | 範例 |
|---|---|---|
| :contains(text) | 選擇包含指定文字(text)的元素。 | $(':contains(text)') |
| :empty | 選擇沒有子元素的元素(包含文字節點)。 | $(':empty') |
| :has(selector) | 選擇包含有selector的selector。 | $(':has(selector)') |
| :parent | 選擇包有父子元素的元素(包含文字節點)。 | $(':parent') |
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
沒有留言:
張貼留言
感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。