jQuery过滤选择器——属性过滤选择器

最新推荐文章于 2024-09-06 10:19:06 发布

阅读量6.8k

点赞数 3

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/cckevincyh/article/details/53151979

版权

JavaScript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
1、[attribute]
用法: $(”div[id]“) ;
返回值：集合元素
说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签.
2、[attribute=value]
用法: $(”input[name='newsletter']“).attr(”checked”, true);
返回值：集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
3、[attribute!=value]
用法: $(”input[name!='newsletter']“).attr(”checked”, true);
返回值：集合元素
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场.
4、[attribute^=value]
用法: $(”input[name^=‘news’]“)
返回值:集合元素
说明: *匹配给定的属性是以某些值开始的元素.
5、[attribute$=value]
用法: $(”input[name$=‘letter’]“)
返回值:集合元素
说明: 匹配给定的属性是以某些值结尾的元素.
6、[attribute*=value]
用法: $(”input[name*=‘man’]“)
返回值: 集合元素
说明: 匹配给定的属性是以包含某些值的元素.
7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name$=‘man’]“)
返回值 :集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.

属性过滤选择器示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }

            div.visible{
                display:none;
            }
     </style>
     <!--引入jquery的js库-->
    </head>

    <body>

         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 含有属性title 的div元素"  id="b1"/>
         <input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
         <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
         <input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
         <input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
         <input type="button" value="属性title值 含有es的div元素."  id="b6"/>
         <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>

         <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
         <input type="hidden" value="hidden_2">
         <input type="hidden" value="hidden_3">
         <input type="hidden" value="hidden_4">

         <h1>天气冷了</h1>
         <h2>天气又冷了</h2>

         <div id="one">
             id为one   div

         </div>

         <div id="two" class="mini"  title="test">
               id为two   class是 mini  div  title="test"
               <div  class="mini" >class是 mini</div>
        </div>

         <div class="visible" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" title="test02">
              class是 one    title="test02"
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>


        <div class="visible" >
              这是隐藏的
        </div>

        <div class="one">


        </div>
        <br>
        <div id="mover" >
              动画
        </div>
        <br>


    </body>
<script language="JavaScript">
        //<input type="button" value=" 含有属性title 的div元素"  id="b1"/>
        $("#b1").click(function(){
            $("div[title]").css("background","#0000FF");
        });


        //<input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
        $("#b2").click(function(){
            $("div[title=test]").css("background","#0000FF");
        });

        //<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
        $("#b3").click(function(){
            $("div[title!=test]").css("background","#0000FF");
        });

        //<input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
        $("#b4").click(function(){
            $("div[title^=te]").css("background","#0000FF");
        });

        //<input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
        $("#b5").click(function(){
            $("div[title$=est]").css("background","#0000FF");
        });

        //<input type="button" value="属性title值 含有es的div元素."  id="b6"/>
        $("#b6").click(function(){
            $("div[title*=es]").css("background","#0000FF");
        });

        //<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
        $("#b7").click(function(){
            //多个属性过滤选择器并列使用，就这样并列放置就OK
            $("div[id][title*=es]").css("background","#0000FF");
        });

</script>
</html>