• jQuery9种选择器


    jQuery 9种选择器

    1、基本选择器-5个

      

     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.9.1.js"></script>
     5   </head>
     6   <body>
     7       <div id="div1ID">div1</div>
     8       <div id="div2ID">div2</div>
     9       <span class="myClass">span1</span>
    10       <span class="myClass">span2</span>
    11       <span class="myClass">span3</span>
    12       <p>p</p>
    13       <script type="text/javascript">
    14       
    15           //1)查找ID为"div1ID"的元素--a)#id
    16             //var $div = $("#div1ID");//一定要注意要加#号
    17             //alert($div[0].nodeName);
    18           alert($("#div1ID").html());
    19           
    20           //2)查找DIV元素的个数[size()方法和length属性]--b)element
    21           //alert($("div").size());
    22           //alert($("div").length);
    23           
    24           //3)查找所有样式是"myClass"的元素的个数--c).class
    25           //alert($(".myClass").size());
    26           
    27           //4)查找所有DIV,SPAN,P元素的个数--d)selector1,selector2,selectorN
    28           //alert($("div,span,p").length);
    29           
    30           //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
    31           //alert($("#div1ID,.myClass,p").size());
    32           
    33       </script>
    34   </body>
    35 </html>

    2、层级选择器-4个

      

    form input:  查询form下所有input元素,含有后代关系,即包括儿子和孙子及后代
    form>input:查询form下所有input元素,只有父子关系,没有后代关系
    form+input:查询与form同级的第一个input元素,是兄弟关系
    form~input:查询与form同级的所有input元素,是兄弟关系

     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.9.1.js"></script>
     5   </head>
     6   <body>
     7     <form>
     8         <input type="text" value="a"/>        
     9         <table>
    10             <tr>
    11                 <td>
    12                     <input type="checkbox" value="b"/>
    13                 </td>
    14             </tr>            
    15         </table>
    16         <input type="text" value="a1"/>
    17     </form>
    18     <input type="radio" value="c"/>
    19     <input type="radio" value="d"/>
    20     <input type="radio" value="e"/>
    21     <script type="text/javascript">
    22         //1)找到表单form下所有的input元素的个数--空格:代表后代,包括儿子,孙子及后代
    23         //alert($("form input").size());
    24         
    25           //2)找到表单form下所有的直接儿子input元素个数-->:代表直接儿子,不包括孙子及后代
    26           //alert($("form>input").size());
    27           
    28           //3)找到表单form同级第一个input元素的value属性值--+:代表同级第一个元素
    29           //alert($("form+input").val());    
    30           
    31           //4)找到所有与表单form同级的input元素个数--~:代表同级所有的元素
    32           //alert($("form~input").size());
    33     </script>
    34   </body>
    35 </html>

     

    3、增强型基本选择器--

      

    :first:查询第一个元素
    :last:查询最后个元素
    :checked:查询选中的复选框
    :not(:checked):查询未选中的复选框
    :even:查找表格的1、3、5...行(即索引值0、2、4...)--查找的是索引值为偶数(html页面中所有表格,第一个算起,以此类推)
    :odd: 查找表格的0、2、4...行(即索引值1、3、5...)--查找的是索引值为奇数
    :eq():索引从0开始 equals
    :gt():大于索引号 greater than
    :lt():小于索引号 less than
    :header:查询所有<h1/2/3/4/5/6>标签
    .css("key","value")为查询到的所有标签添加CSS样式

     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.9.1.js"></script>
     5   </head>
     6   <body>
     7     <ul>
     8         <table><tr><td><li>list item 0</li></td></tr></table>
     9         <li>list item 1</li>
    10         <li>list item 2</li>
    11         <li>list item 3</li>
    12         <li>list item 4</li>
    13         <li>list item 5</li>
    14         <table><tr><td><li>list item 6</li></td></tr></table>
    15         <!--<table><tr><td><li>list item 7</li></td></tr></table>
    16         <table><tr><td><li>list item 8</li></td></tr></table>!-->
    17     </ul>
    18     <input type="checkbox" checked/>
    19     <input type="checkbox" checked/>
    20     <input type="checkbox"/>
    21     <table border="1">
    22         <tr><td>line1</td></tr>
    23         <tr><td>line2</td></tr>
    24         <tr><td>line3</td></tr>
    25     </table>    
    26     <h1>h1</h1>
    27     <h2>h2</h2>
    28     <h3>h3</h3>
    29     <p>p</p>
    30     <script type="text/javascript">
    31         //1)查找UL中第一个元素的内容
    32         //alert($("ul li:first").html());//list item 0
    33         //alert($("ul>li:first").html());//list item 1
    34         
    35           //2)查找UL中最后个元素的内容
    36           //alert($("ul li:last").html());//list item 6
    37           //alert($("ul>li:last").html());//list item 5
    38         
    39           //3)查找所有未选中的input元素个数
    40           //alert($("input:not(:checked)").size());
    41           
    42           //4)查找表格的1、3、5...奇数行个数[从0开始计数]
    43           //alert($("table tr:even").size());
    44           
    45           //5)查找表格的2、4、6...偶数行个数[从0开始计数]
    46           //alert($("table tr:odd").size());
    47           
    48           //6)查找表格中第二行的内容,从索引号0开始
    49           //alert($("table tr:eq(1)").html());
    50           
    51           //7)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
    52           //alert($("table tr:gt(0)").size());
    53           
    54           //8)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
    55           //alert($("table tr:lt(2)").size());
    56           
    57           //9)给页面内所有标题<h1><h2><h3>加上红色背景色
    58           //$(":header").css("background","#ff0000;");
    59     </script>
    60   </body>
    61 </html>

    4、内容选择器-4个

      

    :contains('john'):表示包含指定字符串的标签,字符串大小写敏感
    :empty:表示查询空标签的元素
    :has('p'):表示查询有子元素的元素
      .addClass("样式名"):为查询到的所有标签添加样式
    :parent:表示查询非空标签

     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.9.1.js"></script>
     5     <style type="text/css">
     6         .myClass{
     7             font-size:44px;
     8             color:blue
     9         }
    10     </style>
    11   </head>
    12   <body>
    13       <p>hha</p>
    14     <div><p>John Resig hacket</p></div>
    15     <div><p>George Martin</p></div>
    16     <div>Malcom John Sinclair hacket</div>
    17     <div>J. Ohn</div>
    18     <p></p>
    19     <p></p>
    20     <div></div>
    21     <script type="text/javascript">
    22     
    23         //1)查找所有包含文本"John"的div元素的个数
    24         //alert($("div:contains('hacket')").size());
    25         
    26           //2)查找所有p元素为空的元素个数
    27           //alert($("p:empty").size());
    28           
    29           //3)给所有包含p元素的div元素添加一个myClass样式
    30           //$("div:has('p')").addClass("myClass");
    31           
    32           //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
    33           alert($("p:parent").size());
    34           
    35     </script>
    36   </body>
    37 </html>

    5、可见性选择器-2个

      

    :hidden:表示查询所有隐蔽的标签
    :visible:表示查询所有显示的标签
      或:not(:hidden)

     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.9.1.js"></script>
     5   </head>
     6   <body>
     7     <table border="1" align="center">
     8       <tr style="display:none">
     9           <td>Value 1</td>
    10       </tr>
    11       <tr>
    12           <td>Value 2</td>
    13       </tr>
    14       <tr>
    15           <td>Value 3</td>
    16       </tr>
    17     </table>
    18     <script type="text/javascript">
    19         //1)查找隐藏的tr元素的个数
    20         //alert($("table tr:hidden").size());
    21         //alert($("tr:hidden").size());
    22             
    23          //2)查找所有可见的tr元素的个数
    24          //alert($("table tr:visible").size());
    25          alert($("table tr:not(:hidden)").size());
    26     </script>
    27   </body>
    28 </html>

    6、属性选择器

      

    div[id]:表示查询含有id属性的div元素
    input[name='newsletter']:表示查询含有name属性,且其值是"newsletter"的input元素
    input[name!='newsletter:表示查询含有name属性,且其值不是"newsletter"的input元素
    input[name^='newsletter:表示查询含有name属性,且其值以"news"开头的input元素
    input[name$='letter':表示查询含有name属性,且其值以"letter"结尾的input元素
    input[name*='news']::表示查询含有name属性,且其包含"news"的input元素

     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.9.1.js"></script>
     5   </head>
     6   <body>
     7     <div>
     8          <p>Hello!</p>
     9     </div>
    10     <div id="test2"></div>
    11     <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    12     <input type="checkbox" name="newsletter" value="Cold Fusion" id="myID" />
    13     <input type="checkbox" name="newsaccept" value="Evil Plans" />
    14     <script type="text/javascript">
    15         //1)查找所有含有id属性的div元素个数
    16         //alert($("div[id]").size());
    17         
    18           //2)查找所有name属性是newsletter的input元素,并将其选中
    19           //alert($("input[name='newsletter']").size());
    20           
    21           //3)查找所有name属性不是newsletter的input元素,并将其选中
    22           //alert($("input[name!='newsletter']").size());
    23           //$("input[name!='newsletter']").attr("checked","checked");
    24         
    25           //4)查找所有name以'news'开始的input元素,并将其选中
    26           //$("input[name^='news']").attr("checked","checked");
    27           
    28           //5)查找所有name 以'letter'结尾的input元素,并将其选中
    29           //$("input[name$='letter']").attr("checked","checked");
    30           
    31           //6)查找所有name包含'news'的input元素,并将其选中
    32           //$("input[name*='news']").attr("checked","checked");
    33           
    34           //7)找到所有含有id属性,并且它的name属性是以"letter"结尾的input元素,并将其选中
    35           //$("input[id][name$='letter']").attr("checked","checked");
    36     </script>
    37   </body>
    38 </html>

    7、子元素选择器

      

    :first-child:表示查询第一个子元素
    :last-child:表示查询最后一个子元素
    :only-child:表示查询只有一个子元素的元素
    :nth-child(编号从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.9.1.js"></script>
     5   </head>
     6   <body>
     7     <ul>
     8       <li>John</li>
     9       <li>Karl</li>
    10       <li>Brandon</li>
    11     </ul>
    12     <ul>
    13       <li>Glen</li>
    14       <li>Tane</li>
    15       <li>Ralph</li>
    16     </ul>
    17     <ul>
    18       <li>Jack</li>
    19     </ul>
    20     <script type="text/javascript">
    21         //1)迭代每个ul中第1个li元素中的内容,索引从1开始
    22         /*$("ul li:first-child").each(function(){//$("ul li:first")如果是这个,只找到第一个ul的li的内容
    23             alert($(this).html());
    24         });*/    
    25 
    26         //2)迭代每个ul中最后1个li元素中的内容,索引从1开始
    27         /*$("ul li:last-child").each(function(){
    28             alert($(this).html());
    29         });*/                
    30             
    31         //3)在ul中查找是唯一子元素的li元素的内容
    32         /*$("ul li:only-child").each(function(){
    33             alert($(this).html());
    34         });*/
    35                 
    36         //4)迭代每个ul中第2个li元素中的内容,索引从1开始
    37         /*$("ul li:nth-child(2)").each(function(){
    38             alert($(this).html());
    39         });*/        
    40     </script>
    41   </body>
    42 </html>

     

    8、表单选择器

      

    :input:查找所有input元素的个数,注:包含所有input,textarea,select和button元素
    :text
    :password
    :radio
    :checkbox
    :file
    :submit
    :reset
    :image
    :file

     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.9.1.js"></script>
     5   </head>
     6   <body>
     7     <form>
     8         <input type="button" value="Input Button"/><br/>
     9         <input type="checkbox" /><br/>
    10         <input type="file" /><br/>
    11         <input type="hidden" /><br/>
    12         <input type="image" /><br/>
    13         <input type="password" /><br/>
    14         <input type="radio" /><br/>
    15         <input type="radio" /><br/>
    16         <input type="reset" /><br/>
    17         <input type="submit" /><br/>
    18         <input type="text" /><br/>
    19         <select><option>Option</option></select><br/>
    20         <textarea></textarea><br/>
    21         <button>Button</button><br/>
    22     </form>
    23     <script type="text/javascript">
    24         
    25         //1)查找所有input元素的个数,
    26           //alert($("input").size());//10
    27           //alert($(":input").size());//14 注:包含所有input,textarea,select和button元素
    28           
    29           //2)查找所有文本框的个数
    30           //alert($(":text").size());    
    31           
    32           //3)查找所有密码框的个数
    33           //alert($(":password").size());
    34           
    35           //4)查找所有单选按钮的个数
    36           //alert($(":radio").size());
    37           
    38           //5)查找所有复选框的个数
    39           //alert($(":checkbox").size());
    40           
    41           //6)查找所有提交按钮的个数,非IE可能将<button>当作一个提交按钮
    42           //alert($(":submit").size());//2
    43           //alert($(":submit").val());
    44         
    45           //7)匹配所有图像域的个数
    46           //alert($(":image").size());
    47           
    48           //8)查找所有重置按钮的个数
    49           //alert($(":reset").size());
    50           
    51           //9)查找所有普通按钮的个数
    52           //alert($(":button").size());
    53           
    54          //10)查找所有文件域的个数
    55          //alert($(":file").size());
    56          
    57          //11)查找所有input元素为隐藏域的个数
    58          //alert($(":input:hidden").size());
    59     </script>
    60   </body>
    61 </html>

    9、表单对象属性

      

    :enabled:表示查询可用的元素
    :disabled:表示查询不可用的元素
    :checked:表示查询选中的复选/单选框的元素
    :selected:表示查询选中的下拉框元素

     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.9.1.js"></script>
     5   </head>
     6   <body>
     7     <form>
     8       <input name="email" disabled="disabled" />
     9       <input name="password" disabled="disabled" />
    10       <input name="id" />
    11       <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
    12       <input type="checkbox" name="newsletter" value="Weekly" />
    13       <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    14       <select>
    15           <option value="1">Flowers</option>
    16           <option value="2" selected="selected">Gardens</option>
    17           <option value="3">Trees</option>
    18       </select>
    19     </form>
    20     <script type="text/javascript">
    21         //1)查找所有可用的input元素的个数
    22         //alert($(":input:enabled").size());5//:input <select>也算作一个input
    23         //alert($("input:enabled").size());4
    24         
    25          //2)查找所有不可用的input元素的个数
    26          //alert($(":input:disabled").size());    
    27          
    28          //3)查找所有选中的复选框元素的个数
    29          //alert($(":checkbox:checked").size());
    30          
    31          //4)查找所有未选中的复选框元素的个数
    32          //alert($(":checkbox:not(:checked)").size());
    33          
    34          //5)查找所有选中的选项元素的个数
    35         //alert($("select option:selected").size());
    36     </script>
    37   </body>
    38 </html>
  • 相关阅读:
    UI: 操作导航控制器的视图控制器数组
    UI: 使用 UIViewController 展现和管理视图
    UI: 使用 UINavigationController 实现导航
    UI: 使用 UIActivityViewController 显示分享选项
    UI: 使用 UIActivityViewController 显示分享选项
    UI: 自定义 UISegmentedControl
    UI: UISegmentedControl 做简单选项分组及其自定义
    UI: UISlider 实现指定范围值的选择
    隧道目标识别实验过程(二)标准VOC数据集和制作后的数据集实验结果对比
    隧道目标识别实验过程(一)数据集的制作
  • 原文地址:https://www.cnblogs.com/hacket/p/3069723.html
Copyright © 2020-2023  润新知