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

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

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

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

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

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

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

6、單擊事件到所有選中的標(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追求的一樣.下面我們會(huì)更多地了解到選擇器與事件.本章的相關(guān)鏈接:jQueryBasejQueryExpre

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

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