JQuery属性选择器和过滤选择器

JQuery属性选择器

属性名称选择器

　　语法：$ ( " A [ 属性名] " ) 包含指定属性的选择器

属性选择器

　　语法：$ ( " A [ 属性名 = ' 值' ] " ) 包含指定属性等于指定值的选择器

复合属性选择器

　　语法：$ ( " A [ 属性名 = ' 值 ' ] [ ]...") 包含多个属性条件的选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
             div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            
            div.visible{
                display:none;
            }
     </style>
     <script type="text/javascript">
        $(function () {
            //<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
            $("#b1").click(function () {
                $("div[title]").css("backgroundColor","red");
            });

            //<input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
            $("#b2").click(function () {
                $("div[title = test]").css("backgroundColor","red");
            });

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

            //<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
            $("#b4").click(function () {
                $("div[title^= te]").css("backgroundColor","red");
            });

            //<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
            $("#b5").click(function () {
                $("div[title$= est]").css("backgroundColor","red");
            });

            //<input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
            $("#b6").click(function () {
                $("div[title*= es]").css("backgroundColor","red");
            });

            //<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
            $("#b7").click(function () {
                $("div[id][title*= es]").css("backgroundColor","red");
            });


        })
        
        
    </script>
   
     
    </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"/>
         
         
       <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" style="margin-top:0px;">class是 mini</div>
        </div>
        
        
        <div class="visible" >
               这是隐藏的
        </div>
        
        <div class="one">
            
        </div>
        
        <div id="mover" >
               动画
        </div>
        
        <input type="text" value="zhang" id="username" name="username">
    </body>
    
    
   
</html>

过滤选择器

1. 首元素选择器
　　语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
　　语法： :last 获得选择的元素中的最后一个元素
3. 非元素选择器
　　语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
　　语法： :even 偶数，从 0 开始计数
5. 奇数选择器
　　语法： :odd 奇数，从 0 开始计数
6. 等于索引选择器
　　语法： :eq(index) 指定索引元素
7. 大于索引选择器
　　语法： :gt(index) 大于指定索引元素
8. 小于索引选择器
　　语法： :lt(index) 小于指定索引元素
9. 标题选择器
　　语法： :header 获得标题（h1~h6）元素，固定写法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
             div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
    <script type="text/javascript">
        $(function () {

            //<input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
            $("#b1").click(function () {
                $("div:first").css("backgroundColor","red");
            });
            //<input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
            $("#b2").click(function () {
                $("div:last").css("backgroundColor","red");
            });

            //<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor","red");
            });

            //<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
            $("#b4").click(function () {
                $("div:even").css("backgroundColor","red");
            });

            //<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor","red");
            });

            //<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
            $("#b6").click(function () {
                $("div:gt(3)").css("backgroundColor","red");
            });

            //<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor","red");
            });

            //<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor","red");
            });

            //<input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
            $("#b9").click(function () {
                $(":header").css("backgroundColor","red");
            });
        });
    </script>
    </head>
     
    <body>
                
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
         <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
         <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
         <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
         <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
         <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
         <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
         <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
         <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
         
        
         <h1>有一种奇迹叫坚持</h1>
         <h2>自信源于努力</h2>
         
         <div id="one">
             id为one  
             
         </div>
        
         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                 class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
               class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>
        
        
        
    </body>
    
    
   
</html>