JQ入門學習實戰演練

選擇器是JQuery一大特點，全部的DOM操做、事件操做、Ajax操做都離不開選擇器。熟練掌握JQuery的選擇器，能夠節省不少代碼，很大程序上簡化咱們的腳本編程工做。 
JQuery的選擇器很相似於樣式表的選擇器。 

JQuery選擇器的特色： 
1.簡化代碼編寫 
$("#標記ID")至關於document.getElementById("標記ID")，是經過元素id來獲取元素對象。 
$("標記名稱")至關於document.getElementByTagName("標記名稱")，是經過元素名稱來獲取元素組。 

2.隱式迭代 
$("標記名稱").css("background-color","red"); 
「$("標記名稱")」表明頁面中一組元素； 
$("標記名稱").css("background-color","red")則是爲這組元素中每一個元素的樣式都加上紅色背景。 
JQuery自動迭代每一個元素，這就免去了咱們編寫代碼編歷每一個元素對象的操做了。 

3.無需判斷對象是否存在 
若是頁面上不存在id爲test的DOM 元素，$("#test").css("background-color","red")不會產生任何異常，而document.getElementById("test").style.backgroundColor='red'就會產生未找到對象的異常。 

JQuery選擇器的分類：基本選擇器，層次選擇器，過濾選擇器，表單選擇器 

 

 

 :checked選取全部被選中的元素（radio,checkbox中的checked） 
$("input:checked")：選取全部被選中的元素（單選按鈕和複選框） 

30. :selected選取被選中的選項元素（select中的option=selected） 
$("select :selected")：選取全部被選中的列表項 
如： 
$("select :selected").each(function () { 
str += $(this).text() + ","; 
}); 
編歷每一個選中項，並把項的內容拼接到字符串str中。 

 

 

1. :input選取全部的<input><textarea><select><button>等表單元素 
2. :text選取全部的單行文本框 
3. :password選取密碼框 
4. :radio選取全部的單選按鈕 
5. :checkbox選取全部的複選框 
6. :submit選取全部的提交按鈕 
7. :image選取全部的圖片按鈕 
8. :reset選取全部的重置按鈕 
9. :button按鈕全部的按鈕 
10. :file選取全部的上傳域 
11. :hidden選取全部的不可見元素（前面講過「過濾選擇器-14」） 

 

:[selector1][selector2]...[selectorN]選取同時知足select1至selectorN的元素 
$("div[id][title*=es]")：組合屬性選擇器,首先選取有屬性id的div元素，而後在結果中 選取屬性title值 含有 es 的元素 
$("div[id][title*=es]").css("background","#bbffaa"); 

 

 

 

實例：簡單的一個JQ下拉框的效果

 

 

 

 

 

 

 

參考書籍：《鋒利的JQuery》  （原創：灰灰蟲的家http://hi.baidu.com/grayworm）