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

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
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 结尾的元素.


属性过滤选择器示例


<html>
  <head>
    <title>dddtitle>
    <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>
     
    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是 minidiv>
        div>

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


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

        <div class="one">


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


    body>
<script language="JavaScript">
        //
        $("#b1").click(function(){
            $("div[title]").css("background","#0000FF");
        });


        //
        $("#b2").click(function(){
            $("div[title=test]").css("background","#0000FF");
        });

        //
        $("#b3").click(function(){
            $("div[title!=test]").css("background","#0000FF");
        });

        //
        $("#b4").click(function(){
            $("div[title^=te]").css("background","#0000FF");
        });

        //
        $("#b5").click(function(){
            $("div[title$=est]").css("background","#0000FF");
        });

        //
        $("#b6").click(function(){
            $("div[title*=es]").css("background","#0000FF");
        });

        //
        $("#b7").click(function(){
            //多个属性过滤选择器并列使用,就这样并列放置就OK
            $("div[id][title*=es]").css("background","#0000FF");
        });

script>
html>



你可能感兴趣的:(JavaScript)