JQuery过滤选择器--内容过滤器

最新推荐文章于 2021-06-27 10:34:23 发布

极客研究者

最新推荐文章于 2021-06-27 10:34:23 发布

阅读量245

点赞数

分类专栏： JQuery 文章标签： css html jquery js

本文链接：https://blog.csdn.net/qq_34550459/article/details/106112202

版权

JQuery 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。
包括:
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配元素的元素
:parent 匹配含有子元素或者文本的元素

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery之内容过滤器</title>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function(){
        $('td:parent').css('background-color','#E8F3D1');//为非空的单元格设置背景颜色
        $('td:empty').html('暂无内容');//为空的单元格添加默认内容
        $("td:contains('祝福者')").css('color','red');//将含有'祝福者'的单元格的文字颜色设置红色
        })
    </script>
</head>
<body>
     <div class="content">

            <table style="text-align: center;" width="98%" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#3F873B">
                <tr >
                    <td width="11%" height="27">编号</td>
                    <td width="14%" >祝福对象</td>
                    <td width="12%" >祝福者</td>
                    <td width="33%" >字条内容</td>
                    <td width="30%" >发送时间</td>
                </tr>

                <tr style="text-align:center;">
                        <td width="11%" height="27">1</td>
                        <td >琪琪</td>
                        <td >妈妈</td>
                        <td ></td>
                        <td>2020-05-06 20:30:00</td>
                    </tr>
            </table>
        </div>
</body>
</html>

极客研究者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery过滤选择器--内容过滤器

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。包括::contains(text) 匹配包含给定文本的元素:empty 匹配所有不包含子元素或者文本的空元素:has(selector) 匹配含有选择器所匹配元素的元素:parent 匹配含有子元素或者文本的元素Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录