14-jQuery内容选择器

最新推荐文章于 2024-11-13 21:28:29 发布

杨亚仑

最新推荐文章于 2024-11-13 21:28:29 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery入门练习

本文链接：https://blog.youkuaiyun.com/yangyalun/article/details/82952046

jQuery入门练习专栏收录该内容

60 篇文章

订阅专栏

本文深入解析jQuery中内容选择器的功能与应用，包括如何选取空元素、有内容的元素、包含特定文本的元素及含有特定子元素的元素。通过实际代码示例，帮助读者掌握这些选择器的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$("div:empty") 作用：找到既没有文本内容也没有子元素的指定元素

$("div:parent") 作用：找到有文本内容或者有子元素的指定元素

$("div:contains(text)") 作用:找到包含指定文本内容的指定元素

$("div:has(span)") 作用：找到包含指定子元素的指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-jQuery内容选择器</title>
    <style>
        div{
            width: 50px;
            height: 100px;
            background: red;
            margin-top: 5px;
        }
    </style>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <script>
         $(function () {
                 //    编写jQuery相关代码



                 // :empty 作用：找到既没有文本内容也没有子元素的指定元素
                // var $div=$("div:empty");
                //  console.log($div);

             // :parent 作用：找到有文本内容或者有子元素的指定元素
             //     var $div=$("div:parent");
             //     console.log($div);

             // :contains(text) 作用:找到包含指定文本内容的指定元素
            // var $div=$("div:contains('我是div')")
            //  console.log($div);

             // :has(selector)  //找到包含指定子元素的指定元素
             var $div=$("div:has('span')");
             console.log($div);

         })
    </script>
</head>
<body>
<div></div>
<div>我是div1</div>
<div>我是div2</div>
<div><span></span></div>
<div><p></p></div>
</body>
</html>