jQuery基本選擇器(實例及表單域value的獲取方法)
jQuery基本選擇器包括 CSS選擇器、層級選擇器和、表單域選擇器。
1.CSS選擇器
（1）標(biāo)簽選擇器
$("div") $("p") $("table") 等一系列 HTML 標(biāo)簽
（2）ID選擇器
<input id="user" type="text">
獲取該標(biāo)記的值：$("#user").val();
（3）類選擇器
<input type="text" class="t">
給該文本框添加樣式：$(".t").css("border","2px solid blue");
（4）通用選擇器
$("*").css("color","red"); //給所有元素設(shè)置樣式
（5）群組選擇器
$("div,span,p .styleClass").css("border","1px solid red"); //對所有div、span 及應(yīng)用 styleClass 類的 p 元素設(shè)置邊框?qū)傩?/p>
2.層級選擇器
（1）子元素選擇器
$("parent > child");
查找父元素下面的所有子元素，不包括孫元素等。
（2）后代元素選擇器
$("ancestor descedant");
查找 ancestor 元素的所有子元素、孫元素、重孫元素等。
（3）緊鄰?fù)呍剡x擇器
$("prev+next");
同輩，且緊跟在 prev 元素后面的元素 next 元素
（4）相鄰?fù)呍剡x擇器
$("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");
選擇所有復(fù)選框 (<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>
對于表單域選擇器，上述均為獲取所有某一類型的元素。獲取其中某個元素的值，在下面的實例中體現(xiàn)。該實例的運行效果圖和代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
<title>表單域選擇器應(yīng)用示例</title>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(":text").attr("value","文本框"); //給文本框添加文本
$(":password").attr("value","密碼框"); //給密碼框添加文本
$(":radio:eq(1)").attr("checked","true"); //將第2個單選按鈕設(shè)置為選中
$(":checkbox").attr("checked","true"); //將復(fù)選框全部選中
$(":image").attr("src","wedding.jpg"); //給圖像指定路徑
$(":file").css("width","200px"); //給文件域設(shè)置寬度
$(":hidden").attr("value","已保存的值"); //給隱藏域添加文本
$("select").css("background","#FCF"); //給下拉列表設(shè)置背景色
$(":submit").attr("id","btn1"); //給提交按鈕添加id屬性
$(":reset").attr("name","btn"); //給重置按鈕添加name屬性
$("textarea").attr("value","文本區(qū)域"); //給文本區(qū)域添加文字
});
function submitBtn(){
//下面兩個語句用來獲取復(fù)選框選中的所有值
var checkbox = "";
$(":checkbox[name='hate'][checked]").each(function(){
checkbox += $(this).val() + " ";
});
alert($(":text").val()+"\n"
+$(":password").val()+"\n"
+$(":radio[name='habbit'][checked]").val()+"\n"
+checkbox+"\n"
+$(":file").val()+"\n" //獲得所選文件的絕對路徑
+$(":hidden[name='hiddenarea']").val()+"\n"
+$("select[name='selectlist'] option[selected]").text()+"\n"
+$("textarea").val()+"\n"
);
}
</script>
</head>
<body>
<table width="730" height="145" border="1">
<tr>
<td width="113" height="23">文本框</td>
<td width="209"><input type="text"/></td>
<td width="93">密碼框</td>
<td width="287"><input type="password" /></td>
</tr>
<tr>
<td height="24">單選按鈕</td>
<td>
<input type="radio" name="habbit" value="是"/>是
<input type="radio" name="habbit" value="否"/>否
</td>
<td>復(fù)選框</td>
<td>
<input type="checkbox" name="hate" value="水果"/>水果
<input type="checkbox" name="hate" value="蔬菜"/>蔬菜
</td>
</tr>
<tr>
<td height="50">圖像</td>
<td><input type="image" width="50" height="50"/></td>
<td>文件域</td>
<td><input type="file" /></td>
</tr>
<tr>
<td height="23">隱藏域</td>
<td><input type="hidden" name="hiddenarea"/>（不可見）</td>
<td>下拉列表</td>
<td>
<select name="selectlist">
<option value="選項一">選項一</option>
<option value="選項二" >選項二</option>
<option value="選項三">選項三</option>
</select>
</td>
</tr>
<tr>
<td height="25">提交按鈕</td>
<td><input type="submit" onclick="submitBtn()"/></td>
<td>重置按鈕</td>
<td><input type="reset" /></td>
</tr>
<tr>
<td valign="top">文本區(qū)域：</td>
<td colspan="3"><textarea cols="70" rows="3"></textarea></td>
</tr>
</table>
</body>
</html>
點擊【提交】按鈕之后彈出的對話框如下：
以上這篇jQuery基本選擇器(實例及表單域value的獲取方法)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery藍(lán)色風(fēng)格滑動導(dǎo)航欄代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery藍(lán)色風(fēng)格滑動導(dǎo)航欄特效，實現(xiàn)滑塊跟隨鼠標(biāo)左右滑動，簡單、時尚、大方，有需要的小伙伴可以參考下2015-08-08
這篇文章主要介紹了jQuery插件擴展操作,結(jié)合簡單實例形式分析了jQuery擴展方法的定義與使用技巧,非常簡單易懂,需要的朋友可以參考下2017-01-01
父級以及同級元素的查找在使用過程中還是蠻頻繁的，下面為大家介紹下jQuery是如何實現(xiàn)的，感興趣的朋友可以參考下2013-09-09
jQuery插件EasyUI設(shè)置datagrid的checkbox為禁用狀態(tài)的方法
這篇文章主要介紹了jQuery插件EasyUI設(shè)置datagrid的checkbox為禁用狀態(tài)的方法,涉及jQuery插件EasyUI相關(guān)屬性設(shè)置技巧,需要的朋友可以參考下2016-08-08
jquery中利用navigator.userAgent.indexOf來判斷瀏覽器類型，并進行了一下處理，如果不想使用jquery，稍為修改下代碼就可以為自己所用2011-04-04
這篇文章主要介紹了jQuery源碼解讀之removeClass()方法,以注釋形式較為詳細(xì)的分析了removeClass()方法的實現(xiàn)技巧與使用注意事項,需要的朋友可以參考下2015-02-02
控制圖片的伸縮想必大家都有看到過吧，不過同時控制四張圖片的伸縮卻不是那么的常見吧，接下來為大家詳細(xì)介紹下jQuery同時控制四張圖片的伸縮2013-04-04
jquery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經(jīng)常用到attr()2015-05-05
Chosen 是一個JavaScript插件，它能讓丑陋的、很長的select選擇框變的更好看、更方便,不僅如此，它更擴大了，增長了主動篩選的功能。接下來通過本文給大家分享chosen 三級聯(lián)動功能，一起看看吧2017-03-03
這篇文章主要介紹了JQuery datepicker 用法詳解的相關(guān)資料,需要的朋友可以參考下2015-12-12