jQuery快速入門

一、概述

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jQuery是一個快速、簡潔、具有豐富特性的JavaScript庫。通過簡單易用的API，兼容各主流瀏覽器，並使得HTML文檔操作、事件處理、動畫、Ajax交互等事情變得更加簡單。

• 快速獲取文檔元素

  jQuery提供了快速查詢DOM文檔中元素的能力，而且強化了JavaScript中獲取頁面元素的方式。

• 漂亮的頁面動態效果

  jQuery中內置了一系列的動畫效果，如淡入淡出、元素移除等動態特效。

• 創建Ajax無刷新網頁

  通過Ajax，可以對頁面進行局部刷新，而不必每次數據更新都需要刷新整個頁面。

• 對JavaScript的增強

  jQuery提供了對基本JavaScript結構的增強，如元素迭代、數組處理等操作。

• 增強的事件處理

  jQuery提供了各種頁面事件，避免在HTML中添加太多的事件處理代碼。

• 更改網頁內容

  jQuery可以修改網頁中的內容，簡化了原本使用JavaScript處理的方式，如更改網頁文本、插入圖像等。

二、模塊划分

jQuery的模塊可以分為三部分：入口模塊、底層支持模塊和功能模塊。

1、入口模塊

在構造jQuery對象模塊中，如果調用構造函數創建jQuery對象時傳入了選擇器表達式，則會調用選擇器引擎遍歷文檔，查找與之匹配的DOM元素，並創建一個包含了這些DOM元素引用的jQuery對象。

var div = $('#div-id');

其中，$()表示構造函數，#div-id表示選擇器，div表示指向id為div-id的DOM元素的jQuery對象。

2、底層支持模塊

回調函數列表模塊用於增強對回調函數的管理，支持添加、移除、觸發、鎖定、禁用等功能。

異步隊列模塊用於解耦異步任務和回調函數，為回調函數增加了狀態，支持傳播任意同步或異步回調函數的狀態。

數據緩存模塊用於為DOM元素和JavaScript對象附加任意類型的數據。

隊列模塊用於管理一組函數，支持函數的入隊和出隊操作，並確保函數按順序執行。

3、功能模塊

事件系統提供了統一的事件綁定、響應、觸發和移除機制，基於數據緩存模塊來管理事件，而不是將事件直接綁定到DOM元素上。

Ajax模塊允許從服務器上加載數據，而不用刷新頁面，基於異步隊列模塊來管理和觸發回調函數。

動畫模塊用於向網頁添加動畫效果，基於隊列模塊來管理和執行動畫函數。

屬性操作模塊用於對HTML屬性和DOM屬性進行讀取、設置和移除操作。

DOM遍歷模塊用於在DOM樹中遍歷父元素、子元素和兄弟元素。

DOM操作模塊用於插入、移除、復制和替換DOM元素。

樣式操作模塊用於獲取計算樣式或設置樣式。

坐標模塊用於讀取或設置DOM元素的文檔坐標。

尺寸模塊用於獲取DOM元素的高度和寬度。

三、jQuery選擇器

選擇器通過標簽名、屬性名或內容對DOM元素進行快速、准確的定位。根據所獲取頁面中元素的不同，可以將選擇器分為：基本選擇器、層次選擇器、過濾選擇器和表單選擇器。

1、基本選擇器

使用最頻繁的選擇器，包括元素ID、Class名、元素名等。

id選擇器：

$('#element-id')

class選擇器：

$('.class-name')

元素選擇器：

$('element-name')

2、層次選擇器

通過DOM元素間的層次關系獲取元素，主要層次關系包括后代、父子、相鄰、兄弟關系等。

根據祖先元素匹配所有后代元素：

$('ancestor descendant')

根據父元素匹配所有的子元素：

$('parent > child')

匹配所有緊接在prev元素后的相鄰元素：

$('prev + next')

匹配prev元素之后的所有兄弟元素：

$('prev ~ siblings')

3、過濾選擇器

過濾選擇器根據某類過濾規則進行元素的匹配，以:開頭。過濾選擇器又分為：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器和表單對象屬性過濾選擇器。

3.1 簡單過濾選擇器

獲取頁面第一個和最后一個X元素：

$('element:first')
$('element:last')

獲取所有索引值為偶數和奇數的元素，索引值從0開始：

$('element:even')
$('element:odd')

獲取等於、大於和小於索引值的元素：

$('element:eq(index)')
$('element:gt(index)')
$('element:lt(index)')

獲取除給定的選擇器外的元素：

$('element:not(selector)')

3.2 內容過濾選擇器

獲取包含給定文本的元素：

$('element:contains(text)')

獲取所有不包含子元素或者文本的空元素：

$('element:empty')

獲取含有選擇器所匹配的元素的元素：

$('element:has(selector)')

獲取含有子元素或文本的元素：

$('element:parent')

3.3 可見性過濾選擇器

獲取所有不可見的元素，或者type為hidden的元素：

$('element:hidden')

獲取所有可見的元素：

$('element:visible')

3.4 屬性過濾選擇器

獲取包含給定屬性的元素：

$('element[attribute]')

獲取屬性是給定值的元素：

$('element[attribute=value]')

獲取屬性不是給定值的元素：

$('element[attribute!=value]')

獲取屬性是以給定值開始的元素：

$('element[attribute^=value]')

獲取屬性是以給定值結束的元素：

$('element[attribute$=value]')

獲取屬性是包含給定值的元素：

$('element[attribute*=value]')

3.5 子元素過濾選擇器

獲取父元素下的第一個、最后一個、唯一一個子元素：

$('parent:first-child')
$('parent:last-child')
$('parent:only-child')

獲取父元素下的特定位置的元素，索引值從1開始：

$('parent:nth-child(eq|even|odd|index)')

3.6 表單對象屬性過濾選擇器

獲取表單中所有屬性為可用的元素：

$('element:enabled')

獲取表單中所有屬性為不可用的元素：

$('element:disabled')

獲取表單中所有被選中的元素：

$('element:checked')

獲取表單中所有被選中option的元素：

$('element:selected')

4、表單選擇器

通過它可以在頁面中快速定位某表單對象。

獲取所有input、textarea、select等input元素：

$('form:input')

獲取所有單行文本框：

$('form:text')

獲取所有密碼框：

$('form:password')

獲取所有單項按鈕：

$('form:radio')

獲取所有復選框：

$('form:checkbox')

獲取所有提交按鈕：

$('form:submit')

獲取所有圖像域：

$('form:image')

獲取所有重置按鈕：

$('form:reset')

獲取所有按鈕：

$('form:button')

獲取所有文件域：

$('form:file')

四、DOM操作

在與頁面中的元素進行交互式的操作中，主要包括對元素屬性、內容、值、CSS等的操作。同時，還有對頁面節點的操作，包括節點元素的創建、插入、復制、替換、刪除等操作。

1、元素屬性操作

在jQuery中，可以對元素屬性進行獲取、設置、刪除等操作。

獲取指定屬性名的元素屬性：

$(selector).attr(name)

設置元素屬性值，key為屬性名稱，value為屬性值：

$(selector).attr(key, value)

設置多個屬性值：

$(selector).attr({keyN:valueN})

刪除指定屬性名的元素屬性：

$(selector).removeAttr(name)

2、元素內容操作

在jQuery中，可以獲取和設置元素的HTML或文本內容。

獲取元素的HTML/文本內容：

$(selector).html()
$(selector).text()

設置元素的HTML/文本內容：

$(selector).html(value)
$(selector).text(value)

兩者的區別是，html()方法僅支持HTML類型的文檔，不支持XML。而text()方法不僅支持HTML類型，也支持XML類型。

3、元素值操作

在jQuery中，可以獲取和設置元素的值。

獲取元素的值：

$(selector).val()

設置元素的值：

$(selector).val(value)

Tips：通過val().join(",")獲取select標簽中的多個選項值。

4、元素樣式操作

在jQuery中，可以直接設置樣式、增加CSS類別、類別切換、刪除類別等操作。

為指定name的樣式設置值：

$(selector).css(name, value)

為元素增加樣式類：

$(selector).addClass(class)

切換不同的樣式類：

$(selector).toggleClass(class)

刪除元素的樣式類：

$(selector).removeClass(class)

5、創建節點元素

如果要在頁面中添加某個元素，需要先通過構造函數創建節點元素：

$(html)

6、插入節點元素

按照插入元素的位置區分，可以分為內部和外部兩種插入方法。

6.1 內部插入節點

向所選擇的元素內部追加/前置內容：

$(selector).append(content)
$(selector).prepend(content)

向所選擇的元素內部追加/前置function方法所返回的內容：

$(selector).append(function())
$(selector).prepend(function())

把所選擇的元素追加/前置到另一個指定的元素集合中：

$(selector).appendTo(content)
$(selector).prependTo(content)

6.2 外部插入節點

向所選擇的元素外部追加/前置內容：

$(selector).after(content)
$(selector).before(content)

向所選擇的元素外部追加/前置function方法所返回的內容：

$(selector).after(function())
$(selector).before(function())

把所選擇的元素追加/前置到另一個指定的元素：

$(selector).insertAfter(content)
$(selector).insertBefore(content)

7、復制節點元素

將某個元素節點復制到另一個節點之后。

復制匹配的DOM元素並且選中復制成功的元素：

$(selector).clone()

在復制時將該元素的所有行為也進行復制：

$(selector).clone(true)

8、替換節點元素

將所有選擇的元素替換成指定的HTML或DOM元素：

$(selector).replaceWith(content)

將所有選擇的元素替換成指定selector的元素：

$(selector).replaceAll(selector)

一旦完成替換，被替換元素中的全部事件將會消失。

9、刪除節點元素

刪除指定的元素：

$(selector).remove()

刪除指定的元素，但保留被移除元素的事件：

$(selector).detach()

清空所選擇的頁面元素的內容，但不移除該元素：

$(selector).empty()

10、通用操作

這類操作不需要選擇元素就可以直接使用。

$.trim() 			//去除字符串兩端的空格。
$.each() 			//遍歷一個數組或對象。
$.inArray()			//返回一個值在數組中的索引位置。如果該值不在數組中，則返回-1。
$.grep() 			//返回數組中符合某種標准的元素。
$.extend()			//將多個對象，合並到第一個對象。
$.makeArray() 		//將對象轉化為數組。
$.type() 			//判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。
$.isArray()			//判斷某個參數是否為數組。
$.isEmptyObject() 	//判斷某個對象是否為空（不含有任何屬性）。
$.isFunction() 		//判斷某個參數是否為函數。
$.isPlainObject() 	//判斷某個參數是否為用"{}"或"new Object"建立的對象。
$.support()			//判斷瀏覽器是否支持某個特性。

五、事件

jQuery可以把事件直接綁定在網頁元素上，使代碼更加簡潔。

1、事件機制

事件在觸發后被分為兩個階段：一個是捕獲capture，一個是冒泡bubbling。為阻止事件的冒泡現象，可以調用stopPropagation()方法或者語句return false;來實現。

2、載入事件

在jQuery腳本加載到頁面時，會設置一個isReady標記，用於監聽頁面加載的進度，當遇到執行ready()方法時，通過查看isReady是否被設置，如果未被設置，說明頁面並未加載完成，將未完成的部分用數組緩存起來，當全部加載完成后，再將未完成的部分通過緩存一一執行。

3、綁定事件

為所選擇的元素綁定事件：

$(selector).bind(type, [data], function)

其中，參數type為一個或多個事件類型的字符串，也可以自定義類型；參數data是作為event.data屬性值傳遞給事件對象的額外數據對象；參數function是綁定到每個選擇元素的事件中的處理方法。

如果在元素中綁定多個事件，可以將事件用空格隔開。還可以通過傳入一個映射，對所選對象綁定多個事件處理方法。

4、切換事件

有兩個以上的事件綁定於一個元素，在元素的行為動作間進行切換。

使元素在鼠標懸停和鼠標移出的事件間進行切換：

hover()

可以依次調用N個指定的方法，直到最后一個方法：

toggle()

5、移除事件

移除元素綁定的事件：

$(selector).unbind([type], [function])

6、常用事件

.blur()			//表單元素失去焦點。
.change()		//表單元素的值發生變化
.click() 		//鼠標單擊
.dblclick()		//鼠標雙擊
.focus() 		//表單元素獲得焦點
.focusin() 		//子元素獲得焦點
.focusout()		//子元素失去焦點
.keydown() 		//按下鍵盤（長時間按鍵，只返回一個事件）
.keypress()		//按下鍵盤（長時間按鍵，將返回多個事件）
.keyup() 		//松開鍵盤
.load()			//元素加載完畢
.mousedown()	//按下鼠標
.mouseenter()	//鼠標進入（進入子元素不觸發）
.mouseleave()	//鼠標離開（離開子元素不觸發）
.mousemove()	//鼠標在元素內部移動
.mouseout()		//鼠標離開（離開子元素也觸發）
.mouseover()	//鼠標進入（進入子元素也觸發）
.mouseup() 		//松開鼠標
.ready() 		//DOM加載完成
.resize() 		//瀏覽器窗口的大小發生改變
.scroll() 		//滾動條的位置發生變化
.select() 		//用戶選中文本框中的內容
.submit() 		//用戶遞交表單
.unload() 		//用戶離開頁面

7、其他事件

為所選的元素綁定一個僅觸發一次的處理方法：

$(selector).one(type, [data], function)

在所選的元素上觸發指定類型的事件：

$(selector).trigger(type, [data])

六、特效

jQuery可以很方便地實現很多特效，並且還可以自定義動畫效果。

1、顯示與隱藏

顯示/隱藏頁面中的元素：

$(selector).show()
$(selector).hide()

Tips：可以調用toggle()方法來切換顯示與隱藏狀態。

2、淡入淡出

改變元素的透明度，實現淡入/淡出的動畫效果：

$(selector).fadeIn()
$(selector).fadeOut()

還可以改變元素的透明度到指定的值：

$(selector).fadeTo()

3、上下滾動

向下展開/向上卷起頁面中的元素：

$(selector).slideDown()
$(selector).slideUp()

Tips：可以調用slideToggle()方法來切換展開與卷起狀態。

4、自定義動畫

復雜的特效可以使用animate()方法進行自定義。

$('div').animate(
  {
    left : "+=50",	 //不斷右移
    opacity : 0.25 	 //指定透明度
  },
  300, 		         // 持續時間
  function() { alert('done!'); } 	//回調函數
);

Tips：可以使用stop()和delay()方法來停止或延遲特效的執行。

七、最佳實踐

• 使用最新的版本

  新版本不止會帶來新功能，還會提升性能。

• 選擇合理的選擇器

  選擇同一個網頁元素，可以使用多種選擇器，但每種選擇器的性能卻是不一樣的。按照性能高低排列：id選擇器和元素標簽選擇器>class選擇器>屬性選擇器。

• 通過父元素選擇子元素

  最佳選擇是使用$parent.find('.child')。由於$parent通常在前面的操作已經生成，jQuery會進行緩存，提高了執行速度。

• 不要過度使用jQuery

  在能夠使用原生的JavaScript的場合，盡量避免使用jQuery。

• 利用緩存

  使用選擇器的次數越少越好，並且盡可能地緩存選中的結果，以便復用。

• 使用鏈式寫法

  因為采用鏈式寫法時jQuery會自動緩存每一步的結果，所以比非鏈式寫法要快很多。

• 事件的委托處理

  將需要多次綁定在子元素上的事件，委托給父元素來處理，減少綁定次數，從而提高性能。

• 盡量少地改動DOM結構

  不要頻繁改動DOM結構，如果要插入多個元素，可以先將其合並，然后再一次性插入。如果要對DOM元素進行大量處理，應該先使用.detach()方法，將元素從DOM中移除，處理完之后再重新插回文檔。在DOM元素上存儲數據時，應該使用$.data()方法。插入html代碼時，原生的innterHTML()方法要比jQuery對象的html()方法更快。

• 合理地使用循環

  如果可以使用復雜的選擇器直接選中元素，就不要使用循環。應該優先使用原生的循環方法。

• 盡量少生成jQuery對象

  每使用一次選擇器，都會生成一個jQuery對象，帶有很多屬性和方法，會占用不少資源。能夠使用jQuery函數的場合，盡量不要使用jQuery對象。

• 選擇作用域鏈最短的方法

  JavaScript的變量采用鏈式作用域，讀取局部變量要比全局變量快很多。在調用對象方法時，closure模式要比prototype模式更快。

• 使用Pub/Sub模式管理事件

  當發生某事件后，如果要連續執行多個操作，可以改用事件觸發的形式。

• DOM對象與jQuery對象轉換

  DOM對象指的是通過傳統的JavaScript方法獲取的DOM元素對象。jQuery對象指的是通過jQuery語法包裝原始的DOM對象后生成的新對象。如果需要使DOM對象與jQuery對象之間的方法互相調用，必須先實現對象之間的類型轉換。不能使用DOM對象調用jQuery對象的方法，也不能使用jQuery對象調用DOM對象的方法。

  調用jQuery中提供的[index]與get(index)方法即可將jQuery對象轉換成DOM對象。DOM對象只要通過jQuery的方法$()進行封裝，就可以轉換成jQuery對象。