哪位帅哥能帮忙看看? $("div:empty").text(":empty").css("border", "3px groove red"); 为什么这个没有效果呢? ​

来源:2-8 jQuery选择器之内容筛选选择器

qq_羽之翼_0

2017-04-25 19:55

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h2>内容筛选器</h2>

    <h3>:contains/:has</h3>

    <div class="left">

        <div class="div">

            <p>contains</p>

        </div>

        <div class="div">

            <p>contains</p>

        </div>

        <div class="div">

            <p>

                <span>:has</span>

            </p>

        </div>

        <div class="div">

            <p>:contains</p>

        </div>

    </div>


    <script type="text/javascript">

        //查找所有class='div'中DOM元素中包含"contains"的元素节点

        //并且设置颜色

   $(".div:contains(':contains')").css("color","red")

    </script>


    <script type="text/javascript">

        //查找所有class='div'中DOM元素中包含"span"的元素节点

        //并且设置颜色

        $(".div:has(p)").css("color", "blue");

    </script>



    <h3>:parent/:empty</h3>

    <div class="left">

        <div class="aaron">

            <a>:parent</a>

        </div>

        <div class="aaron">

            <a>:parent</a>

        </div>

        <div class="aaron">

            <a>:parent</a>

        </div>

        <div class="aaron">

           

        </div>

    </div>

    <script type="text/javascript">

       //选择所有包含子元素或者文本的a元素

       //增加一个蓝色的边框

       $("a:parent").css("border", "3px groove blue");

    </script>


    <script type="text/javascript">

       //找到a元素下面的所有空节点(没有子元素)

       //增加一段文本与边框

      $("div:empty").text(":empty").css("border", "3px groove red"); 

    </script>


</body>


</html>


写回答 关注

6回答

  • qq_钉子_emouHK
    2018-11-07 11:07:13

    $(".div:contains(':contains')").css("color","red") //句末差个分号 ;

  • 慕粉木粉
    2018-05-24 22:12:22

    一楼二楼四楼正解,空格也算一个文本节点

  • 荒魂轮廻
    2017-09-02 14:06:54
     <div class="aaron">
               
            </div>

    在这里你少了一个标签,应该是这样的

            <div class="aaron">
                <a></a>
            </div>

    少了一个a标签,

    $("div:empty").text(":empty").css("border", "3px groove red");

    这句话中的.text(":empty")要给他值的,不知道是不是这个问题

  • 青黄不一
    2017-05-30 15:53:18

    换成        <div class="aaron"></div>试试就能有效果了。这时应该你        <div class="aaron">

    </div>有文本节点,不满足:empty的筛选,所以才没有效果的

  • 我不是管家
    2017-05-08 01:50:34

    $("div:empty")的意思是选择没有子元素的元素(包含文本节点),在这个例子中,通常来讲

     <div class="aaron">

               </div>

    就是符合没有子节点的元素,但是不其然,在html中空格也代表文本节点,所以就找不到没有字元素的节点,

    如果想成功的话,去掉中间空格 <div class="aaron"></div>,这样就可以了



  • 消灭妖精的超人
    2017-04-25 21:58:35

     <div class="aaron">

               

            </div>

    这段代码不可以加空格

    <div class="aaron"></div>



    考拉汪汪

    不错的

    2017-04-27 09:55:40

    共 1 条回复 >

jQuery基础 (一)—样式篇

jQuery初入开启样式修炼,体验万能的jQuery样式集搭建网站布局

217509 学习 · 1218 问题

查看课程

相似问题