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

标签：JQuery function click 过滤 backgroundColor div 选择器 red

属性选择器
1. 属性名称选择器
　　语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
　　语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器
　　语法： $("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>

标签：JQuery,function,click,过滤,backgroundColor,div,选择器,red
From： https://www.cnblogs.com/xuche/p/17108898.html

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

相关文章

赞助商

阅读排行