（1）基本選擇器
<body> <div id="div1ID">div1</div> <div id="div2ID">div2</div> <span class="myClass">span</span> <p>p</p> <script type="text/javascript"> //1)查找ID為"div1ID"的元素個數 alert($("#div1ID").size());//1 //2)查找DIV元素的個數 alert($("div").length);//2 //3)查找所有樣式是"myClass"的元素的個數 alert($(".myClass").size());//1 //4)查找所有DIV,SPAN,P元素的個數 alert($("DIV,span,p").size());//4 //5)查找所有ID為div1ID,CLASS為myClass,P元素的個數 alert($("#div1ID,.myClass,p").size());//3 </script> </body>
（2）層次選擇器
<body> <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 //2)找到表單form里所有的子級input元素個數 alert( $("form>input").size() );//1 //3)找到表單form同級第一個input元素的value屬性值 alert( $("form+input").val() );//ccccccccc //4)找到所有與表單form同級的input元素個數 alert($("form~input").size());//3 </script> </body>
（3）增強基本選擇器
<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());//list item 1 //2)查找UL中最后個元素的內容 alert($("ul li:last").text());//list item 5 //4)查找表格的索引號為1、3、5...奇數行個數，索引號從0開始 alert($("table tr:odd").size());//3 //5)查找表格的索引號為2、4、6...偶數行個數，索引號從0開始 alert($("table tr:even").size());//3 //6)查找表格中第二行的內容，從索引號0開始，這是一種祖先 后代 的變化形式 //html()：強調的是標簽中的內容，即便標簽中的子標簽，也會顯示出來 //text()：強調的是標簽中的文本內容，即便標簽中的子標簽，也只會顯示出文本內容，不會顯示子標簽 alert($("table tr:eq(1)").text());//line2[1] //7)查找表格中第二第三行...的個數，即索引值是1和2...，也就是比0大 alert($("table tr:gt(0)").size());//5 //8)查找表格中第一第二行的個數，即索引值是0和1，也就是比2小 alert($("table tr:lt(2)").size());//2 //9)給頁面內所有標題<h1><h2><h3>加上紅色背景色，且文字加藍色 $(":header").css("background-color", "red").css("color", "blue"); //10)查找所有[未]選中的input為checkbox的元素個數 alert($(":checkbox:not(:checked)").size());//1 </script> </body>
（4）內容選擇器
<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 //2)查找所有p元素為空的元素個數 alert($("p:empty").size());//2 //3)給所有包含p元素的div元素添加一個myClass樣式 $("div:has(p)").addClass("myClass"); //4)查找所有含有子元素或者文本的p元素個數,即p為父元素 alert($("p:parent").size());//2 </script> </body>
（5）可見性選擇器
<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());//1 //2)查找所有可見的tr元素的個數 alert($("table tr:NOT(:hidden)").size());//2 alert($("table tr:visible").size());//2 提倡 </script> </body>
（6）屬性選擇器
<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" /> <script type="text/javascript"> //1)查找所有含有id屬性的div元素個數 alert($('div[id]').size());//1 //2)查找所有name屬性是newsletter的input元素，並將其選中 $("input[name='newsletter']").attr("checked", "checked"); //3)查找所有name屬性不是newsletter的input元素，並將其選中 $("input[name!='newsletter']").attr("checked", "true"); //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>
（7）子元素選擇器
<body> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> <ul> <li>Marry</li> </ul> <ul> <li>Jack</li> </ul> <script type="text/javascript"> //1)迭代[each]每個ul中第1個li元素中的內容,索引從1開始 $("ul li:first-child").each(function() { alert($(this).text()); }); //2)迭代每個ul中最后1個li元素中的內容,索引從1開始 $("ul li:last-child").each(function() { alert($(this).text()); }); //3)迭代每個ul中第2個li元素中的內容,索引從1開始 $("ul li:nth-child(2)").each(function() { alert($(this).text()); }); //4)在ul中查找是唯一子元素的li元素的內容 $("ul li:only-child").each(function() { alert($(this).text()); }); </script> </body>
（8）表單選擇器
<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());//1 //3)查找所有密碼框的個數 alert($(":password").size());//1 //4)查找所有單選按鈕的個數 alert($(":radio").size());//1 //5)查找所有復選框的個數 alert($(":checkbox").size());//1 //6)查找所有提交按鈕的個數 alert($(":submit").size());//2 //7)匹配所有圖像域的個數 alert($(":image").size());//1 //8)查找所有重置按鈕的個數 alert($(":reset").size());//1 //9)查找所有普通按鈕的個數 alert($(":button").size());//2 //10)查找所有文件域的個數 alert($(":file").size());//1 //11)查找所有input元素為隱藏域的個數 alert($(":input:hidden").size());//1 </script> </body>
（9）表單對象屬性選擇器
<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() );//4 //2)查找所有不可用的input元素的個數 alert( $("input:disabled").size() );//2 //3)查找所有選中的復選框元素的個數 alert( $(":checkbox:checked").size() );//2 //4)查找所有未選中的復選框元素的個數 alert( $(":checkbox:NOT(:checked)").size() );//1 //5)查找所有選中的選項元素的個數 alert( $("select option:selected").size() );//1 alert( $("#provinceID option:NOT(:selected)").size() );//2 </script> </body>