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