窺探jQuery—面向JavaScript程序員

當 jQuery 在2006年1月現身時,給我的第一印象,是這玩意兒構造得很精明。基于CSS選擇器(CSS selectors)來打點一切,其思路相當靈巧(參考getElementsBySelector)。但鏈盒工事(chaining stuff)看起來更像個噱頭,並且整體看來,jQuery庫提供的功能並不能覆蓋所有基礎性的東西。因此我斷定,jQuery只會昙花一現。

幾個月以來,我逐漸明白自己想錯了。從技術工藝上考量,jQuery十分淩厲。它用簡潔的方法,把大量常用功能封裝起來,並提供精巧的插入式API,來滿足標准庫之外的功能模塊的實現。jQuery秉持的核心,乃DOM元素的集合(譯注:通常是某些子集合)——它把元素集合作爲一個根本,給高度抽象出來了。最重要的,是這種遵循最佳實踐的抽象,能讓jQuery與其他JavaScript代碼相處融洽。

很多對jQuery的介紹,都是針對設計師和初級開發人員。接下來我想說明,爲什麽jQuery也會吸引那些富有經驗的開發人員。

名稱空間(Namespacing)

編寫可重用的、優秀的JavaScript代碼,其關鍵在于對名稱空間的積極把控。JavaScript只擁有單一的、全局的名稱空間(即window對象),而很多程序員(以及一些庫)恣意地爲之添加各種東西。要知道全局變量是魔鬼!聰明的開發人員,會使用類似組件模式的技術,來盡力減少全局對象的數量。

jQuery僅向全局名稱空間引入一個標記:jQuery函數/對象。其余的要麽是jQuery的直接屬性(譯注:原文‘directy property’系筆誤,應是‘direct property’),要麽就是調用jQuery函數所返回的對象的方法。

在語言升級方面,jQuery提供了很多函數(功能),但每個函數都被賦給jQuery對象的屬性:jQuery.each,jQuery.extend,jQuery.grep,jQuery.map,jQuery.merge以及jQuery.trim。如此一來,它們就不會跟其他代碼産生沖突。

聲名狼藉的$函數(The infamous $ function)

剛才我說到,jQuery是唯一被引入的全局標記,其實並不盡然:$標記作爲jQuery的快捷方式,也被引入進來。慶幸的是,$的存在不會帶來負面影響:如果你需要讓原始的$起死回生(比如,這之前你的代碼使用了Prototype),你可以調用jQuery.noConflict()來恢複它。

如果你既想擁有$的便利,又不希望jQuery跟其他同樣使用了全局$函數的代碼發生沖突,可遵循jQuery文檔所建議的慣用方式:

(function($) { // 在這個函數體裏,$可作爲jQuery的引用 // 很方便,對吧?})(jQuery);

把一切都附加到$標記的做法,曾讓我認爲jQuery華而不實。不過,從體系的角度來審視這種設計,一切又是非常明了的——盡管我常喜歡在代碼中定義自己的$快捷方式。

選取元素(Selecting some elements)

jQuery的每個操作,都以選取DOM中一個或更多的節點(nodes)作爲開始。jQuery(擁有一種真正的面向特定領域)的選取語法,是十分有趣的,它結合了CSS 1,CSS 2,部分CSS 3語法,一些XPath語法,以及一些特定的擴展。在這裏我不會做詳細介紹,我只列出幾個有用的例子:

$('div.panel')

選取了所有class="panel"的div

$('p#intro')

選取了所有id="intro"的段落

$('div#content a:visible')

選取了id="content"的div中所有可見的鏈接

$('input[@name=email]')

選取了所有name="email"的輸入域

$('table.orders tr:odd')

選取了類名爲“orders”的表中所有的奇數行

$('a[@href^="]http://"]')

選取了所有(以http://開頭的)外部鏈接

$('p[a]')

選取了所有包含一個或多個鏈接的段落

上述例子中,:visible和:odd是jQuery實現的擴展,很具特色。而屬性的選取使用@作爲標記,其方式和XPath一樣,要優于CSS 2。

jQuery的這套選取語法包羅萬象,有些類似正則表達式,想完全消化是需要花上一段時間的。

通過jQuery的選取操作,我們能得到一些很棒的“素材”(beast)。它們是一個集合,包含了DOM元素,並且類似數組那樣,擁有length屬性;通過索引可以訪問集合中的元素。在Firebug console的交互模式下,集合也被顯示成一個數組,這個特性非常有用。集合實際上是一個jQuery對象,這個對象被賦予了很多方法(methods),用來查詢,修改,擴展集合中的元素。

jQuery的方法(methods),本質上可分成三種:一種可以操作那些符合匹配的元素;一種可以返回第一個匹配到的對象的值;一種可以變更被選取的集合。

我不會列出所有的方法(可參考visualjquery.com),但我用例子做一下說明。如果你的浏覽器裝了Firebug,你可以以交互方式運行這些示例代碼:首先使用這個bookmarklet(譯注[1])把jQuery庫載入至浏覽器的任意頁面,然後把示例代碼粘貼到Firebug console中。

$('div#primary').width(300);

把id="primary"的div的寬度設爲300px

$('p').css('line-height', '1.8em');

把所有段落的line-height設爲1.8em

$('li:odd').css({color: 'white', backgroundColor: 'black'});

向間隔的list項添加兩個CSS規則;注意css()函數可以用一個對象來代替兩個字符串作爲參數

$('a[@href^="]http://"]').addClass('external').attr('target', '_blank');

向所有(以http://開頭的)外部鏈接添加“external”類,然後策略性地加上target="_blank"屬性。這個示例用到了鏈盒(chaining),稍後會做介紹。

$('blockquote').each(function(el) { alert($(this).text()) });

遍曆頁面上的每個<blockquote>,並顯示出它的文字內容(包括HTML標簽)

$('a').html('Click here!');

用陰險的“Click here!”代替頁面上所有的鏈接<a>的文字

下面的示例展示了jQuery如何取得第一個匹配到的對象的值:

var width = $('div').width();

頁面上第一個div的寬度

var src = $('img').attr('src');

頁面上第一張圖片的src屬性值

var color = $('h1').css('color');

第一個<h1>的顔色樣式值

在jQuery 的方法構造中,蘊含著令人惬意的對稱性:當向方法傳遞兩個參數或一個對象時,方法可被用來執行設置操作;如果只向方法傳遞一個參數,則可以讓它執行取值操作(譯注:讀者可對照上面的示例代碼感受一下)。這種對稱性設計貫穿了jQuery體系,使得API的文法更容易被記憶。

本節最後的例子,展示了一些可變更被選取的元素集合的方法。這些方法大多都提高了檢索DOM的簡易程度:

$('div').not('[@id]')

返回那些沒有id屬性的div

$('h2').parent()

返回那些是<h2>的直接父節點元素

$('blockquote').children()

返回所有<blockquote>的子節點元素

$('p').eq(4).next()

在頁面上找到第五個段落(譯注:因爲集合的元素索引從0開始),然後根據節點的樹層結構關系,找到並返回這個段落節點右側的兄弟節點元素

$('input:text:first').parents('form')

找到並返回頁面上第一個type="text"的輸入域所在的form節點元素,parents()的可選參數是另一個選擇器

鏈盒(Chaining)

jQuery 開發團隊經常誇耀jQuery的鏈盒理念(譯注[2]),甚至在網站首頁上宣揚“jQuery將改變你編寫JavaScript的方式”。我個人感覺,這麽做多少有點誤導大衆,我願意告訴大家,你完全可以取jQuery之長,卻應避免冗長的方法鏈盒(chains of methods)。

也就是說,鏈盒有時會像變戲法一樣。除了使用鏈盒將各種操作DOM的方法粘到一起,你也可以使用jQuery的end()方法,www.devdao.com來實現在特定範圍內推進或回溯你需要得到的元素。這個概念很難解釋清楚。本質上講,每次使用(諸如children()或filter())方法來改變元素集合時,你可以在這些方法之後使用end(),來重新定位你最初選取的元素集合。關于這點,Jesse Skinner在他的Simplify Ajax development with jQuery(譯注[3])教程中給出了實例:

$('form#login') // 第一步,隱藏表單中那些帶有'optional'類的<label> .find('label.optional').hide().end() // 第二步,爲表單的密碼輸入域渲染上紅色邊框 .find('input:password').css('border', '1px solid red').end() // 第三步,爲表單加上提交處理 .submit(function(){ return confirm('Are you sure you want to submit?'); });

這個示例讀起來就像句俏皮話。整個過程是,先選取一個表單,再在其中選取一些元素做修改,然後回溯到表單,爲它定義一個submit()處理。

示例很酷,但如果你不習慣,也可以不這麽用。我就很樂意用自定義變量來規劃代碼。

操作DOM(DOM Manipulation)

jQuery提供了幾個大規模操作DOM的卓越方法。第一種非常讓人驚歎:jQuery()函數能把HTML片段插入DOM元素中(實際上,函數會留意以'<'打頭的字符串參數):

var div = $('<div>Some text</div>');

一旦你創建好了div,便可以繼續用鏈盒向其添加屬性:

var div = $('<div>Some text</div>').addClass('inserted').attr('id', 'foo');

現在把div加到body上:

div.appendTo(document.body)

或用選擇器把div加到已知元素的前面:

div.prependTo('div#primary')

處理事件(Handling events)

任何JavaScript庫都需要事件處理能力,jQuery也不例外。類似attr()和css()的行爲,各種與事件處理相關的方法也有雙重用途:一種是把函數當作參數,賦給事件處理器;一種是不帶參數,可以模擬事件被觸發(譯注:前提是事件已經定義,可參考visualjquery.com > Events > click()):

$('p').click(function() { $(this).css('background-color', 'red'); });

爲所有段落增加點擊事件,當你點擊它們時,段落背景會變成紅色

$('p:first').click()

然後在第一個段落上模擬點擊的動作,它的背景會變成紅色

類似的函數還包括mouseover,keyup等,對應著浏覽器通常支持的那些動作。留意一下事件處理中的'this'關鍵字,它代表觸發事件的元素;$(this)是一種慣用語法,可以讓this所代表的元素應用各種jQuery方法。

這裏有兩個與事件相關的函數值得仔細說一下:

$('a').hover(function() { $(this).css('background-color', 'orange');}, function() { $(this).css('background-color', 'white');});

hover()可設定兩個函數,分別對應onmouseover和onmouseout事件。

$('p').one('click', function() { alert($(this).html()); });

one()設定的事件在第一次被觸發後便被移除。上面的示例會讓所有段落在第一次被點擊時顯示其文字內容。

憑借bind()和trigger()方法,jQuery也可以支持自定義事件(click()家族僅僅是便捷方法,只支持有限的事件)。自定義事件可接受參數,trigger()可接受數組作爲參數,來做各種處理操作:

$(document).bind('stuffHappened', function(event, msg) { alert('stuff happened: ' + msg);});$(document).trigger('stuffHappened', ['Hello!']);

漸進式編碼(Unobtrusive scripting)

本小節的標題很令我鍾意。我一直認爲,最好的Web應用程序,往往是那些在腳本被禁用後仍能正常使用的程序。想建立這樣的應用程序,最好的方法就是遵循漸進式編碼,讓普通頁面完全加載後,再爲頁面中的元素賦以事件處理(更多信息可參考漸進式編碼和Hijax)。

jQuery對這種編碼策略提供了絕好支持。首先,從整體上看,節點選取暗合jQuery以及漸進式編碼的核心理念。其次,針對window.onload問題,jQuery提供了一套解決方案,這套方案借鑒了Dean Edward的成果,使得以“DOM加載完畢”爲信號的事件能跨浏覽器工作。你可以在浏覽器完全加載DOM後設定並運行一個函數,如下所示:

$(document).ready(function() { alert('The DOM is ready!');});

你甚至可以直接傳遞一個函數給$(),以更簡潔的方式達到同樣效果:

$(function() { alert('The DOM is ready!');});

jQuery與Ajax(jQuery and Ajax)

在我所知道的主流JavaScript庫中,jQuery擁有最棒的Ajax API。最簡單的Ajax調用如:

$('div#intro').load('/some/fragment.html');

代碼以GET請求方式,從/some/fragment.html文件中獲取HTML片段,並把片段裝載到id="intro"的div中。

當我第一次看到這行代碼時,幾乎對它沒什麽印象。這看起來非常簡潔,但如果你想用jQuery做些更複雜的事情,比如顯示Ajax裝載進度,該如何做呢? jQuery爲你准備了一些可自定義的事件(ajaxStart,ajaxComplete,ajaxError等等),來實現你想要的代碼。同時 jQuery也提供了廣泛的底層API,來實現更複雜的Ajax交互:

jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) { alert('The server said: ' + data);}); // 以GET方式通過/some/script.php?name=Simon獲取數據jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) { alert('The server said: ' + data);}); // 以POST方式向/some/script.php發送請求jQuery.getJSON('/some.json', function(json) { alert('JSON rocks: ' + json.foo + ' ' + json.bar);}); // 從/some.json接收並解析數據,把數據轉換成JSON格式jQuery.getScript('/script.js'); // 以GET方式獲取/script.js腳本並用eval()執行

插件(Plugins)

就你所能獲得的功能的數量而言,jQuery庫其實是相當小的——對代碼做緊湊處理後只有20KB左右,甚至用gzip壓縮後會變得更小。向標准庫添加額外功能時,需用插件的方式來做,它可以(也確實能夠)向現有的jQuery實例對象添加全新的方法。如果你想執行:

$('p').bounceAroundTheScreenAndTurnGreen();

jQuery的插件機制提供了文檔說明型的挂載方式(documented hooks),可以實現把上述方法添加到jQuery中。這種簡易的創建形式,吸引了很多插件作者,他們讓人印象深刻;現在插件目錄中已經有超過100個插件了。

警惕“墨者Gh0st”後門程序窺探隱私-安全資訊
  惡意程序生成器出現後,使得網絡犯罪的門檻進一步降低。很多網絡黑客並不需要多高超的計算機技術,就可以利用生成器定制各種功能、操作簡便的惡意程序。  卡巴斯基實驗室近期發現一種名爲"墨者Gh0st"的後門程序...查看完整版>>警惕“墨者Gh0st”後門程序窺探隱私-安全資訊
 
面向對象的JavaScript編程
  Javascript對于做過Web程序的人不應該是陌生,初期是用來做一些簡單的驗證,基本上是在玩弄一些技巧性的東西。IE 4.0引入了DHTML,同時爲了對抗etscape的Javascript,提出了自己的腳本語言JScript,除了遵循EMAC的...查看完整版>>面向對象的JavaScript編程
 
javascript的面向對象編程
前言: 這篇教程是由Tim Scarfe 著,由javascriptKit.com 編輯目錄結構.在寫面向對象的WEB應用程序方面JavaSciprt是一種很好的選擇.它能支持OOP.因爲它通過原型支持繼承的方式和通過屬性和方法的方式一樣好.很多開發者...查看完整版>>javascript的面向對象編程
 
javascript 的面向對象編程
前言: 這篇教程是由Tim Scarfe 著,由javascriptKit.com 編輯目錄結構.在寫面向對象的WEB應用程序方面JavaSciprt是一種很好的選擇.它能支持OOP.因爲它通過原型支持繼承的方式和通過屬性和方法的方式一樣好.很多開發者...查看完整版>>javascript 的面向對象編程
 
面向對象的JavaScript編程
面向對象的JavaScript編程 Javascript對于做過Web程序的人不應該是陌生,初期是用來做一些簡單的FORM驗證,基本上是在玩弄一些技巧性的東西。IE 4.0引入了DHTML,同時爲了對抗Netscape的Javascript,提出了自己的腳...查看完整版>>面向對象的JavaScript編程
 
象調試C#程序一樣調試JavaScript
面對一大段的JavaScript腳本,以前總是會很頭疼,找不到調試他的方法,如果出現什麽錯誤,總是要從頭分析,然後插入很多Alert();調試起來很麻煩。 實際上Visual Studio 對JavaScript 腳本是可以設置斷點進行調試...查看完整版>>象調試C#程序一樣調試JavaScript
 
JavaScript程序構成
     JavaScript腳本語言的基本構成是由控制語句、函數、對象、方法、屬性等,來實現編程的。  一、程序控制流  在任何一種語言中,程序控制流是必須的,它能使得整個程序減小混亂,使之順利按其一定的方式執...查看完整版>>JavaScript程序構成
 
我的面向對象程序觀
  一、面向對象概念的一些誤解   “面向對象”是一個如今被人叫爛的詞彙,就像去年人們都喜歡把自己的公司打上“.com”的標記一樣。其實有多少人能真正理解這個詞彙呢,很難說。我喜歡這樣來比喻人們對“對象”一...查看完整版>>我的面向對象程序觀
 
用JAVA設計面向對象的打印程序
用Java設計面向對象的打印程序張來東 (zhangld@mail.hf.ah.cn)打印程序的編寫通常采用結構化的編程的方法,按特定的位置和一定順序將打印內容送往打印機。在采用JAVA設計打印程序時仍然可采用結構化的方法,但是編寫...查看完整版>>用JAVA設計面向對象的打印程序
 
 
回到王朝網路首頁