zoukankan      html  css  js  c++  java
  • 过滤选择器——属性过滤选择器

    属性过滤选择器根据元素的某个属性获取元素,如ID号或匹配属性值的内容,并以"["号开始、以"]"号结束。其详细的说明如表:

    选择器 功能 返回值
     [attribute]  获取包含给定属性的元素 元素集合 
     [attribute=value]  获取等于给定的属性是某个特定值得元素  元素集合 
     [attribute!=value]  获取不等于给定的属性是某个特定值的元素 元素集合 
     [attribute^=value]  获取给定的属性是以某些值开始的元素  元素集合 
     [attribute$=value]  获取给定的属性是以某些值结尾的元素  元素集合 
     [attribute*=value]   获取给定的属性是以包含某些值的元素  元素集合 
     [selector1][selector2][selector3]   获取满足多个条件的复合属性的元素  元素集合 

    示例——使用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 </style>
    13 <script type="text/javascript">
    14 
    15     $(function(){    // 显示所有含有id属性的元素
    16         //$("div[id]").show(3000);
    17     }) 
    18 
    19     $(function(){    // 显示所欲属性title的值是“A”的元素
    20         //$("div[title='A']").show(3000);
    21     }) 
    22         
    23     $(function(){    // 显示所有属性tilte的值不是"A"的元素
    24         //$("div[title!='A']").show(3000);
    25     })
    26 
    27     $(function(){    // 显示所有属性title的值以“A”开始的元素
    28         //$("div[title^='A']").show(3000);
    29     })
    30         
    31     $(function(){    // 显示所有的属性title的值以"C"结束的元素
    32         //$("div[title$='C']").show(3000);
    33     }) 
    34 
    35     $(function(){    // 显示所有属性tilte的值中含有"B"的元素
    36         //$("div[title*='B']").show(3000);
    37     }) 
    38     
    39     $(function(){    // 显示所有属性title的值中含有"B" 且属性Id的值是"divAB"的元素
    40         //$("div[id='divAB'][title*='B']").show(3000);
    41     })
    42 </script>
    43 </head>
    44 <body>
    45     <div id="divID">ID</div>
    46     <div title="A">Title A</div>
    47     <div id="divAB" title="AB">ID<br/>Tilte AB</div>
    48     <div title="ABC">Title ABC</div>
    49 </body>
    50 </html>
    Demo
  • 相关阅读:
    6.8
    6.7
    6.2
    6.1儿童节
    5.24
    5.22
    5.18
    5.17
    Visual Studio开始一个HelloWorld的enclave程序
    以太坊MPT树的HP(Hex-Prefix)编码
  • 原文地址:https://www.cnblogs.com/duffy/p/4021913.html
Copyright © 2011-2022 走看看