一、基本选择器
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>
若有错误，欢迎指正