廖雪峰的JS教程6-jQuery

jQuery

jQuery是JavaScript世界中使用最廣泛的一個庫。

jQuery這么流行隧甚，肯定是因?yàn)樗鉀Q了一些很重要的問題。實(shí)際上，jQuery能幫我們干這些事情：

  • 消除瀏覽器差異：你不需要自己寫冗長的代碼來針對不同的瀏覽器來綁定事件缆镣，編寫AJAX等代碼；
  • 簡潔的操作DOM的方法：寫$('#test')肯定比document.getElementById('test')來得簡潔试浙；
  • 輕松實(shí)現(xiàn)動畫董瞻、修改CSS等各種操作。

jQuery的理念“Write Less, Do More“田巴，寫更少的代碼钠糊，完成更多的工作！

jQuery有很多版本壹哺。但2.x移除了對古老的IE 6抄伍、7、8的支持管宵，因此2.x的代碼更精簡截珍。選擇哪個版本主要取決于你是否想支持IE 6~8∽牟冢可以從jQuery官網(wǎng)可以下載最新版本笛臣。jQuery只是一個jquery-xxx.js文件，但你會看到有compressed（已壓縮）和uncompressed（未壓縮）兩種版本隧饼，使用時完全一樣沈堡，但如果你想深入研究jQuery源碼，那就用uncompressed版本燕雁。

使用jQuery

使用jQuery只需要在頁面的<head>引入jQuery文件即可：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

如果網(wǎng)站本身已經(jīng)引用了jQuery诞丽，所以你可以直接使用：

'use strict';
console/log('jQuery版本：' + $.fn.jquery);  //查看當(dāng)前jQuery版本

$符號

$是著名的jQuery符號。實(shí)際上拐格，jQuery把所有功能全部封裝在一個全局變量jQuery中僧免，而$也是一個合法的變量名，它是變量jQuery的別名：

$window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'

$本質(zhì)上就是一個函數(shù)捏浊，但是函數(shù)也是對象懂衩，于是$除了可以直接調(diào)用外，也可以有很多其他屬性。

注意浊洞，你看到的$函數(shù)名可能不是jQuery(selector, context)牵敷，因?yàn)楹芏郕avaScript壓縮工具可以對函數(shù)名和參數(shù)改名，所以壓縮過的jQuery源碼$函數(shù)可能變成a(b, c)法希。

絕大多數(shù)時候枷餐，我們都直接用$（因?yàn)閷懫饋砀唵温铮５巧灰啵绻?code>$這個變量不幸地被占用了毛肋，而且還不能改，那我們就只能讓jQuery把$變量交出來屋剑，然后就只能使用jQuery這個變量：

$; //jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)

這種黑魔法的原理是jQuery在占用$之前润匙，先在內(nèi)部保存了原來的$,調(diào)用jQuery.noConflict()時會把原來保存的變量還原凌箕。

選擇器

選擇器是jQuery的核心黄绩。一個選擇器寫出來類似$('#dom-id')。

為什么jQuery要發(fā)明選擇器扔役？回顧一下DOM操作中我們經(jīng)常使用的代碼：

// 按ID查找：
var a = document.getElementById('dom-id');

這些代碼實(shí)在太繁瑣了肄鸽，很多時候，需要遞歸查找所有子節(jié)點(diǎn)油啤。

jQuery的選擇器就是幫助我們快速定位到一個或多個DOM節(jié)點(diǎn)典徘。

按ID查找

如果某個DOM節(jié)點(diǎn)有id屬性，利用jQuery查找如下：

// 查找<div id="abc">:
var div = $('#abc');

注意益咬，#abc以#開頭逮诲。返回的對象是jQuery對象。

什么是jQuery對象幽告？jQuery對象類似數(shù)組梅鹦，它的每個元素都是一個引用了DOM節(jié)點(diǎn)的對象。

以上面的查找為例冗锁，如果id為abc的<div>存在齐唆，返回的jQuery對象如下：

[<div id="abc">...</div>]

如果id為abc的<div>不存在，返回的jQuery對象如下：

[]

總之jQuery的選擇器不會返回undefined或者null冻河，這樣的好處是你不必在下一行判斷if (div === undefined)箍邮。

jQuery對象和DOM對象之間可以互相轉(zhuǎn)化：

var div = $('#abc'); //jQuery對象
var divDom = div.get(0); //假設(shè)存在div，獲取第一個DOM元素
var another = $(divDom); //重新把DOM包裝成jQuery對象

通常情況下你不需要獲取DOM對象叨叙，直接使用jQuery對象更加方便锭弊。如果你拿到了一個DOM對象，那可以簡單地調(diào)用$(aDomObject)把它變成jQuery對象擂错，這樣就可以方便地使用jQuery的API了味滞。

按tag查找

按tag查找只需要寫上tag名稱就可以了：

var ps = $('p'); // 返回所有<p>節(jié)點(diǎn)
ps.length; // 數(shù)一數(shù)頁面有多少個<p>節(jié)點(diǎn)

按class查找

按class查找注意在class名稱前加一個.：

var a = $('.red'); // 所有節(jié)點(diǎn)包含`class="red"`都將返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>

通常很多節(jié)點(diǎn)有多個class，我們可以查找同時包含red和green的節(jié)點(diǎn)：

var a = $('.red.green'); // 注意沒有空格！
// 符合條件的節(jié)點(diǎn)：
// <div class="red green">...</div>
// <div class="blue green red">...</div>

按屬性查找

一個DOM節(jié)點(diǎn)除了id和class外還可以有很多屬性剑鞍，很多時候按屬性查找會非常方便昨凡，比如在一個表單中按屬性來查找：

var email = $('[name=email]'); // 找出<??? name="email">
var passwordInput = $('[type=password]'); // 找出<??? type="password">
var a = $('[items="A B"]'); // 找出<??? items="A B">

當(dāng)屬性的值包含空格等特殊字符時，需要用雙引號括起來攒暇。

按屬性查找還可以使用前綴查找或者后綴查找：

var icons = $('[name^=icon]'); // 找出所有name屬性值以icon開頭的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name屬性值以with結(jié)尾的DOM
// 例如: name="startswith", name="endswith"

這個方法尤其適合通過class屬性查找土匀，且不受class包含多個名稱的影響：

var icons = $('[class^="icon-"]'); // 找出所有class包含至少一個以`icon-`開頭的DOM
// 例如: class="icon-clock", class="abc icon-home"

組合查找

組合查找就是把上述簡單選擇器組合起來使用。如果我們查找$('[name=email]')形用，很可能把表單外的<div name="email">也找出來就轧，但我們只希望查找<input>，就可以這么寫：

var emailInput = $('input[name=email]'); // 不會找出<div name="email">

同樣的田度，根據(jù)tag和class來組合查找也很常見：

var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>

多項(xiàng)選擇器

多項(xiàng)選擇器就是把多個選擇器用,組合起來一塊選：

$('p,div'); // 把<p>和<div>都選出來
$('p.red,p.green'); // 把<p class="red">和<p class="green">都選出來

要注意的是妒御，選出來的元素是按照它們在HTML中出現(xiàn)的順序排列的，而且不會有重復(fù)元素镇饺。例如乎莉，<p class="red green">不會被上面的$('p.red,p.green')選擇兩次。

層級選擇器

除了基本的選擇器外奸笤，jQuery的層級選擇器更加靈活惋啃，也更強(qiáng)大。

因?yàn)镈OM的結(jié)構(gòu)就是層級結(jié)構(gòu)监右，所以我們經(jīng)常要根據(jù)層級關(guān)系進(jìn)行選擇边灭。

層級選擇器（Descendant Selector）

如果兩個DOM元素具有層級關(guān)系，就可以用$('ancestor descendant')來選擇健盒，層級之間用空格隔開绒瘦。例如：

<!-- HTML結(jié)構(gòu) -->
<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>

要選出JavaScript，可以用層級選擇器：

$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); 
//[<li class="lang-javascript">JavaScript</li>]

這種層級選擇器相比單個的選擇器好處在于扣癣，它縮小了選擇范圍惰帽，因?yàn)槭紫纫ㄎ桓腹?jié)點(diǎn)，才能選擇相應(yīng)的子節(jié)點(diǎn)父虑，這樣避免了頁面其他不相關(guān)的元素该酗。

例如：

$('form[name=upload] input');

就把選擇范圍限定在name屬性為upload的表單里。如果頁面有很多表單频轿，其他表單的<input>不會被選擇垂涯。

多層選擇也是允許的：

$('form.test p input'); // 在form表單選擇被<p>包含的<input>

子選擇器（Child Selector）

子選擇器$('parent>child')類似層級選擇器，但是限定了層級關(guān)系必須是父子關(guān)系航邢，就是<child>節(jié)點(diǎn)必須是<parent>節(jié)點(diǎn)的直屬子節(jié)點(diǎn)耕赘。還是以上面的例子：

$('ul.lang>li.lang-javascript'); 
//可以選出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 無法選出，因?yàn)?lt;div>和<li>不構(gòu)成父子關(guān)系

過濾器（Filter）

過濾器一般不單獨(dú)使用膳殷，它通常附加在選擇器上操骡，幫助我們更精確地定位元素九火。觀察過濾器的效果：

$('ul.lang li'); //選出JavaScript、Python和Lua 3個節(jié)點(diǎn)

$('ul.lang li:first-child'); // 僅選出JavaScript
$('ul.lang li:last-child'); // 僅選出Lua
$('ul.lang li:nth-child(2)'); // 選出第N個元素册招，N從1開始
$('ul.lang li:nth-child(even)'); // 選出序號為偶數(shù)的元素
$('ul.lang li:nth-child(odd)'); // 選出序號為奇數(shù)的元素

表單相關(guān)

針對表單元素岔激，jQuery還有一組特殊的選擇器：

  • :input：可以選擇<input>，<textarea>是掰，<select>和<button>虑鼎；
  • :file：可以選擇<input type="file">，和input[type=file]一樣键痛；
  • :checkbox：可以選擇復(fù)選框炫彩，和input[type=checkbox]一樣；
  • :radio：可以選擇單選框絮短，和input[type=radio]一樣江兢；
  • :focus：可以選擇當(dāng)前輸入焦點(diǎn)的元素，例如把光標(biāo)放到一個<input>上丁频，用$('input:focus')就可以選出杉允；
  • :checked：選擇當(dāng)前勾上的單選框和復(fù)選框，用這個選擇器可以立刻獲得用戶選擇的項(xiàng)目席里，如$('input[type=radio]:checked')叔磷；
  • :enabled：可以選擇可以正常輸入的<input>、<select> 等奖磁，也就是沒有灰掉的輸入世澜；
  • :disabled：和:enabled正好相反，選擇那些不能輸入的署穗。

此外，jQuery還有很多有用的選擇器嵌洼，例如案疲，選出可見的或隱藏的元素：

$('div:visible'); // 所有可見的div
$('div:hidden'); // 所有隱藏的div

查找和過濾

通常情況下選擇器可以直接定位到我們想要的元素，但是麻养，當(dāng)我們拿到一個jQuery對象后褐啡，還可以以這個對象為基準(zhǔn)，進(jìn)行查找和過濾鳖昌。

最常見的查找是在某個節(jié)點(diǎn)的所有子節(jié)點(diǎn)中查找备畦，使用find()方法，它本身又接收一個任意的選擇器许昨。例如如下的HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) -->
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

用find()查找：

var ul = $('ul.lang'); // 獲得<ul>
var dy = ul.find('.dy'); // 獲得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 獲得Swift
var hsk = ul.find('[name=haskell]'); // 獲得Haskell

如果要從當(dāng)前節(jié)點(diǎn)開始向上查找懂盐，使用parent()方法：

var swf = $('#swift'); //獲得Swift
var parent = swf.parent(); //獲得Swift的上層節(jié)點(diǎn)<ul>
var a = swf.parent('.red'); 
//獲得Swift的上層節(jié)點(diǎn)<ul>，同時傳入過濾條件糕档。如果ul不符合條件莉恼，返回空jQuery對象

對于位于同一層級的節(jié)點(diǎn)，可以通過next()和prev()方法，例如：

當(dāng)我們已經(jīng)拿到Swift節(jié)點(diǎn)后：

var swift = $('#swift');
swift.next(); //Scheme
swift.next('[name=haskell]');// 空的jQuery對象俐银，因?yàn)镾wift的下一個元素Scheme不符合條件[name=haskell]
swift.prev(); //Python
swift.prev('.dy'); //Python尿背，因?yàn)镻ython同時符合過濾器條件.dy

過濾

和函數(shù)式編程的map、filter類似捶惜，jQuery對象也有類似的方法田藐。

filter()方法可以過濾掉不符合選擇器條件的節(jié)點(diǎn)：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

或者傳入一個函數(shù)，要特別注意函數(shù)內(nèi)部的this被綁定為DOM對象吱七，不是jQuery對象：

var langs = $('ul.lang li');// 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innHTML.indexOf('S') === 0;//返回S開頭的節(jié)點(diǎn)
}); //拿到Swift汽久，Scheme

map()方法把一個jQuery對象包含的若干DOM節(jié)點(diǎn)轉(zhuǎn)化為其他對象：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
    return this.innerHtml;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

此外，一個jQuery對象如果包含了不止一個DOM節(jié)點(diǎn)陪捷，first()回窘、last()和slice()方法可以返回一個新的jQuery對象，把不需要的DOM節(jié)點(diǎn)去掉：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first();

練習(xí)

對于下面的表單：

<form id="test-form" action="#0" onsubmit="return false;">
    <p><label>Name: <input name="name"></label></p>
    <p><label>Email: <input name="email"></label></p>
    <p><label>Password: <input name="password" type="password"></label></p>
    <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
    <p><label>City: <select name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="CD">Chengdu</option>
        <option value="XM">Xiamen</option>
    </select></label></p>
    <p><button type="submit">Submit</button></p>
</form>

輸入值后市袖，用jQuery獲取表單的JSON字符串啡直，key和value分別對應(yīng)每個輸入的name和相應(yīng)的value，例如：{"name":"Michael","email":...}

'use strict'; 
var json = null;

//答案1
var input = $('#test-form [name]');
var json = {};
for (var i = 0; i < input.length; i++) {
    if (input[i].name === 'gender') {
        if (!input[i].checked) continue;
    };
    json[input[i].name] = input[i].value;

};
json = JSON.stringify(json);
//答案2
var input = $('#test-form [name]');
for (var i = 0; i < input.length; i++) {
    if (input[i].name === 'gender') {
        if (!input[i].checked) continue;
    }
    json += ('"' + input[i].name + '":"' + input[i].value + '"');
    if (i !== input.length - 1) json += ','
}
json += '}';

操作DOM

jQuery的選擇器很強(qiáng)大酒觅，用起來又簡單又靈活，但是搞了這么久症概，拿到了jQuery對象语盈，下一步當(dāng)然是操作對應(yīng)的DOM節(jié)點(diǎn)啦！

回顧一下修改DOM的CSS红省、文本呻率、設(shè)置HTML有多么麻煩需频，而且有的瀏覽器只有innerHTML，有的瀏覽器支持innerText筷凤，有了jQuery對象，不需要考慮瀏覽器差異了苞七，全部統(tǒng)一操作藐守！

修改Text和HTML

jQuery對象的text()和html()方法分別獲取節(jié)點(diǎn)的文本和原始HTML文本，例如蹂风，如下的HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>

分別獲取文本和HTML：

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'

如何設(shè)置文本或HTML卢厂？jQuery的API設(shè)計(jì)非常巧妙：無參數(shù)調(diào)用text()是獲取文本，傳入?yún)?shù)就變成設(shè)置文本惠啄，HTML也是類似操作：

'use strict';
var j1 = $('#test-ul li.js');
var j2 = $('#test-ul li[name=book]');

一個jQuery對象可以包含0個或任意個DOM對象慎恒，它的方法實(shí)際上會作用在對應(yīng)的每個DOM節(jié)點(diǎn)上任内。在上面的例子中試試：

$('#test-ul li').text('JS'); // 是不是兩個節(jié)點(diǎn)都變成了JS？

所以jQuery對象的另一個好處是我們可以執(zhí)行一個操作融柬，作用在對應(yīng)的一組DOM節(jié)點(diǎn)上死嗦。即使選擇器沒有返回任何DOM節(jié)點(diǎn)，調(diào)用jQuery對象的方法仍然不會報錯：

// 如果不存在id為not-exist的節(jié)點(diǎn)：
$('#not-exist').text('Hello'); // 代碼不報錯粒氧，沒有節(jié)點(diǎn)被設(shè)置為'Hello'

這意味著jQuery幫你免去了許多if語句越除。

修改CSS

jQuery對象有“批量操作”的特點(diǎn)，這用于修改CSS實(shí)在是太方便了外盯≌瑁考慮下面的HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) -->
<ul id="test-css">
    <li class="lang dy"><span>JavaScript</span></li>
    <li class="lang"><span>Java</span></li>
    <li class="lang dy"><span>Python</span></li>
    <li class="lang"><span>Swift</span></li>
    <li class="lang dy"><span>Scheme</span></li>
</ul>

要高亮顯示動態(tài)語言，調(diào)用jQuery對象的css('name', 'value')方法饱苟，我們用一行語句實(shí)現(xiàn)：

'use strict';
$('#test-css li.dy>span').css('background-color', '#ffd351');

注意孩擂，jQuery對象的所有方法都返回一個jQuery對象（可能是新的也可能是自身），這樣我們可以進(jìn)行鏈?zhǔn)秸{(diào)用箱熬，非常方便类垦。

jQuery對象的css()方法可以這么用：

var div = $('#test-div');
div.css('color'); //'#000033', 獲取CSS屬性
div.css('color', '#336699'); // 設(shè)置CSS屬性
div.css('color', ''); // 清除CSS屬性

為了和JavaScript保持一致，CSS屬性可以用'background-color'和'backgroundColor'兩種格式坦弟。

css()方法將作用于DOM節(jié)點(diǎn)的style屬性护锤，具有最高優(yōu)先級。如果要修改class屬性酿傍，可以用jQuery提供的下列方法：

var div = $('#test-div');
div.hasClass('highlight'); // false烙懦， class是否包含highlight
div.addClass('highlight'); // 添加highlight這個class
div.removeClass('highlight'); // 刪除highlight這個class

練習(xí)：分別用css()方法和addClass()方法高亮顯示JavaScript：

<!-- HTML結(jié)構(gòu) -->
<style>
.highlight {
    color: #dd1144;
    background-color: #ffd351;
}
</style>

<div id="test-highlight-css">
    <ul>
        <li class="py"><span>Python</span></li>
        <li class="js"><span>JavaScript</span></li>
        <li class="sw"><span>Swift</span></li>
        <li class="hk"><span>Haskell</span></li>
    </ul>
</div>

'use strict';
//TODO
var div = $('#test-highlight-css');
var js = div.find('.js');
js.css('color','#dd1144').css('background-color','#ffd351');

顯示和隱藏DOM

要隱藏一個DOM，我們可以設(shè)置CSS的display屬性為none赤炒，利用css()方法就可以實(shí)現(xiàn)氯析。不過，要顯示這個DOM就需要恢復(fù)原有的display屬性莺褒，這就得先記下來原有的display屬性到底是block還是inline還是別的值掩缓。

考慮到顯示和隱藏DOM元素使用非常普遍，jQuery直接提供show()和hide()方法遵岩，我們不用關(guān)心它是如何修改display屬性的你辣，總之它能正常工作：

var a = $('a[target=_blank]');
a.hide(); //隱藏
a.show(); //顯示

注意，隱藏DOM節(jié)點(diǎn)并未改變DOM樹的結(jié)構(gòu)尘执，它只影響DOM節(jié)點(diǎn)的顯示舍哄。這和刪除DOM節(jié)點(diǎn)是不同的。

獲取DOM信息

//瀏覽器可視窗口大小:
$(window).width(); //800
$(window).height(); //600
//HTML文檔大小
$(document).width(); //800
$(document).height(); //3500
//某個div的大小
var div = $('#test-div');
div.width(); //600
div.heigth(); //300
div.width(400);  // 設(shè)置CSS屬性 width: 400px誊锭，是否生效要看CSS是否有效
div.height('200px'); // 設(shè)置CSS屬性 height: 200px表悬，是否生效要看CSS是否有效

attr()和removeAttr()方法用于操作DOM節(jié)點(diǎn)的屬性：

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 屬性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name屬性變?yōu)?Hello'
div.removeAttr('name'); // 刪除name屬性
div.attr('name'); // undefined

prop()方法和attr()類似，但是HTML5規(guī)定有一種屬性在DOM節(jié)點(diǎn)中可以沒有值丧靡，只有出現(xiàn)與不出現(xiàn)兩種蟆沫，例如：

<input id="test-radio" type="radio" name="test" checked value="1">

等價于：

<input id="test-radio" type="radio" name="test" checked="checked" value="1">

attr()和prop()對于屬性checked處理有所不同：

var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

prop()返回值更合理一些籽暇。不過，用is()方法判斷更好：

var radio = $('#test-radio');
radio.is(':checked'); // true

類似的屬性還有selected饭庞，處理時最好用is(':selected')戒悠。

操作表單

對于表單元素，jQuery對象統(tǒng)一提供val()方法獲取和設(shè)置對應(yīng)的value屬性：

/*
    <input id="test-input" name="email" value="">
    <select id="test-select" name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="SZ">Shenzhen</option>
    </select>
    <textarea id="test-textarea">Hello</textarea>
*/
var
    input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');

input.val(); // 'test'
input.val('abc@example.com'); // 文本框的內(nèi)容已變?yōu)閍bc@example.com

select.val(); // 'BJ'
select.val('SH'); // 選擇框已變?yōu)镾hanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本區(qū)域已更新為'Hi'

可見但绕，一個val()就統(tǒng)一了各種輸入框的取值和賦值的問題救崔。

修改DOM結(jié)構(gòu)

直接使用瀏覽器提供的API對DOM結(jié)構(gòu)進(jìn)行修改，不但代碼復(fù)雜，而且要針對瀏覽器寫不同的代碼。

有了jQuery充择，我們就專注于操作jQuery對象本身，底層的DOM操作由jQuery完成就可以了劫窒，這樣一來，修改DOM也大大簡化了拆座。

添加DOM

要添加新的DOM節(jié)點(diǎn)主巍，除了通過jQuery的html()這種暴力方法外，還可以用append()方法挪凑，例如：

<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>

如何向列表新增一個語言孕索？首先要拿到<ul>節(jié)點(diǎn)：

var ul = $('#test-div>ul');

然后，調(diào)用append()傳入HTML片段：

ul.append('<li><span>Haskell</span></li>');

除了接受字符串躏碳，append()還可以傳入原始的DOM對象搞旭，jQuery對象和函數(shù)對象：

// 創(chuàng)建DOM對象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM對象:
ul.append(ps);

// 添加jQuery對象:
ul.append($('#scheme'));

// 添加函數(shù)對象:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

傳入函數(shù)時，要求返回一個字符串菇绵、DOM對象或者jQuery對象肄渗。因?yàn)閖Query的append()可能作用于一組DOM節(jié)點(diǎn)，只有傳入函數(shù)才能針對每個DOM生成不同的子節(jié)點(diǎn)咬最。

append()把DOM添加到最后翎嫡，prepend()則把DOM添加到最前。

另外注意永乌，如果要添加的DOM節(jié)點(diǎn)已經(jīng)存在于HTML文檔中惑申，它會首先從文檔移除，然后再添加翅雏，也就是說圈驼，用append()，你可以移動一個DOM節(jié)點(diǎn)枚荣。

如果要把新節(jié)點(diǎn)插入到指定位置，例如啼肩，JavaScript和Python之間橄妆，那么衙伶，可以先定位到JavaScript，然后用after()方法：

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

也就是說害碾，同級節(jié)點(diǎn)可以用after()或者before()方法矢劲。

刪除節(jié)點(diǎn)

要刪除DOM節(jié)點(diǎn)，拿到j(luò)Query對象后直接調(diào)用remove()方法就可以了慌随。如果jQuery對象包含若干DOM節(jié)點(diǎn)芬沉，實(shí)際上可以一次刪除多個DOM節(jié)點(diǎn)：

var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被刪除

練習(xí)

修改DOM結(jié)構(gòu)

閱讀: 31717

直接使用瀏覽器提供的API對DOM結(jié)構(gòu)進(jìn)行修改，不但代碼復(fù)雜阁猜，而且要針對瀏覽器寫不同的代碼丸逸。

有了jQuery，我們就專注于操作jQuery對象本身剃袍，底層的DOM操作由jQuery完成就可以了黄刚，這樣一來，修改DOM也大大簡化了民效。

添加DOM

要添加新的DOM節(jié)點(diǎn)憔维，除了通過jQuery的html()這種暴力方法外，還可以用append()方法畏邢，例如：

<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>

如何向列表新增一個語言业扒？首先要拿到<ul>節(jié)點(diǎn)：

var ul = $('#test-div>ul');

然后，調(diào)用append()傳入HTML片段：

ul.append('<li><span>Haskell</span></li>');

除了接受字符串舒萎，append()還可以傳入原始的DOM對象程储，jQuery對象和函數(shù)對象：

// 創(chuàng)建DOM對象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM對象:
ul.append(ps);

// 添加jQuery對象:
ul.append($('#scheme'));

// 添加函數(shù)對象:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

傳入函數(shù)時，要求返回一個字符串逆甜、DOM對象或者jQuery對象虱肄。因?yàn)閖Query的append()可能作用于一組DOM節(jié)點(diǎn)，只有傳入函數(shù)才能針對每個DOM生成不同的子節(jié)點(diǎn)交煞。

append()把DOM添加到最后咏窿，prepend()則把DOM添加到最前。

另外注意素征，如果要添加的DOM節(jié)點(diǎn)已經(jīng)存在于HTML文檔中集嵌，它會首先從文檔移除，然后再添加御毅，也就是說根欧，用append()，你可以移動一個DOM節(jié)點(diǎn)端蛆。

如果要把新節(jié)點(diǎn)插入到指定位置凤粗，例如，JavaScript和Python之間今豆，那么嫌拣，可以先定位到JavaScript柔袁，然后用after()方法：

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

也就是說，同級節(jié)點(diǎn)可以用after()或者before()方法异逐。

刪除節(jié)點(diǎn)

要刪除DOM節(jié)點(diǎn)捶索，拿到j(luò)Query對象后直接調(diào)用remove()方法就可以了。如果jQuery對象包含若干DOM節(jié)點(diǎn)灰瞻，實(shí)際上可以一次刪除多個DOM節(jié)點(diǎn)：

var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被刪除

練習(xí)

除了列出的3種語言外腥例，請?jiān)偬砑覲ascal、Lua和Ruby酝润，然后按字母順序排序節(jié)點(diǎn)：

<!-- HTML結(jié)構(gòu) -->
<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>

//答案1
var ul = $('#test-div>ul');
var lan = ['Pascal', 'Lua', 'Ruby'];
//獲取原來的內(nèi)容
var n = ul.find('span').map(function () {
    return $(this).text(); //$(this)轉(zhuǎn)成jQuery對象
}).get();
//把原來的內(nèi)容和新內(nèi)容結(jié)合起來燎竖，然后排序
lan = lan.concat(n).sort();
//加入html標(biāo)簽，轉(zhuǎn)化成字符串
var strlan = lan.map(function (a) {
    return '<li><span>' + a + '</span></li>';
}).join('');
//更改ul的結(jié)構(gòu)
ul.html(strlan);

//答案2
var ul = $('#test-div>ul');
var arr = ['Pascal', 'Lua', 'Ruby'];

ul.find('span').map(function (item) {
    arr.push($(this).text());
});

arr.sort();
ul.find('li').remove(); //一開始寫成ul.remove()袍祖，結(jié)果無法append底瓣，沒有任何顯示，因?yàn)閞emove把<ul>也刪了導(dǎo)致添加了<li>無法顯示
arr.map(function (e) {
    ul.append('<li><span>' + e + '</li></span>');
});

事件

因?yàn)镴avaScript在瀏覽器中以單線程模式運(yùn)行蕉陋，頁面加載后捐凭，一旦頁面上所有的JavaScript代碼被執(zhí)行完后，就只能依賴觸發(fā)事件來執(zhí)行JavaScript代碼凳鬓。

瀏覽器在接收到用戶的鼠標(biāo)或鍵盤輸入后茁肠，會自動在對應(yīng)的DOM節(jié)點(diǎn)上觸發(fā)相應(yīng)的事件。如果該節(jié)點(diǎn)已經(jīng)綁定了對應(yīng)的JavaScript處理函數(shù)缩举，該函數(shù)就會自動調(diào)用垦梆。

由于不同的瀏覽器綁定事件的代碼都不太一樣，所以用jQuery來寫代碼仅孩，就屏蔽了不同瀏覽器的差異托猩，我們總是編寫相同的代碼。

舉個例子辽慕，假設(shè)要在用戶點(diǎn)擊了超鏈接時彈出提示框京腥，我們用jQuery這樣綁定一個click事件：

/* HTML:
 *
 * <a id="test-link" href="#0">點(diǎn)我試試</a>
 *
 */
 //獲取超鏈接的jQuery對象
 var a = $('#test-link');
a.on('click', function () {
    alert('Hello!');
});

on方法用來綁定一個事件，我們需要傳入事件名稱和對應(yīng)的處理函數(shù)溅蛉。

另一種更簡化的寫法是直接調(diào)用click()方法：

a.click(function () {
    alert('Hello!');
});

兩者完全等價公浪。我們通常用后面的寫法。

jQuery能夠綁定的事件主要包括：

鼠標(biāo)事件

click：鼠標(biāo)單擊時觸發(fā)船侧；

dbclick：鼠標(biāo)雙擊時觸發(fā)

mouseenter：鼠標(biāo)進(jìn)入時觸發(fā)

mouseleave：鼠標(biāo)移出時觸發(fā)

mousemove：鼠標(biāo)在DOM內(nèi)部移動時觸發(fā)欠气；

hover：鼠標(biāo)進(jìn)入和退出時觸發(fā)兩個函數(shù)，相當(dāng)于mouseenter加上mouseleave镜撩。

鍵盤事件

鍵盤事件僅作用在當(dāng)前焦點(diǎn)的DOM上预柒，通常是<input>和<textarea>。

keydown：鍵盤按下時觸發(fā)

keyup：鍵盤松開時觸發(fā)

keypress：按一次鍵后觸發(fā)

其他事件

focus：當(dāng)DOM獲得焦點(diǎn)時觸發(fā)

blur：當(dāng)DOM獲得焦點(diǎn)時觸發(fā)

change：當(dāng)<input>、<select>或<textarea>的內(nèi)容改變時觸發(fā)宜鸯；

submit：當(dāng)<form>提交時觸發(fā)

ready：當(dāng)頁面被載入并且DOM樹完成初始化后觸發(fā)

其中人灼，ready僅作用于document對象。由于ready事件在DOM完成初始化后觸發(fā)顾翼，且只觸發(fā)一次，所以非常適合用來寫其他的初始化代碼奈泪。假設(shè)我們想給一個<form>表單綁定submit事件适贸，下面的代碼沒有預(yù)期的效果：

<html>
<head>
    <script>
        // 代碼有誤:
        $('#testForm).on('submit', function () {
            alert('submit!');
        });
    </script>
</head>
<body>
    <form id="testForm">
        ...
    </form>
</body>

因?yàn)镴avaScript在此執(zhí)行的時候，<form>尚未載入瀏覽器涝桅，所以$('#testForm)返回[]拜姿，并沒有綁定事件到任何DOM上。

所以我們自己的初始化代碼必須放到document對象的ready事件中冯遂，保證DOM已完成初始化：

<html>
<head>
    <script>
        $(document).on('ready', function () {
            $('#testForm).on('submit', function () {
                alert('submit!');
            });
        });
    </script>
</head>
<body>
    <form id="testForm">
        ...
    </form>
</body>

這樣寫就沒有問題了蕊肥。因?yàn)橄嚓P(guān)代碼會在DOM樹初始化后再執(zhí)行。

由于ready事件使用非常普遍蛤肌，所以可以這樣簡化：

$(document).ready(function () {
    //on('submit', function)也可以這么簡化
    $('#testForm').submit(function () {
        alert('submit!');
    });
});

甚至還可以簡化：

$(function () {
    //init...
});

上面的這種寫法最為常見壁却。如果你遇到$(function () {...})的形式，牢記這是document對象的ready事件處理函數(shù)裸准。

完全可以反復(fù)綁定事件處理函數(shù)展东，它們會依次執(zhí)行：

$(function () {
    console.log('init A...');
});
$(function () {
    console.log('init B...');
});

事件參數(shù)

有些事件，如mousemove和keypress炒俱，我們需要獲取鼠標(biāo)位置和按鍵的值盐肃，否則監(jiān)聽這些事件就沒什么意義了。所有事件都會傳入Event對象作為參數(shù)权悟，可以從Event對象上獲取到更多的信息：

$(function () {
    $('#testMouseMoveDiv').mousemove(function (e) {
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

取消綁定

一個已被綁定的事件可以接觸綁定砸王，通過off('click', function)實(shí)現(xiàn)：

function hello () {
    alert('hello!');
}
a.click(hello); //確定事件
//10秒后接觸綁定
setTimeout(function () {
    a.off('click',hello);
}, 10000);

需要特別注意的是，下面這種寫法是無效的：

// 綁定事件:
a.click(function () {
    alert('hello!');
});

// 解除綁定:
a.off('click', function () {
    alert('hello!');
});

這是因?yàn)閮蓚€匿名函數(shù)雖然長得一模一樣峦阁，但是它們是兩個不同的函數(shù)對象谦铃，off('click', function () {...})無法移除已綁定的第一個匿名函數(shù)。

為了實(shí)現(xiàn)移除效果拇派，可以使用off('click')一次性移除已綁定的click事件的所有處理函數(shù)荷辕。

同理，無參數(shù)調(diào)用off()一次性移除已綁定的所有類型的事件處理函數(shù)件豌。

事件觸發(fā)條件

一個需要注意的問題是疮方，事件的觸發(fā)總是由用戶操作引發(fā)的。例如茧彤，我們監(jiān)控文本框的內(nèi)容改動：

var input = $('#test-input');
input.change(function () {
    console.log('changed...');
});

當(dāng)用戶在文本框中輸入時骡显，就會觸發(fā)change事件。但是，如果用JavaScript代碼去改動文本框的值惫谤，將不會觸發(fā)change事件：

var input = $('#test-input');
input.val('change it!'); // 無法觸發(fā)change事件

有些時候壁顶，我們希望用代碼觸發(fā)change事件，可以直接調(diào)用無參數(shù)的change()方法來觸發(fā)該事件：

var input = $('#test-input');
input.val('change it!');
input.change(); // 觸發(fā)change事件

input.change()相當(dāng)于input.trigger('change')溜歪，它是trigger()方法的簡寫若专。

為什么我們希望手動觸發(fā)一個事件呢？如果不這么做蝴猪，很多時候调衰，我們就得寫兩份一模一樣的代碼。

瀏覽器安全限制

在瀏覽器中自阱，有些JavaScript代碼只有在用戶觸發(fā)下才能執(zhí)行嚎莉，例如，window.open()函數(shù)：

// 無法彈出新窗口沛豌，將被瀏覽器屏蔽:
$(function () {
    window.open('/');
});

這些“敏感代碼”只能由用戶操作來觸發(fā)：

var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');

function popupTestWindow() {
    window.open('/');
}

button1.click(function () {
    popupTestWindow();
});

button2.click(function () {
    // 不立刻執(zhí)行popupTestWindow()趋箩，100毫秒后執(zhí)行:
    setTimeout(popupTestWindow, 100);
});

當(dāng)用戶點(diǎn)擊button1時，click事件被觸發(fā)加派，由于popupTestWindow()在click事件處理函數(shù)內(nèi)執(zhí)行叫确，這是瀏覽器允許的，而button2的click事件并未立刻執(zhí)行popupTestWindow()芍锦，延遲執(zhí)行的popupTestWindow()將被瀏覽器攔截启妹。

練習(xí)：

對如下的Form表單：

<!-- HTML結(jié)構(gòu) -->
<form id="test-form" action="test">
    <legend>請選擇想要學(xué)習(xí)的編程語言：</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全選</span><span class="deselectAll">全不選</span></label> <a href="#0" class="invertSelect">反選</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>

綁定合適的事件處理函數(shù)，實(shí)現(xiàn)以下邏輯：

當(dāng)用戶勾上“全選”時醉旦，自動選中所有語言饶米，并把“全選”變成“全不選”；

當(dāng)用戶去掉“全不選”時车胡，自動不選中所有語言檬输；

當(dāng)用戶點(diǎn)擊“反選”時，自動把所有語言狀態(tài)反轉(zhuǎn)（選中的變?yōu)槲催x匈棘，未選的變?yōu)檫x中）丧慈；

當(dāng)用戶把所有語言都手動勾上時，“全選”被自動勾上主卫，并變?yōu)椤叭贿x”逃默；

當(dāng)用戶手動去掉選中至少一種語言時，“全不選”自動被去掉選中簇搅，并變?yōu)椤叭x”完域。

'use strict';  var     form = $('#test-form'),     langs = form.find('[name=lang]'),     selectAll = form.find('label.selectAll :checkbox'),     selectAllLabel = form.find('label.selectAll span.selectAll'),     deselectAllLabel = form.find('label.selectAll span.deselectAll'),     invertSelect = form.find('a.invertSelect');  // 重置初始化狀態(tài): form.find('*').show().off(); form.find(':checkbox').prop('checked', false).off(); deselectAllLabel.hide(); // 攔截form提交事件: form.off().submit(function (e) {     e.preventDefault();     alert(form.serialize()); }); 

//練習(xí)答案：
selectAll.change(function () {
    if (this.checked) {
        langs.prop('checked', true);
        deselectAllLabel.show();
        selectAllLabel.hide();
    } else {
        langs.prop('checked', false);
        deselectAllLabel.hide();
        selectAllLabel.show();
    }
})

invertSelect.click(function () {
    langs.each(function () {
        if (this.checked) {
            $(this).prop('checked', false);
        } else {
            this.checked = true;
        }
    })
})

//alert(langs.length);
var count = 0,
    len = langs.length;
langs.click(function () {
count = 0;
langs.each(function () {
    if (this.checked)
        count++;
})
if (count == len) {
    selectAll.prop('checked', true);
    deselectAllLabel.show();
    selectAllLabel.hide();
} else {
    selectAllLabel.show();
    deselectAllLabel.hide();
    selectAll.prop('checked', false);
}
})

動畫

用JavaScript實(shí)現(xiàn)動畫，原理非常簡單：我們只需要以固定的時間間隔（例如瘩将，0.1秒）吟税，每次把DOM元素的CSS樣式修改一點(diǎn)（例如凹耙，高寬各增加10%），看起來就像動畫了肠仪。

但是要用JavaScript手動實(shí)現(xiàn)動畫效果肖抱，需要編寫非常復(fù)雜的代碼。如果想要把動畫效果用函數(shù)封裝起來便于復(fù)用异旧，那考慮的事情就更多了意述。

使用jQuery實(shí)現(xiàn)動畫，代碼已經(jīng)簡單得不能再簡化了：只需要一行代碼吮蛹！

讓我們先來看看jQuery內(nèi)置的幾種動畫樣式：

show / hide

直接以無參數(shù)形式調(diào)用show()和hide()欲险，會顯示和隱藏DOM元素。但是匹涮，只要傳遞一個時間參數(shù)進(jìn)去，就變成了動畫：

var div = $('#test-show-hide');
div.hide(3000); // 在3秒鐘內(nèi)逐漸消失

時間以毫秒為單位槐壳，但也可以是'slow'然低，'fast'這些字符串：

var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒鐘內(nèi)逐漸顯示

toggle()方法則根據(jù)當(dāng)前狀態(tài)決定是show()還是hide()。

slideUp / slideDown

你可能已經(jīng)看出來了务唐，show()和hide()是從左上角逐漸展開或收縮的雳攘，而slideUp()和slideDown()則是在垂直方向逐漸展開或收縮的。

slideUp()把一個可見的DOM元素收起來枫笛，效果跟拉上窗簾似的吨灭，slideDown()相反，而slideToggle()則根據(jù)元素是否可見來決定下一步動作：

var div = $('#test-slide');
div.slideUp(3000); // 在3秒鐘內(nèi)逐漸向上消失

fadeIn / fadeOut

fadeIn()和fadeOut()的動畫效果是淡入淡出刑巧，也就是通過不斷設(shè)置DOM元素的opacity屬性來實(shí)現(xiàn)喧兄，而fadeToggle()則根據(jù)元素是否可見來決定下一步動作：

var div = $('#test-fade');
div.fadeOut('slow'); // 在0.6秒內(nèi)淡出

自定義動畫

如果上述動畫效果還不能滿足你的要求，那就祭出最后大招：animate()啊楚，它可以實(shí)現(xiàn)任意動畫效果堡纬，我們需要傳入的參數(shù)就是DOM元素最終的CSS狀態(tài)和時間缨叫，jQuery在時間段內(nèi)不斷調(diào)整CSS直到達(dá)到我們設(shè)定的值：

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000); //在3秒內(nèi)css過渡到設(shè)定值

animate()還可以再傳入一個函數(shù)，當(dāng)動畫結(jié)束時，該函數(shù)將被調(diào)用：

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000, function () {
    console.log('動畫已結(jié)束');
    //回復(fù)初始狀態(tài)
    $(this).css('opacity', '1.0').css('width', '128px').css('heght', '128px');
});

實(shí)際上這個回調(diào)函數(shù)參數(shù)對于基本動畫也是適用的祟辟。

有了animate()，你就可以實(shí)現(xiàn)各種自定義動畫效果了斯碌。

串行動畫

jQuery的動畫還可以串行動畫晒来，通過delay()方法還可以實(shí)現(xiàn)暫停，這樣周伦，我們可以實(shí)現(xiàn)更復(fù)雜的動畫效果夕春，而代碼卻相當(dāng)簡單：

var div = $('#test-animates');
//動畫效果：slideDown - 暫停 - 放大 - 暫停 - 縮小
div.slideDown(2000)
   .delay(1000)
   .animate({
        width: '256px',
        heght: '256px'
    }, 2000)
    .delay(1000)
    .animate({
        width: '128px',
        height: '128px'
}, 2000);

因?yàn)閯赢嬓枰獔?zhí)行一段時間，所以jQuery必須不斷返回新的Promise對象才能后續(xù)執(zhí)行操作专挪。簡單地把動畫封裝在函數(shù)中是不夠的撇他。

為什么有的動畫沒有效果

你可能會遇到茄猫，有的動畫如slideUp()根本沒有效果。這是因?yàn)閖Query動畫的原理是逐漸改變CSS的值困肩，如height從100px逐漸變?yōu)?code>0划纽。但是很多不是block性質(zhì)的DOM元素，對它們設(shè)置height根本就不起作用锌畸，所以動畫也就沒有效果勇劣。

此外，jQuery也沒有實(shí)現(xiàn)對background-color的動畫效果潭枣，用animate()設(shè)置background-color也沒有效果比默。這種情況下可以使用CSS3的transition實(shí)現(xiàn)動畫效果。

AJAX

用JavaScript寫AJAX前面已經(jīng)介紹過了盆犁，主要問題就是不同瀏覽器需要寫不同代碼命咐，并且狀態(tài)和錯誤處理寫起來很麻煩。

用jQuery的相關(guān)對象來處理AJAX谐岁，不但不需要考慮瀏覽器問題醋奠，代碼也能大大簡化。

ajax()

jQuery在全局對象jQuery（也就是$）綁定了ajax()函數(shù)伊佃，可以處理AJAX請求窜司。ajax(url, settings)函數(shù)需要接收一個URL和一個可選的settings對象，常用的選項(xiàng)如下：

  • async：是否異步執(zhí)行AJAX請求航揉，默認(rèn)為true塞祈，千萬不要指定為false；
  • method：發(fā)送的Method帅涂，缺省為'GET'议薪，可指定為'POST'、'PUT'等媳友；
  • contentType：發(fā)送POST請求的格式笙蒙，默認(rèn)值為'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定為text/plain庆锦、application/json捅位；
  • data：發(fā)送的數(shù)據(jù)，可以是字符串搂抒、數(shù)組或object艇搀。如果是GET請求，data將被轉(zhuǎn)換成query附加到URL上求晶，如果是POST請求焰雕，根據(jù)contentType把data序列化成合適的格式；
  • headers：發(fā)送的額外的HTTP頭芳杏，必須是一個object矩屁；
  • dataType：接收的數(shù)據(jù)格式辟宗，可以指定為'html'、'xml'吝秕、'json'泊脐、'text'等，缺省情況下根據(jù)響應(yīng)的Content-Type猜測烁峭。

下面的例子發(fā)送一個GET請求容客，并返回一個JSON格式的數(shù)據(jù)：

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
});
//請求已經(jīng)發(fā)送出去了

不過，如何用回調(diào)函數(shù)處理返回的數(shù)據(jù)和出錯時的響應(yīng)呢约郁？

還記得Promise對象嗎缩挑？jQuery的jqXHR對象類似一個Promise對象，我們可以用鏈?zhǔn)綄懛▉硖幚砀鞣N回調(diào)：

'use strict';

function ajaxLog(s) {
    var txt = $('#test-response-text');
    txt.val(txt.val() + '\n' + s);
}

$('#test-response-text').val('');
//Todo
var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}).done(function (data) {
    ajaxLog('成功, 收到的數(shù)據(jù): ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失敗: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('請求完成: 無論成功或失敗都會調(diào)用');
});

get

對常用的AJAX操作鬓梅，jQuery提供了一些輔助方法供置。由于GET請求最常見，所以jQuery提供了get()方法绽快，可以這么寫：

var jqxhr = $.get('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});

第二個參數(shù)如果是object芥丧，jQuery自動把它變成query string然后加到URL后面，實(shí)際的URL是：

/path/to/resource?name=Bob%20Lee&check=1

這樣我們就不用關(guān)心如何用URL編碼并構(gòu)造一個query string了谎僻。

post

post()和get()類似，但是傳入的第二個參數(shù)默認(rèn)被序列化為application/x-www-form-urlencoded：

var jqxhr = $.post('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});

實(shí)際構(gòu)造的數(shù)據(jù)name=Bob%20Lee&check=1作為POST的body被發(fā)送寓辱。

getJSON

由于JSON用得越來越普遍艘绍，所以jQuery也提供了getJSON()方法來快速通過GET獲取一個JSON對象：

var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已經(jīng)被解析為JSON對象了
});

安全限制

jQuery的AJAX完全封裝的是JavaScript的AJAX操作，所以它的安全限制和前面講的用JavaScript寫AJAX完全一樣秫筏。

如果需要使用JSONP诱鞠，可以在ajax()中設(shè)置jsonp: 'callback'，讓jQuery實(shí)現(xiàn)JSONP跨域加載數(shù)據(jù)这敬。

關(guān)于跨域的設(shè)置請參考瀏覽器 - AJAX一節(jié)中CORS的設(shè)置航夺。

擴(kuò)展

當(dāng)我們使用jQuery對象的方法時，由于jQuery對象可以操作一組DOM崔涂，而且支持鏈?zhǔn)讲僮餮羝杂闷饋矸浅７奖恪?/p>

但是jQuery內(nèi)置的方法永遠(yuǎn)不可能滿足所有的需求。比如冷蚂，我們想要高亮顯示某些DOM元素缭保，用jQuery可以這么實(shí)現(xiàn)：

$('span.h1').css('backgroundColor', '#fffceb').css('color', '#d85030');
$('p a.h1').css('backgroundColor', '#fffceb').css('color', '#d85030');

總是寫重復(fù)代碼可不好，萬一以后還要修改字體就更麻煩了蝙茶，能不能統(tǒng)一起來艺骂，寫個highlight()方法？

$('span.hl').highlight();
$('p a.hl').highlight();

答案是肯定的隆夯。我們可以擴(kuò)展jQuery來實(shí)現(xiàn)自定義方法钳恕。將來如果要修改高亮的邏輯别伏，只需修改一處擴(kuò)展代碼。這種方式也稱為編寫jQuery插件忧额。

編寫jQuery插件

給jQuery對象綁定一個新方法是通過擴(kuò)展$.fn對象實(shí)現(xiàn)的厘肮。讓我們來編寫第一個擴(kuò)展——highlight1()：

$.fn.highlight1 = function () {
    //this以綁定為當(dāng)前jQuery對象
    this.css('backgroundColor', '#fffceb').css('color','#d85030');
    return this;
}

注意到函數(shù)內(nèi)部的this在調(diào)用時被綁定為jQuery對象，所以函數(shù)內(nèi)部代碼可以正常調(diào)用所有jQuery對象的方法宙址。

對于如下的HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) -->
<div id="test-highlight1">
    <p>什么是<span>jQuery</span></p>
    <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>庫轴脐。</p>
</div>

來測試一下highlight1()的效果：

'use strict'; 
$('#test-highlight1 span').highlight1();

可能發(fā)現(xiàn)了，為什么最后要return this;抡砂？因?yàn)閖Query對象支持鏈?zhǔn)讲僮鞔笤郏覀冏约簩懙臄U(kuò)展方法也要能繼續(xù)鏈?zhǔn)较氯ィ?/p> 

$('span h1').highlight1().slideDown();

不然，用戶調(diào)用的時候注益，就不得不把上面的代碼拆成兩行碴巾。

但是這個版本并不完美。有的用戶希望高亮的顏色能自己來指定丑搔，怎么辦厦瓢？

我們可以給方法加個參數(shù)，讓用戶自己把參數(shù)用對象傳進(jìn)去啤月。于是我們有了第二個版本的highlight2()：

$.fn.highlight2 = function (option) {
    //要考慮到各種情況:
    //options為undefined
    //options只有部分key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
}

對于如下HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) -->
<div id="test-highlight2">
    <p>什么是<span>jQuery</span> <span>Plugin</span></p>
    <p>編寫<span>jQuery</span> <span>Plugin</span>可以用來擴(kuò)展<span>jQuery</span>的功能煮仇。</p>
</div>

來實(shí)測一下帶參數(shù)的highlight2()：

'use strict';
$('#test-highlight2 span').highlight2({
    backgroundColor: '#00a8e6',
    color: '#ffffff'
});

對于默認(rèn)值的處理，我們用了一個簡單的&&和||短路操作符谎仲，總能得到一個有效的值浙垫。

另一種方法是使用jQuery提供的輔助方法$.extend(target, obj1, obj2, ...)，它把多個object對象的屬性合并到第一個target對象中郑诺，遇到同名屬性夹姥，總是使用靠后的對象的值，也就是越往后優(yōu)先級越高：

//把默認(rèn)值和用戶傳入的options合并到對象{}中并返回:
var opts = $.extend({}, {
    backgroundColor: '#00a8e6',
    color: 'fffff'
}, options);

緊接著用戶對highlight2()提出了意見：每次調(diào)用都需要傳入自定義的設(shè)置辙诞，能不能讓我自己設(shè)定一個缺省值辙售，以后的調(diào)用統(tǒng)一使用無參數(shù)的highlight2()？

也就是說飞涂，我們設(shè)定的默認(rèn)值應(yīng)該能允許用戶修改旦部。

那默認(rèn)值放哪比較合適？放全局變量肯定不合適较店，最佳地點(diǎn)是$.fn.highlight2這個函數(shù)對象本身志鹃。

于是最終版的highlight()終于誕生了：

$.fn.highlight = function (options) {
    //合并默認(rèn)值和用戶設(shè)定值：
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}
//設(shè)定默認(rèn)值
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}

這次用戶終于滿意了。用戶使用時泽西，只需一次性設(shè)定默認(rèn)值：

$.fn.highlight.defaults.color = '#fff';
$.fn.highlight.defaults.backgroundColor = '#000';

然后就可以非常簡單地調(diào)用highlight()了曹铃。

對如下的HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) -->
<div id="test-highlight">
    <p>如何編寫<span>jQuery</span> <span>Plugin</span></p>
    <p>編寫<span>jQuery</span> <span>Plugin</span>，要設(shè)置<span>默認(rèn)值</span>捧杉，并允許用戶修改<span>默認(rèn)值</span>陕见，或者運(yùn)行時傳入<span>其他值</span>秘血。</p>
</div>

實(shí)測一下修改默認(rèn)值的效果：

'use strict';
$.fn.highlight.defaults.color = '#659f13';
$.fn.highlight.defalts.backgroundColor = '#f2fae3';

$('#test-highlight p:first-child span').highlight();
$('#test-highlight p:last-child span').highlight({
    color: '#dd1144'
});

最終，我們得出編寫一個jQuery插件的原則：

  1. 給$.fn綁定函數(shù)评甜，實(shí)現(xiàn)插件的代碼邏輯灰粮；
  2. 插件函數(shù)最后要return this;以支持鏈?zhǔn)秸{(diào)用；
  3. 插件函數(shù)要有默認(rèn)值忍坷，綁定在$.fn.<pluginName>.defaults上粘舟；
  4. 用戶在調(diào)用時可傳入設(shè)定值以便覆蓋默認(rèn)值。

針對特定元素的擴(kuò)展

我們知道jQuery對象的有些方法只能作用在特定DOM元素上佩研，比如submit()方法只能針對form柑肴。如果我們編寫的擴(kuò)展只能針對某些類型的DOM元素，應(yīng)該怎么寫旬薯？

還記得jQuery的選擇器支持filter()方法來過濾嗎晰骑？我們可以借助這個方法來實(shí)現(xiàn)針對特定元素的擴(kuò)展。

舉個例子绊序，現(xiàn)在我們要給所有指向外鏈的超鏈接加上跳轉(zhuǎn)提示硕舆，怎么做？

先寫出用戶調(diào)用的代碼：

$('#main a').external();

然后按照上面的方法編寫一個external擴(kuò)展：

$.fn.external = function () {
    //return返回的each()返回結(jié)果骤公，支持鏈?zhǔn)秸{(diào)用：
    return this.filter('a').each(function () {
        //注意：each()內(nèi)部的回調(diào)函數(shù)的this綁定為DOM本身
        var a = $(this);
        var url = a.attr('href');
        if(url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)){
            a.attr('href', '#0')
             .removeAttr('target')
             .append('<i class="uk-icon-external-link"></i>')
                .click(function () {
                if(confirm('你確定要前往' + url + '?')) {
                    window.open(url);
                }
            });
        }
    });
}

對如下的HTML結(jié)構(gòu)：

<!-- HTML結(jié)構(gòu) -->
<div id="test-external">
    <p>如何學(xué)習(xí)<a >jQuery</a>抚官？</p>
    <p>首先，你要學(xué)習(xí)<a href="/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">JavaScript</a>阶捆，并了解基本的<a >HTML</a>凌节。</p>
</div>

實(shí)測外鏈效果：

'use strict';
$('#test-external a').external();

小結(jié)

擴(kuò)展jQuery對象的功能十分簡單，但是我們要遵循jQuery的原則趁猴，編寫的擴(kuò)展方法能支持鏈?zhǔn)秸{(diào)用刊咳、具備默認(rèn)值和過濾特定元素彪见，使得擴(kuò)展方法看上去和jQuery本身的方法沒有什么區(qū)別儡司。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市余指，隨后出現(xiàn)的幾起案子捕犬，更是在濱河造成了極大的恐慌，老刑警劉巖酵镜，帶你破解...
    沈念sama閱讀 217,542評論 6贊 504
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件碉碉，死亡現(xiàn)場離奇詭異，居然都是意外死亡淮韭，警方通過查閱死者的電腦和手機(jī)垢粮，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來靠粪，“玉大人蜡吧，你說我怎么就攤上這事毫蚓。” “怎么了昔善？”我有些...
    開封第一講書人閱讀 163,912評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵元潘，是天一觀的道長。 經(jīng)常有香客問我君仆，道長翩概，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,449評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任返咱，我火速辦了婚禮钥庇，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘洛姑。我一直安慰自己上沐，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布楞艾。 她就那樣靜靜地躺著参咙，像睡著了一般。 火紅的嫁衣襯著肌膚如雪硫眯。 梳的紋絲不亂的頭發(fā)上蕴侧，一...
    開封第一講書人閱讀 51,370評論 1贊 302
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音两入，去河邊找鬼净宵。 笑死，一個胖子當(dāng)著我的面吹牛裹纳，可吹牛的內(nèi)容都是我干的择葡。 我是一名探鬼主播，決...
    沈念sama閱讀 40,193評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼剃氧，長吁一口氣：“原來是場噩夢啊……” “哼敏储！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起朋鞍，我...
    開封第一講書人閱讀 39,074評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤已添，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后滥酥，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體更舞，經(jīng)...
    沈念sama閱讀 45,505評論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3贊 335
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年坎吻，在試婚紗的時候發(fā)現(xiàn)自己被綠了缆蝉。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,841評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖刊头，靈堂內(nèi)的尸體忽然破棺而出贝搁，到底是詐尸還是另有隱情，我是刑警寧澤芽偏，帶...
    沈念sama閱讀 35,569評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布雷逆，位于F島的核電站，受9級特大地震影響污尉，放射性物質(zhì)發(fā)生泄漏膀哲。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一被碗、第九天 我趴在偏房一處隱蔽的房頂上張望某宪。 院中可真熱鬧，春花似錦锐朴、人聲如沸兴喂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0贊 22
  • 一樁弒父案焚志，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽衣迷。三九已至，卻和暖如春酱酬，著一層夾襖步出監(jiān)牢的瞬間壶谒，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工膳沽， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留汗菜，地道東北人。 一個月前我還...
    沈念sama閱讀 47,962評論 2贊 370
  • 代替公主和親
    正文 我出身青樓挑社，卻偏偏與公主長得像陨界，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子痛阻，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2贊 354

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5菌瘪？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 27,485評論 1贊 45
  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的热押。 ??事件碌补，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,490評論 1贊 11
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性啤斗。 1....
    LaBaby_閱讀 1,335評論 0贊 2
  • 路表箭， 是自己的！ 不必用別人的標(biāo)準(zhǔn)钮莲， 來框定自己的人生免钻！ 再怎么沒主見 沒見識彼水， 沒思維 沒格局～～ 人生的路還是...
    念想落閱讀 176評論 0贊 2
  • 聲明：此篇簡書是參照尚硅谷網(wǎng)站內(nèi)視頻而寫，其內(nèi)的觀點(diǎn)是由尚硅谷視頻內(nèi)講解內(nèi)容以及自己理解所匯集寫的极舔，如有侵犯版權(quán)或...
    我常常問自己我是誰閱讀 491評論 0贊 0