jQuery基礎(chǔ)教程(新手入門必看)

《jQuery基礎(chǔ)教程(新手入門必看)》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、WEB論壇您的位置：WEB開發(fā)站長站web前端JS/VBSjqueryjQuery基礎(chǔ)教程(新手入門必看)jQuery基礎(chǔ)教程(新手入門必看)2009-10-1021:54:18作者：admin來源：瀏覽次數(shù)：133網(wǎng)友評論0條此文以實例為基礎(chǔ)一步步說明了jQuery的工作方式?，F(xiàn)以中文翻譯（添加我的補(bǔ)充說明）如下。如有相關(guān)意見或建議請麻煩到我的BLOG寫個回復(fù)或者EMAIL告知。英文原版：http://jquery.bassistance.de/jquery-getting-started.html，感謝原

2、文作者JörnZaefferer內(nèi)容提要安裝HellojQueryFindme:使用選擇器和事件Rateme:使用AJAXAnimateme(讓我生動起來):使用FXSortme(將我有序化):使用tablesorter插件(表格排序)Plugme:制作您自己的插件Nextsteps(下一步)安裝一開始,我們需要一個jQuery的庫,最新的下載可以到這里找到。這個指南提供一個基本包含實例的包供下載.(譯者Keel注:一定要下載這個包，光看文章不實踐肯定是不行的。)下載后解壓縮，然后用你最喜歡的文本編

3、輯器打開starterkit.html和custom.js這兩個文件。(譯者Keel注:這兩個就是例子文件,所有的例子都用這兩個例子作出,custom.js寫jQuery代碼,starterkit.html觀察效果.建議用editPlus打開)現(xiàn)在,我們就已經(jīng)做好了一切準(zhǔn)備來進(jìn)行這個著名的"Helloworld"例子.本章的相關(guān)鏈接:jQueryDownloadsHellojQuery在做所有事情之前,我們要讓jQuery讀取和處理文檔的DOM,必須盡可能快地在DOM載入后開始執(zhí)行事件,所以,我們用一個rea

4、dy事件作為處理HTML文檔的開始.看看我們打開的custom.js這個文件,里面已經(jīng)準(zhǔn)備好了:$(document).ready(function(){//dostuffwhenDOMisready});放一個簡單的alert事件在需要等DOM完成載入,所以我們把任務(wù)稍稍變復(fù)雜一點:在點擊任何一個鏈接時顯示一個alert.$(document).ready(function(){$("a").click(function(){alert("Helloworld!");});});這樣在你點擊頁面的一個鏈接時

5、都會觸發(fā)這個"Helloworld"的提示。(譯者Keel注:請照此代碼修改custom.js并保存,然后用瀏覽器打開starterkit.html觀察效果。)讓我們看一下這些修改是什么含義。$("a")是一個jQuery選擇器(selector),在這里，它選擇所有的a標(biāo)簽（譯者Keel注：即），$號是jQuery“類”(jQuery"class")的一個別稱，因此$()構(gòu)造了一個新的jQuery對象(jQueryobject)。函數(shù)click()是這個jQuery對象的一個方法，它綁定了一個

6、單擊事件到所有選中的標(biāo)簽(這里是所有的a標(biāo)簽),并在事件觸發(fā)時執(zhí)行了它所提供的alert方法.這里有一個擬行相似功能的代碼:Link不同之處很明顯,用jQuery不需要在每個a標(biāo)簽上寫onclick事件,所以我們擁有了一個整潔的結(jié)構(gòu)文檔(HTML)和一個行為文檔(JS),達(dá)到了將結(jié)構(gòu)與行為分開的目的,就像我們使用CSS追求的一樣.下面我們會更多地了解到選擇器與事件.本章的相關(guān)鏈接:jQueryBasejQueryExpre

7、ssionsjQueryBasicEventsFindme:使用選擇器和事件jQuery提供兩種方式來選擇html的elements，第一種是用CSS和Xpath選擇器聯(lián)合起來形成一個字符串來傳送到j(luò)Query的構(gòu)造器（如：$("div>ula")）；第二種是用jQuery對象的幾個methods(方法)。這兩種方式還可以聯(lián)合起來混合使用。為了測試一下這些選擇器，我們來試著在我們starterkit.html中選擇并修改第一個orderedlist.一開始，我們需要選擇這個list本身，這個list有一個ID

8、叫“orderedlist”，通常的javascript寫法是document.getElementById("orderedlist").在jQuery中，我們這樣做：$(document).ready(function(){$("#orderedlist").addClass("red");});這里將starterkit中的一個CSS樣式red附加到了orderedlist上(譯者Keel注：