jQuery中文入門指南，翻譯加例項，jQuery的起點教程(一)
阿新 • • 發佈：2019-02-07
jQuery出來已經這麼長時間了，在GOOGLE搜尋還是那麼點東西，15天那個系列其實只是一個介紹jQuery特性的文章，很多人卻把它當作一個教程來翻譯，甚至還只是翻譯計劃。至於現實用到jQuery的應用，就更少了，比起Prototype來，國內對jQuery的進展也太不到位了吧，呵呵：）
其實最好的入門文章(教程)在這裡：
http://jquery.bassistance.de/jquery-getting-started.html ，感謝Jörn(http://bassistance.de/ )
我仔細看了這個文章，覺得跟著這個走一遍的話，jQuery就算入門了，此文以例項為基礎一步步說明了jQuery的工作方式。現在我將翻譯（新增我的補充說明）如下。轉載的話請麻煩寫個回覆告知。本文釋出已徵求原作者同意。
另外我認為在學習過程中,有兩個API文件你要開啟隨時檢視: http://jquery.com/api/
http://visualjquery.com/
-------------以下為原文翻譯--------------
jQuery入門指南
這個指南是一個對jQuery庫的說明，要求讀者瞭解DOM的一些常識。它包括了一個簡單的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事件在一個function中,因為這個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方法.
這裡有一個擬行相似功能的程式碼:
<a href="#" onclick="alert('Hello world')">Link</a>
不同之處很明顯,用jQuery不需要在每個a標籤上寫onclick事件,所以我們擁有了一個整潔的結構文件(HTML)和一個行為文件(JS),達到了將結構與行為分開的目的,就像我們使用CSS追求的一樣.
下面我們會更多地瞭解到選擇器與事件.
感興趣的連結:
jQuery Base
jQuery Expressions
jQuery Basic Events