資源描述：
《jquery的起點(diǎn)教程》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、jQuery中文入門指南，翻譯加實(shí)例，jQuery的起點(diǎn)教程中文版譯者：Keel此文以實(shí)例為基礎(chǔ)一步步說明了jQuery的工作方式?，F(xiàn)以中文翻譯（添加我的補(bǔ)充說明）如下。如有相關(guān)意見或建議請麻煩到我的BLOG寫個(gè)回復(fù)或者EMAIL告知。英文原版：http://jquery.bassistance.de/jquery-getting-started.html，感謝原文作者J?rnZaefferer本文發(fā)布已征求原作者同意。另外我認(rèn)為在學(xué)習(xí)過程中,有兩個(gè)API文檔你要打開隨時(shí)查看:·http://jquery.com/api/·http://visualjquery.
2、com/以下部分為原文翻譯:jQuery入門指南教程這個(gè)指南是一個(gè)對jQuery庫的說明，要求讀者了解HTML(DOM)和CSS的一些常識。它包括了一個(gè)簡單的HelloWorld的例子，選擇器和事件基礎(chǔ)，AJAX、FX的用法，以及如何制作jQuery的插件。這個(gè)指南包括了很多代碼，你可以copy它們，并試著修改它們，看看產(chǎn)生的效果。內(nèi)容提要1.安裝2.HellojQuery3.Findme:使用選擇器和事件4.Rateme:使用AJAX5.Animateme(讓我生動(dòng)起來):使用FX6.Sortme(將我有序化):使用tablesorter插件(表格排序)7.Pl
3、ugme:制作您自己的插件8.Nextsteps(下一步)安裝一開始,我們需要一個(gè)jQuery的庫,最新的下載可以到這里找到。這個(gè)指南提供一個(gè)基本包含實(shí)例的包供下載.下載：jQueryStarterkit(譯者Keel注:一定要下載這個(gè)包，光看文章不實(shí)踐肯定是不行的。)下載后解壓縮，然后用你最喜歡的文本編輯器打開starterkit.html和custom.js這兩個(gè)文件。(譯者Keel注:這兩個(gè)就是例子文件,所有的例子都用這兩個(gè)例子作出,custom.js寫jQuery代碼,starterkit.html觀察效果.建議用editPlus打開)現(xiàn)在,我們就已經(jīng)做好
4、了一切準(zhǔn)備來進(jìn)行這個(gè)著名的"Helloworld"例子.本章的相關(guān)鏈接:·Starterkit·jQueryDownloadsHellojQuery在做所有事情之前,我們要讓jQuery讀取和處理文檔的DOM,必須盡可能快地在DOM載入后開始執(zhí)行事件,所以,我們用一個(gè)ready事件作為處理HTML文檔的開始.看看我們打開的custom.js這個(gè)文件,里面已經(jīng)準(zhǔn)備好了:$(document).ready(function(){//dostuffwhenDOMisready});放一個(gè)簡單的alert事件在需要等DOM完成載入,所以我們把任務(wù)稍稍變復(fù)雜一點(diǎn):在點(diǎn)擊任何
5、一個(gè)鏈接時(shí)顯示一個(gè)alert.$(document).ready(function(){$("a").click(function(){alert("Helloworld!");});});這樣在你點(diǎn)擊頁面的一個(gè)鏈接時(shí)都會(huì)觸發(fā)這個(gè)"Helloworld"的提示。(譯者Keel注:請照此代碼修改custom.js并保存,然后用瀏覽器打開starterkit.html觀察效果。)讓我們看一下這些修改是什么含義。$("a")是一個(gè)jQuery選擇器(selector),在這里，它選擇所有的a標(biāo)簽（譯者Keel注：即），$號是jQuery“類”(jQuery
6、"class")的一個(gè)別稱，因此$()構(gòu)造了一個(gè)新的jQuery對象(jQueryobject)。函數(shù)click()是這個(gè)jQuery對象的一個(gè)方法，它綁定了一個(gè)單擊事件到所有選中的標(biāo)簽(這里是所有的a標(biāo)簽),并在事件觸發(fā)時(shí)執(zhí)行了它所提供的alert方法.這里有一個(gè)擬行相似功能的代碼:Link不同之處很明顯,用jQuery不需要在每個(gè)a標(biāo)簽上寫onclick事件,所以我們擁有了一個(gè)整潔的結(jié)構(gòu)文檔(HTML)和一個(gè)行為文檔(JS),達(dá)到了將結(jié)構(gòu)與行為分開的目的,就像我們使用CSS
7、追求的一樣.下面我們會(huì)更多地了解到選擇器與事件.本章的相關(guān)鏈接:·jQueryBase·jQueryExpressions·jQueryBasicEventsFindme:使用選擇器和事件jQuery提供兩種方式來選擇html的elements，第一種是用CSS和Xpath選擇器聯(lián)合起來形成一個(gè)字符串來傳送到j(luò)Query的構(gòu)造器（如：$("div>ula")）；第二種是用jQuery對象的幾個(gè)methods(方法)。這兩種方式還可以聯(lián)合起來混合使用。為了測試一下這些選擇器，我們來試著在我們starterkit.html中選擇并修改第一個(gè)orderedlist.一開
8、始，我們需
