• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.5 内容伪类选择器

内容伪类选择器,就是根据元素中的文字内容或所包含的子元素特征来选择元素,其文字内容可以模糊或绝对匹配进行元素定位。

jQuery内容伪类选择器
选择器 说明
:contains(text) 选择包含给定文本内容的元素
:has(selector) 选择含有选择器所匹配元素的元素
:empty 选择所有不包含子元素或者不包含文本的元素
:parent 选择含有子元素或者文本的元素(跟:empty相反)

一、:contains()

在jQuery中,我们可以使用:contains()选择器来选择包含指定文本内容的元素。

语法:

 
$("E:contains(text)")

说明:

E表示元素名,text表示所包含的文本内容。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*去除所有元素默认外边距以及内边距*/
        *{padding:0;margin:0;}
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("p:contains(jQuery)").css("background-color", "red");
        })
    </script>
</head>
<body>
    <div>jQuery入门教程</div>
    <p>write less do more</p>
    <p>从JavaScript到jQuery</p>
    <div>欢迎来到绿叶学习网</div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("p:contains(jQuery)")表示选择包含“jQuery”这一个文本内容的p元素。

二、:has(selector)

在jQuery中,我们可以使用:has(selector)选择器来选择“符合条件(selector)”的元素。

语法:

 
$(":has(selector)")

说明:

selector表示一个 jQuery选择器表达式。所谓的jQuery选择器表达式,说白了就是我们在前几章所学到的选择器。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*去除所有元素默认外边距以及内边距*/
        *{padding:0;margin:0;}
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div:has(span)").css("background-color", "red");
        })
    </script>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
    <div>
        <p>这是一个段落</p>
        <span>这是一个span</span>
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("div:has(span)")表示选择内部含有span元素的div元素。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*去除所有元素默认padding以及margin*/
        *{padding:0;margin:0;}
        /*去除列表项符号*/
        ul{list-style-type:none;}
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div:has(#red,#yellow)").css("background-color", "red");
        })
    </script>
</head>
<body>
    <div><span id="red">红色red</span></div>
    <div><span>橙色orange</span></div>
    <div><span id="yellow">黄色yellow</span></div>
    <div><span>绿色green</span></div>
    <div><span>蓝色blue</span></div>
    <div><span>紫色purple</span></div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("div:has(#red,#yellow)")表示选择内部含有id为red和id为yellow子元素的div元素。:has(selector)中的selector是一个群组选择器。

三、:empty

在jQuery中,我们可以使用:empty选择器选择所有“没有子元素”或者“没有文本”的空元素。

注意,只要内部有子元素或者文本内容,使用:empty都不会被选中。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table,tr,td
        {
            border:1px solid silver;
        }
        td
        {
            width:60px;
            height:60px;
            line-height:60px;
            text-align:center;
        }
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("td:empty").css("background-color", "red");
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>2</td>
            <td>4</td>
            <td>8</td>
        </tr>
        <tr>
            <td>16</td>
            <td>32</td>
            <td>64</td>
        </tr>
        <tr>
            <td>128</td>
            <td>256</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

在浏览器预览效果如下:

分析:

$("td:empty")表示选择内部没有文本内容页没有子元素的td元素。

四、:parent

在jQuery中,我们可以使用:parent选择器选择“含有子元素”或者“含有文本”的元素。:parent选择器跟:empty选择器是相反的。

注意,只要元素中有子元素或者文本内容,使用:parent都会被选中。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table,tr,td
        {
            border:1px solid silver;
        }
        td
        {
            width:60px;
            height:60px;
            line-height:60px;
            text-align:center;
        }
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("td:parent").css("background-color", "red");
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>2</td>
            <td>4</td>
            <td>8</td>
        </tr>
        <tr>
            <td>16</td>
            <td>32</td>
            <td>64</td>
        </tr>
        <tr>
            <td>128</td>
            <td>256</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

在浏览器预览效果如下:

分析:

$("td:parent")表示选择内部有文本内容页没有子元素的td元素。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部