一、基本选择器
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);//210 ????????????//找到所有元素的个数11 ????????????alert($("*").length);//1512 ????????????//查找id为"mydiv"和标签为span的元素的个数13 ????????????alert($("#mydiv,span").length)//214 ????????})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);//210 ????????????//查找和form标签同一级别的input标签个数11 ????????????alert($("form~input").length);//112 ????????});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);//110 ????????????//匹配所有索引值为偶数的元素，从0开始计数11 ????????????alert($("li:even").length);//312 ????????????//匹配所有索引值为奇数的元素，从0开始计数13 ????????????alert($("li:odd").length);//214 ????????????//查找索引值为2的元素15 ????????????alert($("li:eq(1)").text());//list item 316 ????????????//匹配所有索引值大于2的元素17 ????????????alert($("li:gt(2)").text());//list item 4list item 518 ????????????//匹配所有索引值小于2的元素19 ????????????alert($("li:lt(2)").text());//list item 1list item 220 ????????????//给所有的如h1,h2,h3之类的标题元素加颜色21 ????????????$(":header").css("color","red")22 ????????????//查找所有复选框的个数23 ????????????alert($(":checkbox").length);//124 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);//110 ????????????//查找所有div标签中含有子元素或者文本的元素个数11 ????????????alert($("div:parent").length);//512 ????????});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);//310 ????????????//查找input标签中id属性以n开头的元素个数11 ????????????alert($("input[id^=‘n‘]").length);//112 ????????????//查找input标签中id属性以name2结尾的元素个数13 ????????????alert($("input[id$=‘name2‘]").length);//114 ????????????//查找input标签中id属性包含user的元素个数15 ????????????alert($("input[id*=‘user‘]").length);//216 ????????????//查找input标签中存在id属性，且name属性是lisi的元素个数17 ????????????alert($("input[id][name=‘lisi‘]").length);//118 ????????});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());//BrandonRalphGlen10 ????????????////查找每个ul下只有一个子元素的li11 ????????????alert($("ul li:only-child").text());//Glen12 ????????})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);//110 ????????????//查找所有单选按钮的元素个数11 ????????????alert($(":radio").length);//112 ????????????//查找所有复选框的元素个数13 ????????????alert($(":checkbox").length);//114 ????????????//查找所有提交按钮的元素个数15 ????????????alert($(":submit").length);//216 ????????????//查找所有图像域的元素个数17 ????????????alert($(":image").length);//118 ????????????//查找所有重置按钮的元素个数19 ????????????alert($(":reset").length);//120 ????????????//查找所有单行文本框的元素个数21 ????????????alert($(":text").length);//122 ????????????//查找所有按钮的元素个数23 ????????????alert($(":button").length);//224 ????????????//查找所有文件域的元素个数25 ????????????alert($(":file").length);//126 ????????????//查找input标签中所有不可见元素或者type类型是hidden的元素27 ????????????alert($("input:hidden").length);//228 ????????});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);//210 ????????????//查找所有别选中的option元素个数11 ????????????alert($("select option:selected").length);//112 ????????})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>若有错误，欢迎指正
jQuery的九类选择器
原文地址：https://www.cnblogs.com/xiuxiu123456/p/8656805.html