• jQuery的九类选择器


    一、基本选择器

     1 <body>
     2     <script type="text/javascript">
     3         $(function(){//页面加载完毕后执行该函数
     4             //查找id为"mydiv"的元素个数
     5             alert($("#mydiv").length);//1
     6             //查找标签是div的元素个数
     7             alert($("div").length);//3
     8             //查找类名为myclass的元素的个数
     9             alert($(".mylass").length);//2
    10             //找到所有元素的个数
    11             alert($("*").length);//15
    12             //查找id为"mydiv"和标签为span的元素的个数
    13             alert($("#mydiv,span").length)//2
    14         })
    15     </script>
    16     <div id="mydiv"></div>
    17     <div id="div1"></div>
    18     <div class="mylass"></div>
    19     <span class="mylass">i am a span</span>
    20   
    21  </body>

    二、层级选择器

     1 <body>
     2     <script type="text/javascript">
     3         $(function(){
     4             //查找form表单下所有后代input元素个数
     5             alert($("form input").length);//2
     6             //查找form表单下所有子代input元素个数
     7             alert($("form>input").length);//1
     8             //查找紧挨着label标签后的input标签个数
     9             alert($("label+input").length);//2
    10             //查找和form标签同一级别的input标签个数
    11             alert($("form~input").length);//1
    12         });
    13     </script>
    14     <form>
    15         <label>Name:</label>
    16         <input type="button" value="用户1"><br><br>
    17         <fieldset> <!--该标签用于组合表单中的相关元素-->
    18             <label>Newsletter:</label>
    19             <input type="button" value="用户2"><br><br>
    20         </fieldset>
    21 
    22     </form>
    23     <input name="username3"/>
    24  </body>

    三、增强选择器

     1 <body>
     2     <script type="text/javascript">
     3         $(function(){
     4             //获取第一个元素
     5             alert($("li:first").text());//list item 1
     6             //获取最后一个元素
     7             alert($("li:last").text());//list item 5
     8             //获取所有未选中的input标签
     9             alert($("input:not(:checked)").length);//1
    10             //匹配所有索引值为偶数的元素,从0开始计数
    11             alert($("li:even").length);//3
    12             //匹配所有索引值为奇数的元素,从0开始计数
    13             alert($("li:odd").length);//2
    14             //查找索引值为2的元素
    15             alert($("li:eq(1)").text());//list item 3
    16             //匹配所有索引值大于2的元素
    17             alert($("li:gt(2)").text());//list item 4list item 5
    18             //匹配所有索引值小于2的元素
    19             alert($("li:lt(2)").text());//list item 1list item 2
    20             //给所有的如h1,h2,h3之类的标题元素加颜色
    21             $(":header").css("color","red")
    22             //查找所有复选框的个数
    23             alert($(":checkbox").length);//1
    24 
    25         });
    26     </script>
    27     <ul>
    28         <li>list item 1</li>
    29         <li>list item 2</li>
    30         <li>list item 3</li>
    31         <li>list item 4</li>
    32         <li>list item 5</li>
    33     </ul>
    34     <input type="text" name="input1">
    35     <input name="input2" checked="true"/>
    36     <input type="checkbox" />
    37 
    38 
    39     <h1>Header 1</h1>
    40     <p>Contents 1</p>
    41     <h2>Header 2</h2>
    42     <p>Contents 2</p>
    43   
    44  </body>

    四、内容选择器

     1 <body>
     2     <script type="text/javascript">
     3         $(function(){
     4             //查找含有“John”的div元素个数
     5             alert($("div:contains('John')").length);//2
     6             //查找不含有文本的div元素
     7             alert($("div:empty").length);//1
     8             //匹配div标签中含有p标签的元素个数
     9             alert($("div:has(p)").length);//1
    10             //查找所有div标签中含有子元素或者文本的元素个数
    11             alert($("div:parent").length);//5
    12         });
    13     </script>
    14 
    15     <div>John Resig</div>
    16     <div>George Martin</div>
    17     <div>Malcom John Sinclair</div>
    18     <div>J. Ohn</div>
    19     <div></div>
    20     <div><p>hello!</p></div>
    21   
    22  </body>

    五、可见性选择器

     1 <body>
     2     <script type="text/javascript">
     3         $(function(){
     4             alert($(":hidden").length);//10
     5             //查找div标签中有隐藏属性的元素个数
     6             alert($("div:hidden").length);//1
     7             //查找div标签中所有可见元素的个数
     8             alert($("div:visible").length);//2
     9         });
    10     </script>
    11     <div style="display:none"></div>
    12     <div id="mydiv"></div>
    13     <div></div>
    14   
    15  </body>

    六、属性选择器

     1 <body>
     2      <script type="text/javascript">
     3         $(function(){
     4             //查找input标签中存在id属性的元素个数
     5             alert($("input[id]").length);//3
     6             //差找input标签中value="username"的元素个数
     7             alert($("input[value='username']").length);//2
     8             //查找input标签中value!="username"的元素个数
     9             alert($("input[value!='username']").length);//3
    10             //查找input标签中id属性以n开头的元素个数
    11             alert($("input[id^='n']").length);//1
    12             //查找input标签中id属性以name2结尾的元素个数
    13             alert($("input[id$='name2']").length);//1
    14             //查找input标签中id属性包含user的元素个数
    15             alert($("input[id*='user']").length);//2
    16             //查找input标签中存在id属性,且name属性是lisi的元素个数
    17             alert($("input[id][name='lisi']").length);//1
    18         });
    19      </script>
    20      <input id="username1" name="zhangsan"/><br>
    21      <input id="username2" name="lisi"/><br>
    22      <input id="name3"/><br>
    23      <input value="username"><br>
    24      <input value="username"><br>
    25   
    26  </body>

    七、子元素选择器

     1 <body>
     2     <script type="text/javascript">
     3         $(function(){
     4             //查找每个ul下的第二个li元素
     5             alert($("ul li:nth-child(2)").text());//KarlTanes
     6             //查找每个ul下第一个li元素
     7             alert($("ul li:first-child").text());//JohnGlenGlen
     8             //查找每个ul下最后一个li元素
     9             alert($("ul li:last-child").text());//BrandonRalphGlen
    10             ////查找每个ul下只有一个子元素的li
    11             alert($("ul li:only-child").text());//Glen
    12         })
    13     </script>
    14     <ul>
    15         <li>John</li>
    16         <li>Karl</li>
    17         <li>Brandon</li>
    18     </ul>
    19     <ul>
    20         <li>Glen</li>
    21         <li>Tane</li>
    22         <li>Ralph</li>
    23     </ul>
    24     <ul>
    25         <li>Glen</li>
    26     </ul>
    27   
    28  </body>

    八、表单选择器

     1 <body>
     2     <script type="text/javascript">
     3         $(function(){
     4             //查找所有input,textarea,select和button的元素个数
     5             alert($(":input").length);//13
     6             //查找所有单行文本框的元素个数
     7             alert($(":text").length);//1
     8             //查找所有密码框的元素个数
     9             alert($(":password").length);//1
    10             //查找所有单选按钮的元素个数
    11             alert($(":radio").length);//1
    12             //查找所有复选框的元素个数
    13             alert($(":checkbox").length);//1
    14             //查找所有提交按钮的元素个数
    15             alert($(":submit").length);//2
    16             //查找所有图像域的元素个数
    17             alert($(":image").length);//1
    18             //查找所有重置按钮的元素个数
    19             alert($(":reset").length);//1
    20             //查找所有单行文本框的元素个数
    21             alert($(":text").length);//1
    22             //查找所有按钮的元素个数
    23             alert($(":button").length);//2
    24             //查找所有文件域的元素个数
    25             alert($(":file").length);//1
    26             //查找input标签中所有不可见元素或者type类型是hidden的元素
    27             alert($("input:hidden").length);//2
    28         });
    29     </script>
    30 
    31     1:<input type="text"/><br><br>
    32     2:<input type="password"/><br><br>
    33     3:<input type="radio"/><br><br>
    34     4:<input type="checkbox"/><br><br>
    35     5:<input type="submit" value="提交"/><br><br>
    36     6:<input type="image"/><br><br>
    37     7:<input type="reset" value="重置"/><br><br>
    38     8:<input type="button" value="button"/><br><br>
    39     9:<input type="file" style="display:none"/><br><br>
    40     10:<input type="hidden"/>
    41 
    42     <textarea id="textarea"></textarea><br><br>
    43 
    44     <select>
    45         <option></option>
    46     </select><br><br>
    47 
    48     <button>button</button><br><br>
    49 
    50   
    51  </body>

    九、表单对象属性选择器

     1 <body>
     2     <script type="text/javascript">
     3         $(function(){
     4             //查找所有可用的元素个数
     5             alert($("input:enabled").length);//4
     6             //查找所有不可用的元素个数
     7             alert($("input:disabled").length);//1
     8             //查找input标签中被选中的元素个数
     9             alert($("input:checked").length);//2
    10             //查找所有别选中的option元素个数
    11             alert($("select option:selected").length);//1
    12         })
    13     </script>
    14     <form>
    15         <input name="username" disabled="disabled" ><br>
    16         <input name="username"/><br>
    17         <input type="checkbox" checked="true"><br>
    18         <input type="checkbox"  name="name1" checked="checked"><br>
    19         <input type="checkbox"><br>
    20     </form>
    21     <select>
    22        <option value="1">Flowers</option>
    23        <option value="2" selected="selected">Gardens</option>
    24        <option value="3">Trees</option>
    25     </select>
    26  </body>

    若有错误,欢迎指正

  • 相关阅读:
    ABAP的HTTP_GET和Linux的curl
    SAP CRM点了附件的超链接后报错的处理方式
    一个JSON字符串和文件处理的命令行神器jq,windows和linux都可用
    如何在Ubuntu里安装Helm
    如何实现Windows宿主系统和虚拟机ubuntu系统文件互相访问
    如何安装Virtual Box的VBox Guest Additions扩展程序
    最简单的教程:在Ubuntu操作系统里安装Docker
    在ubuntun虚拟机里安装goLang语言编程环境
    hi35183e增加exfat文件系统的支持
    可以返回执行结果的system函数加强版本
  • 原文地址:https://www.cnblogs.com/xiuxiu123456/p/8656805.html
Copyright © 2020-2023  润新知