本文翻譯自jQuery Cookbook (O'Reilly 2009) 1.0 The jQuery Philosophy
jQuery的哲學(xué)是“寫更少的代碼，做更多的事情”，這一哲學(xué)可分述為三個(gè)概念：
- 用CSS選擇器查找元素，并通過jQuery方法來操作這些元素
- 在元素集上鏈?zhǔn)秸{(diào)用多個(gè)jQuery方法
- jQuery封裝與隱式遍歷
充分理解這三個(gè)概念對(duì)于編寫jQuery代碼來說至關(guān)重要。我們來詳細(xì)看一下這三個(gè)概念。
查找元素并進(jìn)行操作
更準(zhǔn)確的說，是在DOM樹中定位一批元素，然后對(duì)該元素集進(jìn)行操作。比如下面這個(gè)例子：首先向用戶隱藏一個(gè)<div>元素，然后向這個(gè)隱藏了的<div>元素內(nèi)插入一些新文本，之后更改其屬性，最后重新顯示這個(gè)<div>元素。相應(yīng)的jQuery代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <div>old content</div> <script> //隱藏頁(yè)面上所有的div元素 jQuery('div').hide(); //更新所有div元素內(nèi)的文本 jQuery('div').text('new content'); //在所有的div元素上添加值為updatedContent的class屬性 jQuery('div').addClass("updatedContent"); //顯示頁(yè)面上所有的div元素 jQuery('div').show(); </script> </body> </html>
我們來逐一看一下這四個(gè)jQuery語句：
- 隱藏頁(yè)面上所有的div元素，讓它們變得不可見
- 用新文本（'new content'）來替換隱藏的div元素中的原有文本
- 向div元素添加新的class屬性值（updatedContent）
- 在頁(yè)面上重新顯示div元素
上面的例子使用jQuery函數(shù)查找HTML頁(yè)面中所有的<div>元素，然后用jQuery方法對(duì)其進(jìn)行操作（hide(), text(), addClass(), show()）。
鏈?zhǔn)秸{(diào)用
在調(diào)用jQuery方法的時(shí)候，按照jQuery的設(shè)計(jì)，可以對(duì)這些方法進(jìn)行鏈?zhǔn)秸{(diào)用。比如，只做一次元素查找，然后在找到的元素上展開一系列操作。之前的代碼示例可以用鏈?zhǔn)秸{(diào)用重寫為一句JavaScript語句。
使用鏈?zhǔn)秸{(diào)用，可以將下面的代碼：
//隱藏頁(yè)面上所有的div元素 jQuery('div').hide(); //更新所有div元素內(nèi)的文本 jQuery('div').text('new content'); //在所有的div元素上添加值為updatedContent的class屬性 jQuery('div').addClass("updatedContent"); //顯示頁(yè)面上所有的div元素 jQuery('div').show();
重寫成：
jQuery('div').hide().text('new content').addClass("updatedContent").show();
如果加上代碼縮進(jìn)就是：
jQuery('div') .hide() .text('new content') .addClass("updatedContent") .show();
簡(jiǎn)單地說，鏈?zhǔn)秸{(diào)用允許在當(dāng)前選擇的元素集上，將無限個(gè)jQuery方法連在一起使用。究其實(shí)質(zhì)，用jQuery方法處理的元素總會(huì)在方法處理完畢之后得到返回，因此鏈?zhǔn)秸{(diào)用可以一直繼續(xù)。jQuery的插件也是這樣設(shè)計(jì)的（返回封裝的元素集），因此使用插件并不會(huì)影響鏈?zhǔn)秸{(diào)用。
鏈?zhǔn)秸{(diào)用的另一個(gè)好處是通過只選擇一次DOM元素來節(jié)省開銷。避免遍歷DOM樹，對(duì)于網(wǎng)頁(yè)性能提升來說至關(guān)重要，因此需要盡可能重用或者緩存已選擇的DOM元素集。
jQuery封裝
在大多數(shù)情況下，如果使用了jQuery，那么必定會(huì)和一個(gè)叫做“jQuery封裝”的東西打交道。換而言之，用jQuery從HTML頁(yè)面上選擇出來的元素會(huì)被封裝上一層jQuery提供的功能。我個(gè)人喜歡把這個(gè)東西叫做“封裝元素集”，因?yàn)樗且粋€(gè)封裝了jQuery功能的元素集合。這個(gè)封裝元素集有時(shí)包含一個(gè)DOM元素，有時(shí)包含多個(gè)，有時(shí)甚至里面什么都沒有。當(dāng)封裝元素集為空時(shí)，在其上調(diào)用的jQuery方法/屬性不會(huì)拋出任何錯(cuò)誤 — 這樣做可以避免不必要的if語句。
還是以上面的HTML代碼為例，當(dāng)網(wǎng)頁(yè)中存在多個(gè)<div>元素的時(shí)候會(huì)怎么樣？在下面的例子中，HTML頁(yè)面多了3個(gè)<div>元素：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.3.0/jquery.min.js"></script> </head> <body> <div>old content</div> <div>old content</div> <div>old content</div> <div>old content</div> <script> jQuery('div').hide().text('new content').addClass("updatedContent").show(); </script> </body> </html>
在上面的例子中并沒有任何表示循環(huán)的編程代碼。但奇妙的是，jQuery會(huì)掃描整個(gè)頁(yè)面，然后將所有的<div>元素放到封裝元素集中，之后對(duì)該封裝集中的每一個(gè)元素（隱式遍歷）執(zhí)行代碼定義的一系列jQuery方法。比如，封裝集中的每一個(gè)元素都調(diào)用了.hide()。在上述代碼中，實(shí)際上我們使用的每一個(gè)方法（hide(), text(), addClass(), show()）都在頁(yè)面中所有的div元素上起了作用，就像人為寫了一個(gè)循環(huán)方法來遍歷DOM元素一樣。上述代碼的執(zhí)行結(jié)果是：頁(yè)面中的每一個(gè)<div>元素都被隱藏，更改內(nèi)含文本，添加class屬性，并最終重新顯現(xiàn)。
熟悉封裝元素集和隱式遍歷對(duì)于編寫復(fù)雜的循環(huán)邏輯來說非常重要 — 需要留意的是，在寫任何額外的循環(huán)代碼之前，一個(gè)簡(jiǎn)單的循環(huán)操作已經(jīng)存在了（比如：jQuery(‘div').each(function(){}）。換而言之，jQuery方法的調(diào)用會(huì)影響封裝元素集中的每一個(gè)元素。
需要注意的是，有一些jQuery方法的行為特殊，只會(huì)影響封裝元素集中的第一個(gè)元素（比如：attr()）。
