jQuery基本選擇器包括 CSS選擇器、層級選擇器和、表單域選擇器。
1.CSS選擇器
（1）標簽選擇器
$("div") $("p") $("table") 等一系列 HTML 標簽
（2）ID選擇器
<input id="user" type="text">
獲取該標記的值：$("#user").val();
（3）類選擇器
<input type="text" class="t">
給該文本框添加樣式：$(".t").css("border","2px solid blue");
（4）通用選擇器
$("*").css("color","red"); //給所有元素設置樣式
（5）群組選擇器
$("div,span,p .styleClass").css("border","1px solid red"); //對所有div、span 及應用 styleClass 類的 p 元素設置邊框屬性
2.層級選擇器
（1）子元素選擇器
$("parent > child");
查找父元素下面的所有子元素，不包括孫元素等。
（2）后代元素選擇器
$("ancestor descedant");
查找 ancestor 元素的所有子元素、孫元素、重孫元素等。
（3）緊鄰同輩元素選擇器
$("prev+next");
同輩，且緊跟在 prev 元素后面的元素 next 元素
（4）相鄰同輩元素選擇器
$("prev~siblings")；
跟在 prev 后且同輩的所有 siblings 元素
3.表單域選擇器
（1） :input 選擇器
$(":input");
選擇所有 input, textarea, select, button 元素。
（2） :text 選擇器
$(":text");
選擇所有單行文本框 (<input type="text"/>).
（3） :password 選擇器
$(":password");
選擇所有密碼框 (<input type="password"/>).
（4） :radio 選擇器
$(":radio");
選擇所有單選按鈕 (<input type="radio"/>).
（5） :checkbox 選擇器
$(":checkbox");
選擇所有復選框 (<input type="checkbox"/>).
（6） :file 選擇器
$(":file");
選擇所有文件域 (<input type="file"/>).
（7） :iamge 選擇器
$(":iamge");
選擇所有圖像域 (<input type="iamge"/>).
（8） :hidden 選擇器
$(":hidden");
選擇所有隱藏域 (<input type="hidden"/>) 及 所有不可見元素（CSS display 屬性值為 none）。
（9） :button 選擇器
$(":button");
選擇所有按鈕 (<input type="button"/>) 和 <button>...</button>
（10） :submit 選擇器
$(":submit");
選擇所有提交按鈕 (<input type="submit"/>) 和 <button>...</button>
（11） :reset 選擇器
$(":reset");
選擇所有重置按鈕 (<input type="reset"/>) 和 <button>...</button>
對於表單域選擇器，上述均為獲取所有某一類型的元素。獲取其中某個元素的值，在下面的實例中體現。該實例的運行效果圖和代碼如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src="../js/jquery-1.7.2.js" type="text/javascript"></script> 6 <title>表單域選擇器應用示例</title> 7 <script language="javascript" type="text/javascript"> 8 $(document).ready(function(){ 9 $(":text").attr("value","文本框"); //給文本框添加文本 10 $(":password").attr("value","密碼框"); //給密碼框添加文本 11 $(":radio:eq(1)").attr("checked","true"); //將第2個單選按鈕設置為選中 12 $(":checkbox").attr("checked","true"); //將復選框全部選中 13 $(":image").attr("src","wedding.jpg"); //給圖像指定路徑 14 $(":file").css("width","200px"); //給文件域設置寬度 15 $(":hidden").attr("value","已保存的值"); //給隱藏域添加文本 16 $("select").css("background","#FCF"); //給下拉列表設置背景色 17 $(":submit").attr("id","btn1"); //給提交按鈕添加id屬性 18 $(":reset").attr("name","btn"); //給重置按鈕添加name屬性 19 $("textarea").attr("value","文本區域"); //給文本區域添加文字 20 }); 21 function submitBtn(){ 22 //下面兩個語句用來獲取復選框選中的所有值 23 var checkbox = ""; 24 $(":checkbox[name='hate'][checked]").each(function(){ 25 checkbox += $(this).val() + " "; 26 }); 27 alert($(":text").val()+"\n" 28 +$(":password").val()+"\n" 29 +$(":radio[name='habbit'][checked]").val()+"\n" 30 +checkbox+"\n" 31 +$(":file").val()+"\n" //獲得所選文件的絕對路徑 32 +$(":hidden[name='hiddenarea']").val()+"\n" 33 +$("select[name='selectlist'] option[selected]").text()+"\n" 34 +$("textarea").val()+"\n" 35 ); 36 } 37 38 </script> 39 </head> 40 41 <body> 42 <table width="730" height="145" border="1"> 43 <tr> 44 <td width="113" height="23">文本框</td> 45 <td width="209"><input type="text"/></td> 46 <td width="93">密碼框</td> 47 <td width="287"><input type="password" /></td> 48 </tr> 49 <tr> 50 <td height="24">單選按鈕</td> 51 <td> 52 <input type="radio" name="habbit" value="是"/>是 53 <input type="radio" name="habbit" value="否"/>否 54 </td> 55 <td>復選框</td> 56 <td> 57 <input type="checkbox" name="hate" value="水果"/>水果 58 <input type="checkbox" name="hate" value="蔬菜"/>蔬菜 59 </td> 60 </tr> 61 <tr> 62 <td height="50">圖像</td> 63 <td><input type="image" width="50" height="50"/></td> 64 <td>文件域</td> 65 <td><input type="file" /></td> 66 </tr> 67 <tr> 68 <td height="23">隱藏域</td> 69 <td><input type="hidden" name="hiddenarea"/>（不可見）</td> 70 <td>下拉列表</td> 71 <td> 72 <select name="selectlist"> 73 <option value="選項一">選項一</option> 74 <option value="選項二" >選項二</option> 75 <option value="選項三">選項三</option> 76 </select> 77 </td> 78 </tr> 79 <tr> 80 <td height="25">提交按鈕</td> 81 <td><input type="submit" onclick="submitBtn()"/></td> 82 <td>重置按鈕</td> 83 <td><input type="reset" /></td> 84 </tr> 85 <tr> 86 <td valign="top">文本區域：</td> 87 <td colspan="3"><textarea cols="70" rows="3"></textarea></td> 88 </tr> 89 </table> 90 91 </body> 92 </html>
點擊【提交】按鈕之后彈出的對話框如下：
