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

窺探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- 王朝網路 版權所有