07-jQuery内容选择器详解：:contains(text) 、:empty 、:has(selector)、 :parent

最新推荐文章于 2022-07-22 16:27:51 发布

不及你笑靥如花

最新推荐文章于 2022-07-22 16:27:51 发布

阅读量496

点赞数

分类专栏： jquery 文章标签： html jquery

本文链接：https://blog.csdn.net/qq_43775721/article/details/112862978

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery内容选择器详解

一、body部分代码展示
二、:empty
三、:parent
四、:contains(text)
五、:has(selector)

一、body部分代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery内容选择器</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <div>div1</div>
    <div>div2</div>
    <div><span>span-div</span></div>
</body>

</html>

二、:empty

$(“selector:empty”)

作用：匹配所有不包含子元素或者文本的空元素
参数：无

代码示例：

 <script>
        $(function() {
            //:empty即没有文本内容，也没有子元素
            var $emptyDiv = $("div:empty");
            console.log($emptyDiv);
        });
    </script>

在这里插入图片描述

三、:parent

$(“selector:parent”)

作用：匹配含有子元素或者文本的元素
参数：无

代码示例：

<script>
        $(function() {
            //:parent 有文本内容或有子元素
            var $parentDiv = $("div:parent");
            console.log($parentDiv);
        });
    </script>

在这里插入图片描述

四、:contains(text)

$(“selector:contains(text)”)

作用：匹配包含给定文本的元素
参数：无

代码示例：

 <script>
        $(function() {
            //:contains(text) 包含text里面的文本内容
            var $containsDiv = $("div:contains('di')");
            console.log($containsDiv);
        });
    </script>

在这里插入图片描述

五、:has(selector)

$(“selector:has(selector)”)

作用：匹配含有选择器所匹配的元素的元素
参数：无

代码示例：

<script>
        $(function() {
            //:has(selector) 包含指定子元素的元素
            var $hasDiv = $("div:has('span')");
            console.log($hasDiv);
        });
    </script>

在这里插入图片描述

不及你笑靥如花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
07-jQuery内容选择器详解：:contains(text) 、:empty 、:has(selector)、 :parent

jQuery内容选择器详解一、body部分代码展示二、:empty三、:parent四、:contains(text)五、:has(selector)一、body部分代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫