jQuery 概述

jQuery是目前使用最廣泛的JavaScript函數庫。據統(tǒng)計，全世界57.5%的網站使用jQuery，在使用JavaScript函數庫的網站中，93.0%使用jQuery。它已經成了開發(fā)者必須學會的技能。

jQuery的最大優(yōu)勢有兩個。首先，它基本是一個DOM操作工具，可以使操作DOM對象變得異常容易。其次，它統(tǒng)一了不同瀏覽器的API接口，使得代碼在所有現代瀏覽器均能運行，開發(fā)者不用擔心瀏覽器之間的差異。

jQuery的加載

一般采用下面的寫法，在網頁中加載jQuery。

<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/cimg/script>
<script>
window.jQuery || document.write('<script src="https://atts.w3cschool.cn/attachments/image/cimg/jquery-1.11.0.min.js" type="text/javascript"><\/script>')
</script>

上面代碼有兩點需要注意。一是采用CDN加載。如果CDN加載失敗，則退回到本地加載。二是采用協議無關的加載網址（使用雙斜線表示），同時支持http協議和https協議。

目前常用的jQuery CDN有以下這些。

• Google CDN
• Microsoft CDN
• jQuery CDN
• CDNJS CDN
• jsDelivr CDN

上面這段代碼最好放到網頁尾部。如果需要支持IE 6/7/8，就使用jQuery 1.x版，否則使用最新版。

jQuery基礎

jQuery對象

jQuery最重要的概念，就是jQuery對象。它是一個全局對象，可以簡寫為美元符號$。也就是說，jQuery和$兩者是等價的。

在網頁中加載jQuery函數庫以后，就可以使用jQuery對象了。jQuery的全部方法，都定義在這個對象上面。

var listItems = jQuery('li');
// or
var listItems = $('li');

上面兩行代碼是等價的，表示選中網頁中所有的li元素。

jQuery構造函數

jQuery對象本質上是一個構造函數，主要作用是返回jQuery對象的實例。比如，上面代碼表面上是選中l(wèi)i元素，實際上是返回對應于li元素的jQuery實例。因為只有這樣，才能在DOM對象上使用jQuery提供的各種方法。

$('body').nodeType
// undefined

$('body') instanceof jQuery
// true

上面代碼表示，由于jQuery返回的不是DOM對象，所以沒有DOM屬性nodeType。它返回的是jQuery對象的實例。

（1）CSS選擇器作為參數

jQuery構造函數的參數，主要是CSS選擇器，就像上面的那個例子。下面是另外一些CSS選擇器的例子。

$("*")
$("#lastname")
$(".intro")
$("h1,div,p")
$("p:last")
$("tr:even")
$("p:first-child")
$("p:nth-of-type(2)")
$("div + p")
$("div:has(p)")
$(":empty")
$("[title^='Tom']")

本書不講解CSS選擇器，請讀者參考有關書籍和jQuery文檔。

（2）DOM對象作為參數

jQuery構造函數的參數，還可以是DOM對象。它也會被轉為jQuery對象的實例。

$(document.body) instanceof jQuery
// true

上面代碼中，jQuery的參數不是CSS選擇器，而是一個DOM對象，返回的依然是jQuery對象的實例。

如果有多個DOM元素要轉為jQuery對象的實例，可以把DOM元素放在一個數組里，輸入jQuery構造函數。

$([document.body, document.head])

（3）HTML代碼作為參數

如果直接在jQuery構造函數中輸入HTML代碼，返回的也是jQuery實例。

$('<li class="greet">test</li>')

上面代碼從HTML代碼生成了一個jQuery實例，它與從CSS選擇器生成的jQuery實例完全一樣。唯一的區(qū)別就是，它對應的DOM結構不屬于當前文檔。

上面代碼也可以寫成下面這樣。

$( '<li>', {
  html: 'test',
  'class': 'greet'
});

上面代碼中，由于class是javaScript的保留字，所以只能放在引號中。

通常來說，上面第二種寫法是更好的寫法。

$('<input class="form-control" type="hidden" name="foo" value="bar" />')

// 相當于
$('<input/>', {
    class: 'form-control',
    type: 'hidden',
    name: 'foo',
    value: 'bar'
})

// 或者
$('<input/>')
.addClass('form-control')
.attr('type', 'hidden')
.attr('name', 'foo')
.val('bar')

（4）第二個參數

默認情況下，jQuery將文檔的根元素（html）作為尋找匹配對象的起點。如果要指定某個網頁元素（比如某個div元素）作為尋找的起點，可以將它放在jQuery函數的第二個參數。

$('li', someElement);

上面代碼表示，只尋找屬于someElement對象下屬的li元素。someElement可以是jQuery對象的實例，也可以是DOM對象。

jQuery構造函數返回的結果集

jQuery的核心思想是“先選中某些網頁元素，然后對其進行某種處理”（find something, do something），也就是說，先選擇后處理，這是jQuery的基本操作模式。所以，絕大多數jQuery操作都是從選擇器開始的，返回一個選中的結果集。

（1）length屬性

jQuery對象返回的結果集是一個類似數組的對象，包含了所有被選中的網頁元素。查看該對象的length屬性，可以知道到底選中了多少個結果。

if ( $('li').length === 0 ) {
    console.log('不含li元素');
}

上面代碼表示，如果網頁沒有l(wèi)i元素，則返回對象的length屬性等于0。這就是測試有沒有選中的標準方法。

所以，如果想知道jQuery有沒有選中相應的元素，不能寫成下面這樣。

if ($('div.foo')) { ... }

因為不管有沒有選中，jQuery構造函數總是返回一個實例對象，而對象的布爾值永遠是true。使用length屬性才是判斷有沒有選中的正確方法。

if ($('div.foo').length) { ... }

（2）下標運算符

jQuery選擇器返回的是一個類似數組的對象。但是，使用下標運算符取出的單個對象，并不是jQuery對象的實例，而是一個DOM對象。

$('li')[0] instanceof jQuery // false
$('li')[0] instanceof Element // true

上面代碼表示，下標運算符取出的是Element節(jié)點的實例。所以，通常使用下標運算符將jQuery實例轉回DOM對象。

（3）is方法

is方法返回一個布爾值，表示選中的結果是否符合某個條件。這個用來驗證的條件，可以是CSS選擇器，也可以是一個函數，或者DOM元素和jQuery實例。

$('li').is('li') // true

$('li').is($('.item')) 

$('li').is(document.querySelector('li'))

$('li').is(function() {
      return $("strong", this).length === 0;
});

（4）get方法

jQuery實例的get方法是下標運算符的另一種寫法。

$('li').get(0) instanceof Element // true

（5）eq方法

如果想要在結果集取出一個jQuery對象的實例，不需要取出DOM對象，則使用eq方法，它的參數是實例在結果集中的位置（從0開始）。

$('li').eq(0) instanceof jQuery // true

由于eq方法返回的是jQuery的實例，所以可以在返回結果上使用jQuery實例對象的方法。

（6）each方法，map方法

這兩個方法用于遍歷結果集，對每一個成員進行某種操作。

each方法接受一個函數作為參數，依次處理集合中的每一個元素。

$('li').each(function( index, element) {
  $(element).prepend( '<em>' + index + ': </em>' );
});

// <li>Hello</li>
// <li>World</li>
// 變?yōu)?// <li><em>0: </em>Hello</li>
// <li><em>1: </em>World</li>

從上面代碼可以看出，作為each方法參數的函數，本身有兩個參數，第一個是當前元素在集合中的位置，第二個是當前元素對應的DOM對象。

map方法的用法與each方法完全一樣，區(qū)別在于each方法沒有返回值，只是對每一個元素執(zhí)行某種操作，而map方法返回一個新的jQuery對象。

$("input").map(function (index, element){
    return $(this).val();
})
.get()
.join(", ")

上面代碼表示，將所有input元素依次取出值，然后通過get方法得到一個包含這些值的數組，最后通過數組的join方法返回一個逗號分割的字符串。

（8）內置循環(huán)

jQuery默認對當前結果集進行循環(huán)處理，所以如果直接使用jQuery內置的某種方法，each和map方法是不必要的。

$(".class").addClass("highlight");

上面代碼會執(zhí)行一個內部循環(huán)，對每一個選中的元素進行addClass操作。由于這個原因，對上面操作加上each方法是不必要的。

$(".class").each(function(index,element){
     $(element).addClass("highlight");
});

// 或者

$(".class").each(function(){
    $(this).addClass("highlight");
});

上面代碼的each方法，都是沒必要使用的。

由于內置循環(huán)的存在，從性能考慮，應該盡量減少不必要的操作步驟。

$(".class").css("color", "green").css("font-size", "16px");

// 應該寫成

$(".class").css({ 
  "color": "green",
  "font-size": "16px"
});

鏈式操作

jQuery最方便的一點就是，它的大部分方法返回的都是jQuery對象，因此可以鏈式操作。也就是說，后一個方法可以緊跟著寫在前一個方法后面。

$('li').click(function (){
    $(this).addClass('clicked');
})
.find('span')
.attr( 'title', 'Hover over me' );

$(document).ready()

$(document).ready方法接受一個函數作為參數，將該參數作為document對象的DOMContentLoaded事件的回調函數。也就是說，當頁面解析完成（即下載完標簽）以后，在所有外部資源（圖片、腳本等）完成加載之前，該函數就會立刻運行。

$( document ).ready(function() {
  console.log( 'ready!' );
});

上面代碼表示，一旦頁面完成解析，就會運行ready方法指定的函數，在控制臺顯示“ready!”。

該方法通常作為網頁初始化手段使用，jQuery提供了一種簡寫法，就是直接把回調函數放在jQuery對象中。

$(function() {
  console.log( 'ready!' );
});

上面代碼與前一段代碼是等價的。

$.noConflict方法

jQuery使用美元符號（$）指代jQuery對象。某些情況下，其他函數庫也會用到美元符號，為了避免沖突，$.noConflict方法允許將美元符號與jQuery脫鉤。

<script src="https://atts.w3cschool.cn/attachments/image/cimg/script>
<script src="jquery.js"></script>
<script>$.noConflict();</script>

上面代碼就是$.noConflict方法的一般用法。在加載jQuery之后，立即調用該方法，會使得美元符號還給前面一個函數庫。這意味著，其后再調用jQuery，只能寫成jQuery.methond的形式，而不能用$.method了。

為了避免沖突，可以考慮從一開始就只使用jQuery代替美元符號。

jQuery實例對象的方法

除了上一節(jié)提到的is、get、eq方法，jQuery實例還有許多其他方法。

結果集的過濾方法

選擇器選出一組符合條件的網頁元素以后，jQuery提供了許多方法，可以過濾結果集，返回更準確的目標。

（1）first方法，last方法

first方法返回結果集的第一個成員，last方法返回結果集的最后一個成員。

$("li").first()

$("li").last()

（2）next方法，prev方法

next方法返回緊鄰的下一個同級元素，prev方法返回緊鄰的上一個同級元素。

$("li").first().next()
$("li").last().prev()

$("li").first().next('.item')
$("li").last().prev('.item')

如果next方法和prev方法帶有參數，表示選擇符合該參數的同級元素。

（3）parent方法，parents方法，children方法

parent方法返回當前元素的父元素，parents方法返回當前元素的所有上級元素（直到html元素）。

$("p").parent()
$("p").parent(".selected")

$("p").parents()
$("p").parents("div")

children方法返回選中元素的所有子元素。

$("div").children()
$("div").children(".selected")

// 下面的寫法結果相同，但是效率較低

$('div > *')
$('div > .selected')

上面這三個方法都接受一個選擇器作為參數。

（4）siblings方法，nextAll方法，prevAll方法

siblings方法返回當前元素的所有同級元素。

$('li').first().siblings()
$('li').first().siblings('.item')

nextAll方法返回當前元素其后的所有同級元素，prevAll方法返回當前元素前面的所有同級元素。

$('li').first().nextAll()
$('li').last().prevAll()

（5）closest方法，find方法

closest方法返回當前元素，以及當前元素的所有上級元素之中，第一個符合條件的元素。find方法返回當前元素的所有符合條件的下級元素。

$('li').closest('div')
$('div').find('li')

上面代碼中的find方法，選中所有div元素下面的li元素，等同于$('li', 'div')。由于這樣寫縮小了搜索范圍，所以要優(yōu)于$('div li')的寫法。

（6）find方法，add方法，addBack方法，end方法

add方法用于為結果集添加元素。

$('li').add('p')

addBack方法將當前元素加回原始的結果集。

$('li').parent().addBack()

end方法用于返回原始的結果集。

$('li').first().end()

（7）filter方法，not方法，has方法

filter方法用于過濾結果集，它可以接受多種類型的參數，只返回與參數一致的結果。

// 返回符合CSS選擇器的結果
$('li').filter('.item')

// 返回函數返回值為true的結果
$("li").filter(function(index) {
    return index % 2 === 1;
})

// 返回符合特定DOM對象的結果
$("li").filter(document.getElementById("unique"))

// 返回符合特定jQuery實例的結果
$("li").filter($("#unique"))

not方法的用法與filter方法完全一致，但是返回相反的結果，即過濾掉匹配項。

$('li').not('.item')

has方法與filter方法作用相同，但是只過濾出子元素符合條件的元素。

$("li").has("ul")

上面代碼返回具有ul子元素的li元素。

DOM相關方法

許多方法可以對DOM元素進行處理。

（1）html方法和text方法

html方法返回該元素包含的HTML代碼，text方法返回該元素包含的文本。

假定網頁只含有一個p元素。

<p><em>Hello World!</em></p>

html方法和text方法的返回結果分別如下。

$('p').html()
// <em>Hello World!</em> 

$('p').text()
// Hello World!

jQuery的許多方法都是取值器（getter）與賦值器（setter）的合一，即取值和賦值都是同一個方法，不使用參數的時候為取值器，使用參數的時候為賦值器。

上面代碼的html方法和text方法都沒有參數，就會當作取值器使用，取回結果集的第一個元素所包含的內容。如果對這兩個方法提供參數，就是當作賦值器使用，修改結果集所有成員的內容，并返回原來的結果集，以便進行鏈式操作。

$('p').html('<strong>你好</strong>')
// 網頁代碼變?yōu)?lt;p><strong>你好</strong></p> 

$('p').text('你好')
// 網頁代碼變?yōu)?lt;p>你好</p>

下面要講到的jQuery其他許多方法，都采用這種同一個方法既是取值器又是賦值器的模式。

html方法和text方法還可以接受一個函數作為參數，函數的返回值就是網頁元素所要包含的新的代碼和文本。這個函數接受兩個參數，第一個是網頁元素在集合中的位置，第二個參數是網頁元素原來的代碼或文本。

$('li').html(function (i, v){
    return (i + ': ' + v);       
})

// <li>Hello</li>
// <li>World</li>
// 變?yōu)?// <li>0: Hello</li>
// <li>1: World</li>

（2）addClass方法，removeClass方法，toggleClass方法

addClass方法用于添加一個類，removeClass方法用于移除一個類，toggleClass方法用于折疊一個類（如果無就添加，如果有就移除）。

$('li').addClass('special')
$('li').removeClass('special')
$('li').toggleClass('special')

（3）css方法

css方法用于改變CSS設置。

該方法可以作為取值器使用。

$('h1').css('fontSize');

css方法的參數是css屬性名。這里需要注意，CSS屬性名的CSS寫法和DOM寫法，兩者都可以接受，比如font-size和fontSize都行。

css方法也可以作為賦值器使用。

$('li').css('padding-left', '20px')
// 或者
$('li').css({
  'padding-left': '20px'
});

上面兩種形式都可以用于賦值，jQuery賦值器基本上都是如此。

（4）val方法

val方法返回結果集第一個元素的值，或者設置當前結果集所有元素的值。

$('input[type="text"]').val()

$('input[type="text"]').val('new value')

（5）prop方法，attr方法

首先，這里要區(qū)分兩種屬性。

一種是網頁元素的屬性，比如a元素的href屬性、img元素的src屬性。這要使用attr方法讀寫。

// 讀取屬性值
$('textarea').attr(name)

//寫入屬性值
$('textarea').attr(name, val)

另一種是DOM元素的屬性，比如tagName、nodeName、nodeType等等。這要使用prop方法讀寫。

// 讀取屬性值
$('textarea').prop(name)

// 寫入屬性值
$('textarea').prop(name, val)

所以，attr方法和prop方法針對的是不同的屬性。在英語中，attr是attribute的縮寫，prop是property的縮寫，中文很難表達出這種差異。有時，attr方法和prop方法對同一個屬性會讀到不一樣的值。比如，網頁上有一個單選框。

<input type="checkbox" checked="checked" />

對于checked屬性，attr方法讀到的是checked，prop方法讀到的是true。

$(input[type=checkbox]).attr("checked") // "checked"

$(input[type=checkbox]).prop("checked") // true

可以看到，attr方法讀取的是網頁上該屬性的值，而prop方法讀取的是DOM元素的該屬性的值，根據規(guī)范，element.checked應該返回一個布爾值。所以，判斷單選框是否選中，要使用prop方法。事實上，不管這個單選框是否選中，attr("checked")的返回值都是checked。

if ($(elem).prop("checked")) { /*... */ };

// 下面兩種方法亦可

if ( elem.checked ) { /*...*/ };
if ( $(elem).is(":checked") ) { /*...*/ };

（6）removeProp方法，removeAttr方法

removeProp方法移除某個DOM屬性，removeAttr方法移除某個HTML屬性。

$("a").prop("oldValue",1234).removeProp('oldValue')
$('a').removeAttr("title")

（7）data方法

data方法用于在一個DOM對象上儲存數據。

// 儲存數據
$("body").data("foo", 52);

// 讀取數據
$("body").data("foo");

該方法可以在DOM節(jié)點上儲存各種類型的數據。

添加、復制和移動網頁元素的方法

jQuery方法提供一系列方法，可以改變元素在文檔中的位置。

（1）append方法，appendTo方法

append方法將參數中的元素插入當前元素的尾部。

$("div").append("<p>World</p>")

// <div>Hello </div>
// 變?yōu)?// <div>Hello <p>World</p></div>

appendTo方法將當前元素插入參數中的元素尾部。

$("<p>World</p>").appendTo("div")

上面代碼返回與前一個例子一樣的結果。

（2）prepend方法，prependTo方法

prepend方法將參數中的元素，變?yōu)楫斍霸氐牡谝粋€子元素。

$("p").prepend("Hello ")

// <p>World</p>
// 變?yōu)?// <p>Hello World</p>

如果prepend方法的參數不是新生成的元素，而是當前頁面已存在的元素，則會產生移動元素的效果。

$("p").prepend("strong")

// <strong>Hello </strong><p>World</p>
// 變?yōu)?// <p><strong>Hello </strong>World</p>

上面代碼運行后，strong元素的位置將發(fā)生移動，而不是克隆一個新的strong元素。不過，如果當前結果集包含多個元素，則除了第一個以后，后面的p元素都將插入一個克隆的strong子元素。

prependTo方法將當前元素變?yōu)閰抵械脑氐牡谝粋€子元素。

$("<p></p>").prependTo("div")

// <div></div>
// 變?yōu)?// <div><p></p></div>

（3）after方法，insertAfter方法

after方法將參數中的元素插在當前元素后面。

$("div").after("<p></p>")

// <div></div>
// 變?yōu)?// <div></div><p></p>

insertAfter方法將當前元素插在參數中的元素后面。

$("<p></p>").insertAfter("div")

上面代碼返回與前一個例子一樣的結果。

（4）before方法，insertBefore方法

before方法將參數中的元素插在當前元素的前面。

$("div").before("<p></p>")

// <div></div>
// 變?yōu)?// <p></p><div></div>

insertBefore方法將當前元素插在參數中的元素的前面。

$("<p></p>").insertBefore("div")

上面代碼返回與前一個例子一樣的結果。

（5）wrap方法，wrapAll方法，unwrap方法，wrapInner方法

wrap方法將參數中的元素變成當前元素的父元素。

$("p").wrap("<div></div>")

// <p></p>
// 變?yōu)?// <div><p></p></div>

wrap方法的參數還可以是一個函數。

$("p").wrap(function() {
  return "<div></div>";
})

上面代碼返回與前一個例子一樣的結果。

wrapAll方法為結果集的所有元素，添加一個共同的父元素。

$("p").wrapAll("<div></div>")

// <p></p><p></p>
// 變?yōu)?// <div><p></p><p></p></div>

unwrap方法移除當前元素的父元素。

$("p").unwrap()

// <div><p></p></div>
// 變?yōu)?// <p></p>

wrapInner方法為當前元素的所有子元素，添加一個父元素。

$("p").wrapInner('<strong></strong>')

// <p>Hello</p>
// 變?yōu)?// <p><strong>Hello</strong></p>

（6）clone方法

clone方法克隆當前元素。

var clones = $('li').clone();

對于那些有id屬性的節(jié)點，clone方法會連id屬性一起克隆。所以，要把克隆的節(jié)點插入文檔的時候，務必要修改或移除id屬性。

（7）remove方法，detach方法，replaceWith方法

remove方法移除并返回一個元素，取消該元素上所有事件的綁定。detach方法也是移除并返回一個元素，但是不取消該元素上所有事件的綁定。

$('p').remove()
$('p').detach()

replaceWith方法用參數中的元素，替換并返回當前元素，取消當前元素的所有事件的綁定。

$('p').replaceWith('<div></div>')

動畫效果方法

jQuery提供一些方法，可以很容易地顯示網頁動畫效果。但是，總體上來說，它們不如CSS動畫強大和節(jié)省資源，所以應該優(yōu)先考慮使用CSS動畫。

如果將jQuery.fx.off設為true，就可以將所有動畫效果關閉，使得網頁元素的各種變化一步到位，沒有中間過渡的動畫效果。

（1）動畫效果的簡便方法

jQuery提供以下一些動畫效果方法。

• show：顯示當前元素。
• hide：隱藏當前元素。
• toggle：顯示或隱藏當前元素。
• fadeIn：將當前元素的不透明度（opacity）逐步提升到100%。
• fadeOut：將當前元素的不透明度逐步降為0%。
• slideDown：以從上向下滑入的方式顯示當前元素。
• slideUp：以從下向上滑出的方式隱藏當前元素。
• slideToggle：以垂直滑入或滑出的方式，折疊顯示當前元素。

上面這些方法可以不帶參數調用，也可以接受毫秒或預定義的關鍵字作為參數。

$('.hidden').show();
$('.hidden').show(300);
$('.hidden').show('slow');

上面三行代碼分別表示，以默認速度、300毫秒、較慢的速度隱藏一個元素。

jQuery預定義的關鍵字是在jQuery.fx.speeds對象上面，可以自行改動這些值，或者創(chuàng)造新的值。

jQuery.fx.speeds.fast = 50;
jQuery.fx.speeds.slow = 3000;
jQuery.fx.speeds.normal = 1000;

上面三行代碼重新定義fast和slow關鍵字對應的毫秒數，并且自定義了normal關鍵字，表示動畫持續(xù)時間為1500毫秒。

你可以定義自己的關鍵字。

jQuery.fx.speeds.blazing = 30;

// 調用
$('.hidden').show('blazing');

這些方法還可以接受一個函數，作為第二個參數，表示動畫結束后的回調函數。

$('p').fadeOut(300, function() {
  $(this).remove();
});

上面代碼表示，p元素以300毫秒的速度淡出，然后調用回調函數，將其從DOM中移除。

（2）animate方法

上面這些動畫效果方法，實際上都是animate方法的簡便寫法。在幕后，jQuery都是統(tǒng)一使用animate方法生成各種動畫效果。

animate方法接受三個參數。

$('div').animate({
    left: '+=50', // 增加50
    opacity: 0.25,
    fontSize: '12px'
  },
  300, // 持續(xù)事件
  function() { // 回調函數
     console.log('done!');
  }
);

上面代碼表示，animate方法的第一個參數是一個對象，表示動畫結束時相關CSS屬性的值，第二個參數是動畫持續(xù)的毫秒數，第三個參數是動畫結束時的回調函數。需要注意的是，第一個參數對象的成員名稱，必須與CSS屬性名稱一致，如果CSS屬性名稱帶有連字號，則需要用“駱駝拼寫法”改寫。

（3）stop方法，delay方法

stop方法表示立即停止執(zhí)行當前的動畫。

$("#stop").click(function() {
  $(".block").stop();
});

上面代碼表示，點擊按鈕后，block元素的動畫效果停止。

delay方法接受一個時間參數，表示暫停多少毫秒后繼續(xù)執(zhí)行。

$("#foo").slideUp(300).delay(800).fadeIn(400)

上面代碼表示，slideUp動畫之后，暫停800毫秒，然后繼續(xù)執(zhí)行fadeIn動畫。

其他方法

jQuery還提供一些供特定元素使用的方法。

serialize方法用于將表單元素的值，轉為url使用的查詢字符串。

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});
// single=Single&multiple=Multiple&check=check2&radio=radio1

serializeArray方法用于將表單元素的值轉為數組。

$("form").submit(function (event){
  console.log($(this).serializeArray());
  event.preventDefault();
});
// [
//     {name : 'field1', value : 123},
//     {name : 'field2', value : 'hello world'}
// ]

事件處理

事件綁定的簡便方法

jQuery提供一系列方法，允許直接為常見事件綁定回調函數。比如，click方法可以為一個元素綁定click事件的回調函數。

$('li').click(function (e){
  console.log($(this).text());
});

上面代碼為li元素綁定click事件的回調函數，點擊后在控制臺顯示li元素包含的文本。

這樣綁定事件的簡便方法有如下一些：

• click
• keydown
• keypress
• keyup
• mouseover
• mouseout
• mouseenter
• mouseleave
• scroll
• focus
• blur
• resize
• hover

如果不帶參數調用這些方法，就是觸發(fā)相應的事件，從而引發(fā)回調函數的運行。

$('li').click()

上面代碼將觸發(fā)click事件的回調函數。

需要注意的是，通過這種方法觸發(fā)回調函數，將不會引發(fā)瀏覽器對該事件的默認行為。比如，對a元素調用click方法，將只觸發(fā)事先綁定的回調函數，而不會導致瀏覽器將頁面導向href屬性指定的網址。

下面是一個捕捉用戶按下escape鍵的函數。

$(document).keyup(function(e) {
  if (e.keyCode == 27) {
    $('body').toggleClass('show-nav');
    // $('body').removeClass('show-nav');
  }
});

上面代碼中，用戶按下escape鍵，jQuery就會為body元素添加/去除名為show-nav的class。

hover方法需要特別說明。它接受兩個回調函數作為參數，分別代表mouseenter和mouseleave事件的回調函數。

$(selector).hover(handlerIn, handlerOut)

// 等同于

$(selector).mouseenter(handlerIn).mouseleave(handlerOut)

on方法，trigger方法，off方法

除了簡便方法，jQuery還提供事件處理的通用方法。

（1）on方法

on方法是jQuery事件綁定的統(tǒng)一接口。事件綁定的那些簡便方法，其實都是on方法的簡寫形式。

on方法接受兩個參數，第一個是事件名稱，第二個是回調函數。

$('li').on('click', function (e){
  console.log($(this).text());
});

上面代碼為li元素綁定click事件的回調函數。

注意，在回調函數內部，this關鍵字指的是發(fā)生該事件的DOM對象。為了使用jQuery提供的方法，必須將DOM對象轉為jQuery對象，因此寫成$(this)。

on方法允許一次為多個事件指定同樣的回調函數。

$('input[type="text"]').on('focus blur', function (){
  console.log('focus or blur');
});

上面代碼為文本框的focus和blur事件綁定同一個回調函數。

on方法還可以為當前元素的某一個子元素，添加回調函數。

$('ul').on('click', 'li', function (e){
  console.log(this);
});

上面代碼為ul的子元素li綁定click事件的回調函數。采用這種寫法時，on方法接受三個參數，子元素選擇器作為第二個參數，夾在事件名稱和回調函數之間。

這種寫法有兩個好處。首先，click事件還是在ul元素上觸發(fā)回調函數，但是會檢查event對象的target屬性是否為li子元素，如果為true，再調用回調函數。這樣就比為li元素一一綁定回調函數，節(jié)省了內存空間。其次，這種綁定的回調函數，對于在綁定后生成的li元素依然有效。

on方法還允許向回調函數傳入數據。

$("ul" ).on("click", {name: "張三"}, function (event){
    console.log(event.data.name);
});

上面代碼在發(fā)生click事件之后，會通過event對象的data屬性，在控制臺打印出所傳入的數據（即“張三”）。

（2）trigger方法

trigger方法用于觸發(fā)回調函數，它的參數就是事件的名稱。

$('li').trigger('click')

上面代碼觸發(fā)li元素的click事件回調函數。與那些簡便方法一樣，trigger方法只觸發(fā)回調函數，而不會引發(fā)瀏覽器的默認行為。

（3）off方法

off方法用于移除事件的回調函數。

$('li').off('click')

上面代碼移除li元素所有的click事件回調函數。

（4）事件的名稱空間

同一個事件有時綁定了多個回調函數，這時如果想移除其中的一個回調函數，可以采用“名稱空間”的方式，即為每一個回調函數指定一個二級事件名，然后再用off方法移除這個二級事件的回調函數。

$('li').on('click.logging', function (){
  console.log('click.logging callback removed');
});

$('li').off('click.logging');

上面代碼為li元素定義了二級事件click.logging的回調函數，click.logging屬于click名稱空間，當發(fā)生click事件時會觸發(fā)該回調函數。將click.logging作為off方法的參數，就會移除這個回調函數，但是對其他click事件的回調函數沒有影響。

trigger方法也適用帶名稱空間的事件。

$('li').trigger('click.logging')

event對象

當回調函數被觸發(fā)后，它們的參數通常是一個事件對象event。

$(document).on('click', function (e){
    // ...
});

上面代碼的回調函數的參數e，就代表事件對象event。

event對象有以下屬性：

• type：事件類型，比如click。
• which：觸發(fā)該事件的鼠標按鈕或鍵盤的鍵。
• target：事件發(fā)生的初始對象。
• data：傳入事件對象的數據。
• pageX：事件發(fā)生時，鼠標位置的水平坐標（相對于頁面左上角）。
• pageY：事件發(fā)生時，鼠標位置的垂直坐標（相對于頁面左上角）。

event對象有以下方法：

• preventDefault：取消瀏覽器默認行為。
• stopPropagation：阻止事件向上層元素傳播。

一次性事件

one方法指定一次性的回調函數，即這個函數只能運行一次。這對提交表單很有用。

$("#button").one( "click", function() { return false; } );

one方法本質上是回調函數運行一次，即解除對事件的監(jiān)聽。

document.getElementById("#button").addEventListener("click", handler);

function handler(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    return false;
}

上面的代碼在點擊一次以后，取消了對click事件的監(jiān)聽。如果有特殊需要，可以設定點擊2次或3次之后取消監(jiān)聽，這都是可以的。

參考鏈接

• Elijah Manor, Do You Know When You Are Looping in jQuery?
• Craig Buckler, How to Create One-Time Events in JavaScript
• jQuery Fundamentals, jQuery Basics
• jQuery Fundamentals, Animating Your Pages with jQuery