zoukankan      html  css  js  c++  java
  • 内容过滤选择器

    内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。具体包含以下几种(下面的内容过滤选择器获得的都是元素集合)。

    同之前一样,在操作之前,先在html中下如下代码,后期所有的操作都在基础之上。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="jquery-3.2.1.js"></script>
        <style type="text/css">
               .divstyle{
                    300px;
                    height:150px;
                    background-color:pink;
                }
       </style>
    </head>
    <body>
          <div>I am yuehan</div>
            <div></div>
            <div><span>today is Saturday</span></div>
            <div><input type='text'></div>
            <div><p class="study">We are studing html</p></div>
            <div><p>good good study day day up</p></div>
    </body>
    </html>

    1、:contains(text)

    主要用来选取包含文本内容为“text”的元素。

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

    2、:empty

    选取不包含子元素或者文本的空元素。

     $("div:empty").addClass("divstyle");

    3、:has(selector)

    选取含有选择器所匹配的元素的元素。

    //$(:has(.test))   选择拥有.test的子元素的父元素
    //$(div:has(.test))  选择拥有.test的子元素的父元素,且该父元素是div元素
    $("div:has(.study)").css("color","#00CD00");

    $("div:has(p)").eq(0).css({"color":"#000080","font-weight":"bold"});

    4、:parent

    选取含有子元素或者文本的元素

     $("div:parent").css("background-color","SeaGreen");

  • 相关阅读:
    2019-2020-1 20175214 《信息安全系统设计基础》第1周学习总结
    数据结构部分结构截图
    优化算法小结
    排序算法总结
    计算机网络复习总结(三)
    计算机网络复习总结(二)
    计算机网络复习总结(一)
    Spring mvc4 + ActiveMQ 整合
    JAVA中定时任务
    类上带泛型
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/9383533.html
Copyright © 2011-2022 走看看