jQuery选择器

     在JavaScript中选择器不是很丰富, 主要id,tagName, name三种,也可以根据节点的结果来获取元素;JavaScript的优秀库jQuery对这方面进行了适当的改进,根据API文档的声明,有9中选择器, 可以快速定位元素,提高效率!

    jQuery选择器:具体查看jQuery文档!

1 ,基本选择器
2,层级选择器
3,基本选择器
4,内容选择器
5,可见性
6,属性
7,子元素
8.表单
 9, 表单对象属性

   1 基本选择器 

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 5   </head>
 6   <body>
 7       
 8       <div id="div1ID">div1</div>
 9       <div id="div2ID">div2</div>
10       <span class="myClass">span</span>
11       <p>p</p>
12       
13       <script type="text/javascript">
14       
15        //1)查找ID为"div1ID"的元素个数
16        //alert( $("#div1ID").size() );
17        
18       //2)查找DIV元素的个数
19       //alert( $("div").length );
20       
21       //3)查找所有样式是"myClass"的元素的个数
22       //alert( $(".myClass").size() );
23       
24       //4)查找所有DIV,SPAN,P元素的个数
25       //alert( $("DIV,span,p").size() );
26       
27       //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
28       alert( $("#div1ID,.myClass,p").size() );
29       
30       </script>
31       
32   </body>
33 </html>

  2, 层级选择器

 

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    <!-- 
    <input type="radio" value="z"/>
    <input type="radio" value="e"/>
    <input type="radio" value="y"/>
    -->
    <form>
        <input type="text" value="a"/>        
        <table>
            <tr>
                <td>
                    <input type="checkbox" value="b"/>
                </td>
            </tr>            
        </table>
    </form>
    <input type="radio" value="ccccccccc"/>
    <input type="radio" value="d"/>
    <input type="radio" value="e"/>
    <script type="text/javascript">
    
    //1)找到表单form里所有的input元素的个数
    //alert( $("form input").size() );
    
      //2)找到表单form里所有的子级input元素个数
      //alert( $("form>input").size() );
      
      //3)找到表单form同级第一个input元素的value属性值
      //alert( $("form+input").val() );
      
      //4)找到所有与表单form同级的input元素个数
      alert( $("form~input").size() );
      
    </script>
  </body>
</html>

  3 基本选择器(注意和第一种的区别)

  

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    
    <input type="checkbox" checked/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
    
    <table border="1">
      <tr><td>line1[0]</td></tr>
      <tr><td>line2[1]</td></tr>
      <tr><td>line3[2]</td></tr>
      <tr><td>line4[3]</td></tr>
      <tr><td>line5[4]</td></tr>
      <tr><td>line6[5]</td></tr>
    </table>    
    
    <h1>h1</h1>
    <h2>h2</h2> 
    <h3>h3</h3>
   
    <p>p</p>
  
    <script type="text/javascript">
        //1)查找UL中第一个LI元素的内容
            //html()要用于html/jsp,不能用在xml
            //text()既能用于html/jsp,且能用于xml
            //alert( $("ul li:first").text() );
        
          //2)查找UL中最后个元素的内容
              //alert( $("ul li:last").text() );
          
          //4)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
              //alert( $("table tr:odd").size() );
          
          //5)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
              //alert( $("table tr:even").size() );
          
          //6)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
              //html():强调的是标签中的内容,即便标签中的子标签,也会显示出来
              //text():强调的是标签中的文本内容,即便标签中的子标签,也只会显示出文本内容,不会显示子标签
              //alert( $("table tr:eq(1)").text() );
          
          //7)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
              //alert( $("table tr:gt(0)").size() );
          
          //8)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
              //alert( $("table tr:lt(3)").size() );
          
          //9)给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加蓝色
              //$(":header").css("background-color","red").css("color","#ffff33");
          
          //3)查找所有[未]选中的input为checkbox的元素个数
            alert( $(":checkbox:not(:checked)").size() );
            
    </script>
    
  </body>
</html>

  4,内容选择器

 

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
    <style type="text/css">
        .myClass{
            font-size:44px;
            color:blue
        }
    </style>
  </head>
  <body>
    
    <div><p>John Resig</p></div>
    <div><p>George Martin</p></div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>
    <div></div>

    <p></p>
    <p></p>
    
    <script type="text/javascript">
    
        //1)查找所有包含文本"John"的div元素的个数
            //alert( $("div:contains('John')").size() );
        
          //2)查找所有p元素为空的元素个数
              //alert( $("p:empty").size() );
          
          //3)给所有包含p元素的div元素添加一个myClass样式
              //$("div:has(p)").addClass("myClass");
          
          //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
              alert( $("p:parent").size() );
              
    </script>

  </body>
</html>

 5,可见性

 

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <table border="1" align="center">
      <tr style="display:none">
          <td>Value 1</td>
      </tr>
      <tr>
          <td>Value 2</td>
      </tr>
      <tr>
          <td>Value 3</td>
      </tr>
    </table>
    
    <script type="text/javascript">
        //1)查找隐藏的tr元素的个数
        //alert( $("table tr:hidden").size() );
        
          //2)查找所有可见的tr元素的个数
        //alert( $("table tr:NOT(:hidden)").size() );
        alert( $("table tr:visible").size() );//提倡
    </script>
    
  </body>
</html> 

6, 属性选择器

 

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <div>
      <p>Hello!</p>
    </div>
    <div id="test2"></div>
    
    <input type="checkbox" name="newsletter" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="newsaccept" value="Evil Plans" />
    
    <!-- 
    <input type="checkbox" name="letternews" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
    <input type="checkbox" name="accNEWSept" value="Evil Plans" />
    -->
    
    <script type="text/javascript">
    
        //1)查找所有含有id属性的div元素个数
        //alert( $('div[id]').size() );
            
         //2)查找所有name属性是newsletter的input元素,并将其选中
        //$("input[name='newsletter']").attr("checked","checked");
         
          //3)查找所有name属性不是newsletter的input元素,并将其选中
        //$("input[name!='newsletter']").attr("checked","true");
        /*
            请问:在JS中如下符号表示什么意思
            1)=/==/===
            2)!=/!==
            明天讲解
         */
          //4)查找所有name属性以'news'开头的input元素,并将其选中
        //$("input[name^='news']").attr("checked","checked");
                  
          //5)查找所有name属性以'letter'结尾的input元素,并将其选中
          //$("input[name$='letter']").attr("checked","checked");
          
          //6)查找所有name属性包含'news'的input元素,并将其选中
        //$("input[name*='news']").attr("checked","checked");
          
          //7)找到所有含有id属性,并且它的name属性是以"letter"结尾的input元素,并将其选中
          $("input[id][name$='letter']").attr("checked","true");
          
    </script>
    
  </body>
</html>





 

7,子元素选择器

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <div>
      <p>Hello!</p>
    </div>
    <div id="test2"></div>
    
    <input type="checkbox" name="newsletter" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="newsaccept" value="Evil Plans" />
    
    <!-- 
    <input type="checkbox" name="letternews" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
    <input type="checkbox" name="accNEWSept" value="Evil Plans" />
    -->
    
    <script type="text/javascript">
    
        //1)查找所有含有id属性的div元素个数
        //alert( $('div[id]').size() );
            
         //2)查找所有name属性是newsletter的input元素,并将其选中
        //$("input[name='newsletter']").attr("checked","checked");
         
          //3)查找所有name属性不是newsletter的input元素,并将其选中
        //$("input[name!='newsletter']").attr("checked","true");
        /*
            请问:在JS中如下符号表示什么意思
            1)=/==/===
            2)!=/!==
            明天讲解
         */
          //4)查找所有name属性以'news'开头的input元素,并将其选中
        //$("input[name^='news']").attr("checked","checked");
                  
          //5)查找所有name属性以'letter'结尾的input元素,并将其选中
          //$("input[name$='letter']").attr("checked","checked");
          
          //6)查找所有name属性包含'news'的input元素,并将其选中
        //$("input[name*='news']").attr("checked","checked");
          
          //7)找到所有含有id属性,并且它的name属性是以"letter"结尾的input元素,并将其选中
          $("input[id][name$='letter']").attr("checked","true");
          
    </script>
    
  </body>
</html>





 

8, 表单选择器

 

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    <form>
        <input type="button" value="Input Button"/><br/>
        <input type="checkbox" /><br/>
        <input type="file" /><br/>
        <input type="hidden" name="id" value="123"/><br/>
        <input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/>
        <input type="password" /><br/>
        <input type="radio" /><br/>
        <input type="reset" /><br/>
        <input type="submit" /><br/>
        <input type="text" /><br/>
        <select><option>Option</option></select><br/>
        <textarea></textarea><br/>
        <button>Button</button><br/>
    </form>
    
    <script type="text/javascript">
    
        //1)查找所有input元素的个数
        //alert( $("input").size() );//10,找input标签
        //alert( $(":input").size() );//13,找input标签和select/textarea/button
            
          //2)查找所有文本框的个数
          //alert( $(":text").size() );
          
          //3)查找所有密码框的个数
          //alert( $(":password").size() );
          
          //4)查找所有单选按钮的个数
          //alert( $(":radio").size() );
          
          //5)查找所有复选框的个数
          //alert( $(":checkbox").size() );
          
          //6)查找所有提交按钮的个数
          //alert( $(":submit").size() );
          
          //7)匹配所有图像域的个数
          //alert( $(":images").size() );
          
          //8)查找所有重置按钮的个数
          //alert( $(":reset").size() );
          
          //9)查找所有普通按钮的个数
          //alert( $(":button").size() );
          
         //10)查找所有文件域的个数
         //alert( $(":file").size() );
         
         //11)查找所有input元素为隐藏域的个数
         //alert( $(":input:hidden").size() );
         
    </script>
  </body>
</html> 

9, 表单对象属性

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <form>

      <input type="text" name="email" disabled="disabled" />
      <input type="text" name="password" disabled="disabled" />
      <input type="text" name="id" />

      <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
      <input type="checkbox" name="newsletter" value="Weekly" />
      <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    
      <select id="provinceID">
          <option value="1">广东</option>
          <option value="2" selected="selected">湖南</option>
          <option value="3">湖北</option>
      </select>
        
    </form>
    
    
    
    <script type="text/javascript">
    
        //1)查找所有可用的input元素的个数
        //alert( $("input:enabled").size() );
        
         //2)查找所有不可用的input元素的个数
        //alert( $("input:disabled").size() );
         
         //3)查找所有选中的复选框元素的个数
        //alert( $(":checkbox:checked").size() );
             
         //4)查找所有未选中的复选框元素的个数
        //alert( $(":checkbox:NOT(:checked)").size() );
         
         //5)查找所有选中的选项元素的个数
         //alert( $("select option:selected").size() );
         alert( $("#provinceID option:NOT(:selected)").size() );
         
    </script>
    
  </body> 
</html>

总结:学习jquery查看jquery是很好的学习方法, 实例代码简单丰富.

       

posted @ 2017-06-04 10:30  ANDY1995  阅读(134)  评论(0编辑  收藏  举报