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

    内容过滤选择器根据元素中文字内容所包含的子元素特征获取元素,其文字类容可以模糊绝对匹配进行元素定位,其详细说明如表:

    选择器 功能 返回值
    :contains(text) 获取包含给定文本的元素 元素集合
    :empty 获取所有不包含子元素或者文本的空元素 元素集合
    :has(selector) 获取含有选择器所匹配的元素的元素 元素集合
    :parent 获取含有子元素或者文本的元素 元素集合

     示例——使用jQuery内容过滤选择器选择额元素

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0
     2 Transitional//EN"
     3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     4 <html xmlns="http://www.w3.org/1999/xhtml">
     5 <head>
     6 <title>使用jQuery层次选择器</title>
     7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script>
     8 <style type="text/css">
     9     body{font-size:12px;text-align:center}
    10     div{float:left;border:solid 1px #ccc;margin:8px;
    11         65px;height:65px;display:none}
    12     span{float:left;border:solid 1px #ccc;margin:8px;
    13         45px;height:45px;background-color:#eee}
    14 </style>
    15 <script type="text/javascript">
    16 
    17     $(function(){    // 显示包含给定文本的元素
    18         //$("div:contains('A')").css("display","block");
    19         //$("div:contains('D')").css("display","none");
    20     })
    21 
    22     $(function(){    // 显示所有不包含子元素或者文本的空元素
    23         // 显示所有不包含子元素或者文本的空元素
    24         //$("div:empty").css("display","block");
    25         //$("div:empty").css("display","none");
    26     });  
    27 
    28     $(function(){    // 显示含有选择器所匹配的元素
    29         //$("div:has(span)").css("display","block");
    30         //$("div:has(span)").css("display","none");
    31     })  
    32     
    33     $(function(){    // 显示含有子元素或者文本的元素
    34         //$("div:parent").css("display","block");
    35         //$("div:parent").css("display","none");
    36     })  
    37 </script>
    38 </head>
    39 <body>
    40     <div>ABCD</div>
    41     <div><span></span></div>
    42     <div>EFaH</div>
    43     <div></div>
    44 </body>
    45 </html>
    Demo
  • 相关阅读:
    C#学习笔记-类的一些基本成员
    SpringBoot 好“吃”的启动原理
    线程与进程
    powerdesiner
    maven
    Java反射
    获取类的全部信息 本地方法
    今天在看慕课网的java学习路径
    操作系统之哲学原理
    今天在看慕课网的java学习路径
  • 原文地址:https://www.cnblogs.com/duffy/p/4016366.html
Copyright © 2011-2022 走看看