| 導購 | 订阅 | 在线投稿
分享
 
 
 

窺探jQuery—面向JavaScript程序員

2008-10-21 08:21:24  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

當 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個插件了。

當 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^="[url=http://"]]http://"]'[/url]) 選取了所有(以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^="[url=http://"]]http://"]').addClass('external').attr('target'[/url], '_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()方法,[url=http://www.devdao.com]www.devdao.com[/url]來實現在特定範圍內推進或回溯你需要得到的元素。這個概念很難解釋清楚。本質上講,每次使用(諸如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個插件了。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有