jQuery快速入門

1、概述

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處理的方式，如更改網頁文本、插入圖像等。

2、模塊劃分

jQuery的模塊能夠分爲三部分：入口模塊、底層支持模塊和功能模塊。

一、入口模塊

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

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

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

二、底層支持模塊

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

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

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

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

三、功能模塊

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

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

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

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

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

DOM操做模塊用於插入、移除、複製和替換DOM元素。

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

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

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

3、jQuery選擇器

選擇器經過標籤名、屬性名或內容對DOM元素進行快速、準確的定位。根據所獲取頁面中元素的不一樣，能夠將選擇器分爲：基本選擇器、層次選擇器、過濾選擇器和表單選擇器。

一、基本選擇器

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

id選擇器：

$('#element-id')

class選擇器：

$('.class-name')

元素選擇器：

$('element-name')

二、層次選擇器

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

根據祖先元素匹配全部後代元素：

$('ancestor descendant')

根據父元素匹配全部的子元素：

$('parent > child')

匹配全部緊接在prev元素後的相鄰元素：

$('prev + next')

匹配prev元素以後的全部兄弟元素：

$('prev ~ siblings')

三、過濾選擇器

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

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')

四、表單選擇器

經過它能夠在頁面中快速定位某表單對象。

獲取全部input、textarea、select等input元素：

$('form:input')

獲取全部單行文本框：

$('form:text')

獲取全部密碼框：

$('form:password')

獲取全部單項按鈕：

$('form:radio')

獲取全部複選框：

$('form:checkbox')

獲取全部提交按鈕：

$('form:submit')

獲取全部圖像域：

$('form:image')

獲取全部重置按鈕：

$('form:reset')

獲取全部按鈕：

$('form:button')

獲取全部文件域：

$('form:file')

4、DOM操做

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

一、元素屬性操做

在jQuery中，能夠對元素屬性進行獲取、設置、刪除等操做。

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

$(selector).attr(name)

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

$(selector).attr(key, value)

設置多個屬性值：

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

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

$(selector).removeAttr(name)

二、元素內容操做

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

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

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

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

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

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

三、元素值操做

在jQuery中，能夠獲取和設置元素的值。

獲取元素的值：

$(selector).val()

設置元素的值：

$(selector).val(value)

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

四、元素樣式操做

在jQuery中，能夠直接設置樣式、增長CSS類別、類別切換、刪除類別等操做。

爲指定name的樣式設置值：

$(selector).css(name, value)

爲元素增長樣式類：

$(selector).addClass(class)

切換不一樣的樣式類：

$(selector).toggleClass(class)

刪除元素的樣式類：

$(selector).removeClass(class)

五、建立節點元素

若是要在頁面中添加某個元素，須要先經過構造函數建立節點元素：

$(html)

六、插入節點元素

按照插入元素的位置區分，能夠分爲內部和外部兩種插入方法。

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)

七、複製節點元素

將某個元素節點複製到另外一個節點以後。

複製匹配的DOM元素而且選中複製成功的元素：

$(selector).clone()

在複製時將該元素的全部行爲也進行復制：

$(selector).clone(true)

八、替換節點元素

將全部選擇的元素替換成指定的HTML或DOM元素：

$(selector).replaceWith(content)

將全部選擇的元素替換成指定selector的元素：

$(selector).replaceAll(selector)

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

九、刪除節點元素

刪除指定的元素：

$(selector).remove()

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

$(selector).detach()

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

$(selector).empty()

十、通用操做

這類操做不須要選擇元素就能夠直接使用。

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

5、事件

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

一、事件機制

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

二、載入事件

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

三、綁定事件

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

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

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

若是在元素中綁定多個事件，能夠將事件用空格隔開。還能夠經過傳入一個映射，對所選對象綁定多個事件處理方法。

四、切換事件

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

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

hover()

能夠依次調用N個指定的方法，直到最後一個方法：

toggle()

五、移除事件

移除元素綁定的事件：

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

六、經常使用事件

.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()       //用戶離開頁面

七、其餘事件

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

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

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

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

6、特效

jQuery能夠很方便地實現不少特效，而且還能夠自定義動畫效果。

一、顯示與隱藏

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

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

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

二、淡入淡出

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

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

還能夠改變元素的透明度到指定的值：

$(selector).fadeTo()

三、上下滾動

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

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

Tips：能夠調用slideToggle()方法來切換展開與捲起狀態。

四、自定義動畫

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

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

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

7、最佳實踐

• 使用最新的版本

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

• 選擇合理的選擇器

  選擇同一個網頁元素，可使用多種選擇器，但每種選擇器的性能倒是不同的。按照性能高低排列：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對象。