jQuery内容过滤器有哪些？（附带实例）

内容过滤器通过 DOM 元素包含的文本内容以及是否含有匹配的元素进行匹配。

jQuery 的内容过滤器包括 contains（text）、:empty、:has（selector）和 :parent 这 4 种，如下表所示：

表：jQuery 的内容过滤器
过滤器	说明	示例
:contains(text)	匹配包含给定文本内容的元素	$("li:contains('DOM')") //匹配包含“DOM”文本内容的<li>元素
:empty	匹配所有不包含子元素或者文本内容的空元素	$("td:empty") //匹配所有不包含子元素或者文本内容的单元格
:has(selector)	匹配含有选择器所匹配元素的元素	$("td:has(p)") //匹配表格的单元格中含有 <p> 标记的单元格
:parent	匹配包含子元素或者文本内容的元素	$("td:parent") //匹配不为空的单元格，即在该单元格中还包含子元素或者文本内容

【实例 1】使用内容过滤器匹配为空的单元格、不为空的单元格和包含给定文本内容的单元格。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，添加一个 5 行 5 列的表格。关键代码如下：

<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
    <tr>
        <td width="11%" class="head" height="27" align="center">编号</td>
        <td width="14%" class="head" align="center">祝福对象</td>
        <td width="12%" class="head" align="center">祝福者</td>
        <td width="33%" class="head" align="center">字条内容</td>
        <td width="30%" class="head" align="center">发送时间</td>
    </tr>
    <tr>
        <td height="27">1</td>
        <td>张三</td>
        <td>妈妈</td>
        <td>愿你健康快乐地成长！</td>
        <td>2025-03-15 13:06:06</td>
    </tr>
    <tr>
        <td height="27">2</td>
        <td>李四</td>
        <td>心语</td>
        <td>每天有份好心情！</td>
        <td>2025-03-15 13:26:17</td>
    </tr>
    <tr>
        <td height="27">3</td>
        <td>王五</td>
        <td>Blue</td>
        <td>梦想，不论大小，都给它一个可以绽放的机会！</td>
        <td>2025-03-15 13:36:06</td>
    </tr>
    <tr>
        <td height="27">4</td>
        <td>C语言中文网</td>
        <td>读者</td>
        <td></td>
        <td>2025-03-15 13:46:06</td>
    </tr>
</table>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，为不为空的单元格设置背景颜色，为空单元格添加默认内容以及为包含给定文本内容的单元格设置文字颜色。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("td:parent").css("background-color", "#E8F3D1"); // 为不为空的单元格设置背景颜色
    $("td:empty").html("暂无内容"); // 为空单元格添加默认内容
    $("td:contains('读者')").css("color", "red"); // 将包含文本内容“读者”的单元格的文字颜色设置为红色
    $("td.head").css("background-color", "#999999999");
});
</script>

运行本实例，其中文本内容为“读者”的单元格文字颜色被设置为红色，编号为 4 的行中“字条内容”单元格在设计时为空，这里使用 jQuery 为其添加默认内容为“暂无内容”，除该单元格外的其他单元格的背景颜色均被设置为 #E8F3D1。

jQuery内容过滤器有哪些？（附带实例）

相关文章