jQuery中文入門(mén)指南，翻譯加實(shí)例，jQuery的起點(diǎn)教程

中文版譯者：Keel

此文以實(shí)例為基礎(chǔ)一步步說(shuō)明了jQuery的工作方式。現(xiàn)以中文翻譯（添加我的補(bǔ)充說(shuō)明）如下。如有相關(guān)意見(jiàn)或建議請(qǐng)麻煩到我的 BLOG 寫(xiě)個(gè)回復(fù)或者 EMAIL 告知。

英文原版：http://jquery.bassistance.de/jquery-getting-started.html ，感謝原文作者 Jörn Zaefferer

本文發(fā)布已征求原作者同意。

另外我認(rèn)為在學(xué)習(xí)過(guò)程中,有兩個(gè)API文檔你要打開(kāi)隨時(shí)查看:

以下部分為原文翻譯:

jQuery入門(mén)指南教程

這個(gè)指南是一個(gè)對(duì)jQuery庫(kù)的說(shuō)明，要求讀者了解HTML(DOM)和CSS的一些常識(shí)。它包括了一個(gè)簡(jiǎn)單的Hello World的例子，選擇器和事件基礎(chǔ)，AJAX、FX的用法，以及如何制作jQuery的插件。 這個(gè)指南包括了很多代碼，你可以copy它們，并試著修改它們，看看產(chǎn)生的效果。

內(nèi)容提要

安裝 Hello jQuery Find me:使用選擇器和事件 Rate me:使用AJAX Animate me(讓我生動(dòng)起來(lái)):使用FX Sort me(將我有序化):使用tablesorter插件(表格排序) Plug me:制作您自己的插件 Next steps(下一步)

安裝

一開(kāi)始,我們需要一個(gè)jQuery的庫(kù),最新的下載可以到這里找到。這個(gè)指南提供一個(gè)基本包含實(shí)例的包供下載.

下載：jQuery Starterkit

(譯者Keel注:一定要下載這個(gè)包，光看文章不實(shí)踐肯定是不行的。)

下載后解壓縮，然后用你最喜歡的文本編輯器打開(kāi)starterkit.html和custom.js這兩個(gè)文件。(譯者Keel注:這兩個(gè)就是例子文件,所有的例子都用這兩個(gè)例子作出,custom.js寫(xiě)jQuery代碼,starterkit.html觀察效果.建議用editPlus打開(kāi))

現(xiàn)在,我們就已經(jīng)做好了一切準(zhǔn)備來(lái)進(jìn)行這個(gè)著名的"Hello world"例子.

本章的相關(guān)鏈接:

Hello jQuery

在做所有事情之前,我們要讓jQuery讀取和處理文檔的DOM,必須盡可能快地在DOM載入后開(kāi)始執(zhí)行事件,所以,我們用一個(gè)ready事件作為處理HTML文檔的開(kāi)始.看看我們打開(kāi)的custom.js這個(gè)文件,里面已經(jīng)準(zhǔn)備好了:

$(document).ready(function() {	// do stuff when DOM is ready});

放一個(gè)簡(jiǎn)單的alert事件在需要等DOM完成載入,所以我們把任務(wù)稍稍變復(fù)雜一點(diǎn):在點(diǎn)擊任何一個(gè)鏈接時(shí)顯示一個(gè)alert.

$(document).ready(function() {	$("a").click(function() {		alert("Hello world!");	});});

這樣在你點(diǎn)擊頁(yè)面的一個(gè)鏈接時(shí)都會(huì)觸發(fā)這個(gè)"Hello world"的提示。

(譯者Keel注:請(qǐng)照此代碼修改custom.js并保存,然后用瀏覽器打開(kāi)starterkit.html觀察效果。)

讓我們看一下這些修改是什么含義。$("a") 是一個(gè)jQuery選擇器(selector),在這里，它選擇所有的a標(biāo)簽（譯者Keel注：即<a></a>），$號(hào)是 jQuery “類(lèi)”(jQuery "class")的一個(gè)別稱，因此$()構(gòu)造了一個(gè)新的jQuery 對(duì)象(jQuery object)。函數(shù) click() 是這個(gè)jQuery對(duì)象的一個(gè)方法，它綁定了一個(gè)單擊事件到所有選中的標(biāo)簽(這里是所有的a標(biāo)簽),并在事件觸發(fā)時(shí)執(zhí)行了它所提供的alert方法.