使用jQuery內容過濾器方法詳解

這次帶給大家使用jQuery內容過濾器方法詳解，使用jQuery內容過濾器的注意事項有哪些，下面就是實戰案例，一起來看一下。

一 介紹

內容過濾器就是透過DOM元素包含的文字內容以及是否含有符合的元素進行篩選。內容過濾器共包含:contains(text)、:empty、:has(selector)和:parent4種，如下表所示。

#

過濾器	說明	範例
contains(text)	符合包含給定文字的元素	$("li:contains('DOM')")    //符合含有「DOM」文字內容的li元素
:empty	符合所有不包含子元素或文字的空白元素	$("td:empty")   //符合不包含子元素或文字的單元格
:has(selector)	符合含有選擇器所符合元素的元素	$("td:has(p)") //符合表格的儲存格中含有 標記的儲存格
:parent	符合含有子元素或文字的元素	$("td: parent")    //符合未為空的儲存格，即該儲存格中也包含子元素或文字

二套用

應用內容篩選器符合為空的儲存格、不為空的儲存格和包含指定文字的儲存格

三碼

<script></script>

                                                                      

编号	祝福对象	祝福者	字条内容	发送时间
1	琦琦	妈妈	愿你健康快乐的成长！	2011-07-05 13:06:06
1	wgh	爸爸	愿你健康快乐的成长！	2011-07-05 13:06:06
1	花花	wgh	愿你健康快乐的成长！	2011-07-05 13:06:06
1	科科	wgh		2011-07-05 13:06:06

<script> $(document).ready(function() { $("td:parent").css("background-color","#E8F3D1"); //为不为空的单元格设置背景颜色 $("td:empty").html("暂无内容"); //为空的单元格添加默认内容 $("td:contains(&#39;wgh&#39;)").css("color","red"); //将含有文本wgh的单元格的文字颜色设置为红色 }); </script>

#四運行結果

##相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：

######vue-cli有哪些方式縮短首屏載入時間##############使用jQuery複合選擇器方法詳解#########

以上是使用jQuery內容過濾器方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！