中文版譯者：Keel

此文以實例為基礎一步步說明了jQuery的工作方式?，F以中文翻譯（添加我的補充說明）如下。如有相關意見或建議請麻煩到我的 BLOG 寫個回復或者 EMAIL 告知。

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

本文發布已征求原作者同意。

另外我認為在學習過程中,有兩個API文檔你要打開隨時查看:

以下部分為原文翻譯:

jQuery入門指南教程

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

內容提要

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

安裝

一開始,我們需要一個jQuery的庫,最新的下載可以到這里找到。這個指南提供一個基本包含實例的包供下載.

下載：jQuery Starterkit

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

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

現在,我們就已經做好了一切準備來進行這個著名的"Hello world"例子.

本章的相關鏈接:

Hello jQuery

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

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

放一個簡單的alert事件在需要等DOM完成載入,所以我們把任務稍稍變復雜一點:在點擊任何一個鏈接時顯示一個alert.

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

這樣在你點擊頁面的一個鏈接時都會觸發這個"Hello world"的提示。

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

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