java上課0jquery基礎(chǔ)教程_第1頁(yè)
java上課0jquery基礎(chǔ)教程_第2頁(yè)
java上課0jquery基礎(chǔ)教程_第3頁(yè)
java上課0jquery基礎(chǔ)教程_第4頁(yè)
java上課0jquery基礎(chǔ)教程_第5頁(yè)
已閱讀5頁(yè)，還剩80頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

jQuery

基礎(chǔ)教程唐四薪《基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)與制作》配套課件V2.0清華大學(xué)出版社內(nèi)容簡(jiǎn)介jQuery的由來(lái)及簡(jiǎn)介一jQuery對(duì)象和DOM對(duì)象二jQuery選擇器三jQuery中的DOM操作四使用jQuery創(chuàng)建動(dòng)畫(huà)效果三五RIA技術(shù)RIA(RichInternetApplications)富互聯(lián)網(wǎng)應(yīng)用,具有高度互動(dòng)性、豐富用戶(hù)體驗(yàn)以及功能強(qiáng)大的客戶(hù)端。

常見(jiàn)的RIA技術(shù)AjaxFlexSliverlightJavaScript及其框架是實(shí)現(xiàn)RIA的重要工具JavaScript框架簡(jiǎn)介隨著JavaScript、CSS、Ajax等技術(shù)的不斷進(jìn)步，越來(lái)越多的開(kāi)發(fā)者將一個(gè)又一個(gè)豐富多彩的程序功能進(jìn)行封裝，供其他人可以調(diào)用這些封裝好的程序組件（框架）當(dāng)前流行的JavaScript庫(kù)有:jQuery的優(yōu)勢(shì)輕量級(jí)（Lightweight）強(qiáng)大的選擇器出色的DOM操作封裝可靠的事件處理機(jī)制出色的瀏覽器兼容性

jQuery理念:寫(xiě)得少,做得多jQuery的使用下載：提供了最新的jQuery框架下載。通常只需下載最小的jQuery包（Minified）即可。目前最新的版本jquery-1.3.2.min.js文件只有55.9KB引用：<scriptsrc="jquery.min.js"></script>將jQuery框架文件導(dǎo)入后，就可以使用jQuery的選擇器和各種函數(shù)功能了。第一個(gè)jQuery程序<scriptsrc="jquery.min.js"></script><script>$(document).ready(function(){ alert("HelloWorld!");});</script>引入jQuery等待DOM文檔載入后執(zhí)行類(lèi)似于window.onload彈出一個(gè)對(duì)話(huà)框jQuery對(duì)象與DOM對(duì)象jQuery對(duì)象jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象jQuery對(duì)象是jQuery獨(dú)有的.如果一個(gè)對(duì)象是jQuery對(duì)象,那么它就可以使用jQuery里的方法:$(“#tab”).html();jQuery對(duì)象無(wú)法使用DOM對(duì)象的任何方法,同樣DOM對(duì)象也不能使用jQuery里的任何方法建議約定：如果獲取的是jQuery對(duì)象,那么要在變量前面加上$. var$variable=jQuery對(duì)象varvariable=DOM對(duì)象jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象jQuery對(duì)象不能使用DOM中的方法,但如果jQuery沒(méi)有封裝想要的方法,不得不使用DOM方法的時(shí)候,有如下兩種處理方法:(1)jQuery對(duì)象是一個(gè)數(shù)組對(duì)象,可以通過(guò)[index]的方法得到對(duì)應(yīng)的DOM對(duì)象.$("#msg")[0](2)使用jQuery中的get(index)方法得到相應(yīng)的DOM對(duì)象$("#msg").get(0)DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象對(duì)于一個(gè)DOM對(duì)象,只需要用$()把DOM對(duì)象包裝起來(lái)(jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象),就可以獲得一個(gè)jQuery對(duì)象.

例如：$(document.getElementById(“msg”))轉(zhuǎn)換后就可以使用jQuery中的方法了jQuery對(duì)象與dom對(duì)象的轉(zhuǎn)換舉例以下幾種寫(xiě)法都是正確的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]這些都是dom對(duì)象，可以使用dom中的方法，但不能再使用jQuery的方法jQuery的選擇器更多知識(shí)請(qǐng)查閱PHP論壇jQuery選擇器選擇器是jQuery的根基,在jQuery中,對(duì)事件處理,遍歷DOM和Ajax操作都依賴(lài)于選擇器jQuery選擇器的優(yōu)點(diǎn):簡(jiǎn)潔的寫(xiě)法完善的事件處理機(jī)制基本選擇器基本選擇器是jQuery中最常用的選擇器,也是最簡(jiǎn)單的選擇器,它通過(guò)元素id,class和標(biāo)記名來(lái)查找DOM元素基本選擇器示例改變id為one的元素的背景色為紅色$("#one").css("backgroundColor","red");改變?cè)孛麨?lt;p>的所有元素的背景色為#bbffaa，字體顏色為紅色$("p").css({color:"red",backgroundColor:"#bbffaa"});改變第一個(gè)<p>元素的背景色為紅色$("p").eq(0).css("backgroundColor","red");改變所有<h1>元素和id為one的元素的背景色為#bbffaa$("h1,#one").css("backgroundColor","#bbffaa");層次選擇器如果想通過(guò)DOM元素之間的層次關(guān)系來(lái)獲取特定元素,例如后代元素,子元素,相鄰元素,兄弟元素等,則需要使用層次選擇器注意:(“prev~div”)選擇器只能選擇“#prev”元素后面的同輩元素;而jQuery中的方法siblings()

與前后位置無(wú)關(guān),只要是同輩節(jié)點(diǎn)就可以選取層次選擇器示例改變<body>內(nèi)所有

<div>的背景色為#bbffaa$(“bodydiv")改變<body>內(nèi)子

<div>的背景色為#bbffaa$(“body>div")改變id為one的下一個(gè)

<div>的背景色為#bbffaa$("#one+div")改變id為two的元素后面的所有兄弟<div>的元素的背景色為#bbffaa$("#two~div")改變id為two的元素所有<p>兄弟元素的背景色為#bbffaa$("#two").siblings("p")

過(guò)濾選擇器過(guò)濾選擇器主要是通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出所需的DOM元素,該選擇器都以“:”開(kāi)頭按照不同的過(guò)濾規(guī)則,過(guò)濾選擇器又可分為基本過(guò)濾,內(nèi)容過(guò)濾,可見(jiàn)性過(guò)濾,屬性過(guò)濾,子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器.更多知識(shí)請(qǐng)查閱PHP論壇基本過(guò)濾選擇器基本過(guò)濾選擇器示例改變第一個(gè)div元素的背景色為#bbffaa$("div:first")改變id不為one的所有p元素的背景色為#bbffaa$("p:not('#one')")改變索引值為偶數(shù)的tr元素的背景色為#bbffaa$(“tr:even")改變索引值為大于3且為奇數(shù)的p元素的背景色為#bbffaa$(“p:gt(3):odd")改變所有的標(biāo)題元素的背景色為#bbffaa$(":header")改變當(dāng)前正在執(zhí)行動(dòng)畫(huà)的所有元素的背景色為#bbffaa內(nèi)容過(guò)濾選擇器內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要體現(xiàn)在它所包含的子元素和文本內(nèi)容上內(nèi)容過(guò)濾選擇器示例改變含有文本‘di’的p元素的背景色為#bbffaa$("p:cotains(di)")改變不包含子元素(或者文本元素)的div空元素的背景色為#bbffaa改變含有class為mini元素的p元素的背景色為#bbffaa$("p:has(.mini)")改變含有子元素(或者文本元素)的div元素的背景色為#bbffaa可見(jiàn)性過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器是根據(jù)元素的可見(jiàn)和不可見(jiàn)狀態(tài)來(lái)選擇相應(yīng)的元素可見(jiàn)選擇器:hidden不僅包含樣式屬性display為none的元素,也包含文本隱藏域(<inputtype=“hidden”>)和visible:hidden之類(lèi)的元素可見(jiàn)性過(guò)濾選擇器示例改變所有可見(jiàn)的div元素的背景色為#bbffaa選取所有不可見(jiàn)的元素,利用jQuery中的show()方法將它們顯示出來(lái),并設(shè)置其背景色為#bbffaa選取所有的文本隱藏域,并打印它們的值更多知識(shí)請(qǐng)查閱PHP論壇屬性過(guò)濾選擇器屬性過(guò)濾選擇器的過(guò)濾規(guī)則是通過(guò)元素的屬性來(lái)獲取相應(yīng)的元素屬性過(guò)濾選擇器示例選取下列元素,改變其背景色為#bbffaa含有屬性title的div元素.屬性title值等于"test"的div元素.屬性title值不等于"test"的div元素(沒(méi)有屬性title的也將被選中).屬性title值以"te"開(kāi)始的div元素.屬性title值以"est"結(jié)束的div元素.屬性title值含有"es"的div元素.選取有屬性id的div元素，然后在結(jié)果中選取屬性title值含有“es”的div元素.子元素過(guò)濾選擇器nth-child()選擇器詳解如下：(1):nth-child(even/odd):能選取每個(gè)父元素下的索引值為偶(奇)數(shù)的元素(2):nth-child(2):能選取每個(gè)父元素下的索引值為2的元素(3):nth-child(3n):能選取每個(gè)父元素下的索引值是3的倍數(shù)的元素(3):nth-child(3n+1):能選取每個(gè)父元素下的索引值是3n+1的元素子元素過(guò)濾選擇器示例選取下列元素,改變其背景色為#bbffaa每個(gè)class為one的div父元素下的第2個(gè)子元素.每個(gè)class為one的div父元素下的第一個(gè)子元素每個(gè)class為one的div父元素下的最后一個(gè)子元素如果class為one的div父元素下的僅僅只有一個(gè)子元素，那么選中這個(gè)子元素表單對(duì)象屬性過(guò)濾選擇器此選擇器主要對(duì)所選擇的表單元素進(jìn)行過(guò)濾表單對(duì)象屬性過(guò)濾選擇器示例利用jQuery對(duì)象的val()方法改變表單內(nèi)可用<input>元素的值利用jQuery對(duì)象的val()方法改變表單內(nèi)不可用<input>元素的值利用jQuery對(duì)象的length屬性獲取多選框選中的個(gè)數(shù)利用jQuery對(duì)象的text()方法獲取下拉框選中的內(nèi)容表單選擇器練習(xí)1.給網(wǎng)頁(yè)中所有的<p>元素添加onclick事件2.是一個(gè)特定的表格隔行變色3.對(duì)多選框進(jìn)行操作,輸出選中的多選框的個(gè)數(shù)jQuery中的DOM操作jQuery中的DOM操作DOM(DocumentObjectModel—文檔對(duì)象模型)：一種與瀏覽器,平臺(tái),語(yǔ)言無(wú)關(guān)的接口,使用該接口可以輕松地訪問(wèn)頁(yè)面中所有的標(biāo)準(zhǔn)組件DOM操作的分類(lèi):DOMCore:DOMCore并不專(zhuān)屬于JavaScript,任何一種支持DOM的程序設(shè)計(jì)語(yǔ)言都可以使用它.它的用途并非僅限于處理網(wǎng)頁(yè),也可以用來(lái)處理任何一種是用標(biāo)記語(yǔ)言編寫(xiě)出來(lái)的文檔,例如:XMLHTMLDOM:

使用JavaScript和DOM為HTML文件編寫(xiě)腳本時(shí),有許多專(zhuān)屬于HTML-DOM的屬性CSS-DOM:針對(duì)于CSS操作,在JavaScript中,CSS-DOM主要用于獲取和設(shè)置style對(duì)象的各種屬性查找節(jié)點(diǎn)查找節(jié)點(diǎn):

查找元素節(jié)點(diǎn):通過(guò)jQuery選擇器完成.查找屬性節(jié)點(diǎn):查找到所需要的元素之后,可以調(diào)用jQuery對(duì)象的attr()方法來(lái)獲取它的各種屬性值創(chuàng)建節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn):使用jQuery的工廠函數(shù)$():$(html);會(huì)根據(jù)傳入的html標(biāo)記字符串創(chuàng)建一個(gè)DOM對(duì)象,并把這個(gè)DOM對(duì)象包裝成一個(gè)jQuery對(duì)象返回.注意:

動(dòng)態(tài)創(chuàng)建的新元素節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔中,而是需要使用其他方法將其插入到文檔中;當(dāng)創(chuàng)建單個(gè)元素時(shí),需注意閉合標(biāo)簽和使用標(biāo)準(zhǔn)的XHTML格式.例如創(chuàng)建一個(gè)<p>元素,可以使用$(“<p/>”)或$(“<p></p>”),但不能使用$(“<p>”)或$(“<P>”)創(chuàng)建文本節(jié)點(diǎn)就是在創(chuàng)建元素節(jié)點(diǎn)時(shí)直接把文本內(nèi)容寫(xiě)出來(lái);創(chuàng)建屬性節(jié)點(diǎn)也是在創(chuàng)建元素節(jié)點(diǎn)時(shí)一起創(chuàng)建插入節(jié)點(diǎn)(1)動(dòng)態(tài)創(chuàng)建了HTML元素之后,還需要將新創(chuàng)建的節(jié)點(diǎn)插入到文檔中,即成為文檔中某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)插入節(jié)點(diǎn)(2)以上方法不但能將新創(chuàng)建的DOM元素插入到文檔中,也能對(duì)原有的DOM元素進(jìn)行移動(dòng).創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)示例varnewP=$("<p>武廣高速鐵路即將通車(chē)！</p>");newP.insertAfter(“#chapter”);//將創(chuàng)建的newP元素插入到ID為#chapter的元素之后或者newP.appendTo(“body”);

//插入到body元素里刪除節(jié)點(diǎn)remove():

從DOM中刪除所有匹配的元素,傳入的參數(shù)用于根據(jù)jQuery表達(dá)式來(lái)篩選元素.當(dāng)某個(gè)節(jié)點(diǎn)用remove()方法刪除后,該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將被同時(shí)刪除.這個(gè)方法的返回值是一個(gè)指向已被刪除的節(jié)點(diǎn)的引用.empty():

清空節(jié)點(diǎn)–清空元素中的所有后代節(jié)點(diǎn)(不包含屬性節(jié)點(diǎn)).復(fù)制節(jié)點(diǎn)clone():克隆匹配的DOM元素,返回值為克隆后的副本.但此時(shí)復(fù)制的新節(jié)點(diǎn)不具有任何行為.clone(true):復(fù)制元素的同時(shí)也復(fù)制元素中的的事件

替換節(jié)點(diǎn)replaceWith():將所有匹配的元素都替換為指定的HTML或DOM元素replaceAll():顛倒了的replaceWith()方法.注意:

若在替換之前,已經(jīng)在元素上綁定了事件,替換后原先綁定的事件會(huì)與原先的元素一起消失包裹節(jié)點(diǎn)wrap():將指定節(jié)點(diǎn)用其他標(biāo)記包裹起來(lái).該方法對(duì)于需要在文檔中插入額外的結(jié)構(gòu)化標(biāo)記非常有用,而且不會(huì)破壞原始文檔的語(yǔ)義.wrapAll():將所有匹配的元素用一個(gè)元素來(lái)包裹.而wrap()方法是將所有的元素進(jìn)行單獨(dú)包裹.wrapInner():將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用其他結(jié)構(gòu)化標(biāo)記包裹起來(lái)屬性操作attr():獲取html屬性和設(shè)置屬性當(dāng)為該方法傳遞一個(gè)參數(shù)時(shí),即為某元素的獲取指定屬性當(dāng)為該方法傳遞兩個(gè)參數(shù)時(shí),即為某元素設(shè)置指定屬性的值jQuery中有很多方法都是一個(gè)函數(shù)實(shí)現(xiàn)獲取和設(shè)置.

如:attr(),html(),text(),val(),height(),width(),css()等.removeAttr():刪除指定元素的指定屬性樣式操作獲取class和設(shè)置class:class是元素的一個(gè)屬性,所以獲取class和設(shè)置class都可以使用attr()方法來(lái)完成.追加樣式:addClass()移除樣式:removeClass()從匹配的元素中刪除全部或指定的class切換樣式:toggleClass()控制樣式上的重復(fù)切換.如果類(lèi)名存在則刪除它,如果類(lèi)名不存在則添加它.判斷是否含有某個(gè)樣式:hasClass()判斷元素中是否含有某個(gè)class,如果有,則返回true;否則返回false設(shè)置和獲取HTML,文本和值讀取和設(shè)置某個(gè)元素中的HTML內(nèi)容:html().該方法可以用于XHTML,但不能用于XML文檔讀取和設(shè)置某個(gè)元素中的文本內(nèi)容:text().該方法既可以用于XHTML也可以用于XML文檔.讀取和設(shè)置某個(gè)元素中的值:val()該方法類(lèi)似JavaScript中的value屬性.對(duì)于文本框,下拉列表框,單選框該方法可返回元素的值(多選框只能返回第一個(gè)值).如果為多選下拉列表框,則返回一個(gè)包含所有選擇值的數(shù)組val()方法的兩個(gè)練習(xí)獲得焦點(diǎn)沒(méi)輸入值輸入值提示：可以借助表單元素的defaultValue屬性提示：js中數(shù)組的表示方法[“1”,“2”]常用的遍歷節(jié)點(diǎn)方法取得匹配元素的所有子元素組成的集合:children().該方法只考慮子元素而不考慮任何后代元素.取得匹配元素后面緊鄰的同輩元素的集合(但集合中只有一個(gè)元素):next()取得匹配元素前面緊鄰的同輩元素的集合(但集合中只有一個(gè)元素):prev()取得匹配元素前后所有的同輩元素:siblings()CSS-DOM操作獲取和設(shè)置元素的樣式屬性:css()獲取和設(shè)置元素透明度:opacity屬性獲取和設(shè)置元素高度,寬度:height(),width().在設(shè)置值時(shí),若只傳遞數(shù)字,則默認(rèn)單位是px.如需要使用其他單位則需傳遞一個(gè)字符串,例如$(“p:first”).height(“2em”);獲取元素在當(dāng)前視窗中的相對(duì)位移:offset().其返回對(duì)象包含了兩個(gè)屬性:top,left.該方法只對(duì)可見(jiàn)元素有效jQuery中的事件--加載DOM在頁(yè)面加載完畢后,瀏覽器會(huì)通過(guò)JavaScript為DOM元素添加事件.在常規(guī)的JavaScript代碼中,通常使用window.onload方法,在jQuery中使用$(document).ready()

方法.事件綁定點(diǎn)擊提示：使用jQuery的is()

方法判斷元素是否可見(jiàn)對(duì)匹配的元素進(jìn)行特定的事件綁定:bind()實(shí)例合成事件hover():

模擬光標(biāo)懸停時(shí)間.當(dāng)光標(biāo)移動(dòng)到元素上時(shí),會(huì)觸發(fā)指定的第一個(gè)函數(shù),當(dāng)光標(biāo)移出這個(gè)元素時(shí),會(huì)觸發(fā)指定的第二個(gè)函數(shù).toggle():

用于模擬鼠標(biāo)連續(xù)單擊事件.第一次單擊元素,觸發(fā)指定的第一個(gè)函數(shù),當(dāng)再一次單擊同一個(gè)元素時(shí),則觸發(fā)指定的第二個(gè)函數(shù),如果有更多個(gè)函數(shù),則依次觸發(fā),直到最后一個(gè).toggle()的另一個(gè)作用:切換元素的可見(jiàn)狀態(tài).事件冒泡事件會(huì)按照DOM層次結(jié)構(gòu)像水泡一樣不斷向上只止頂端解決:在事件處理函數(shù)中返回false,會(huì)對(duì)事件停止冒泡.還可以停止元素的默認(rèn)行為.事件對(duì)象的屬性事件對(duì)象:當(dāng)觸發(fā)事件時(shí),事件對(duì)象就被創(chuàng)建了.在程序中使用事件只需要為函數(shù)添加一個(gè)參數(shù).該事件對(duì)象只有事件處理函數(shù)才能訪問(wèn)到.事件處理函數(shù)執(zhí)行完畢后,事件對(duì)象就被銷(xiāo)毀了.event.pageX,event.pageY:獲取到光標(biāo)相對(duì)于頁(yè)面的x,y坐標(biāo).移除事件移除某按鈕上的所有click事件:$(“btn”).unbind(“click”)移除某按鈕上的所有事件:$(“btn”).unbind();one():該方法可以為元素綁定處理函數(shù).當(dāng)處理函數(shù)觸發(fā)一次后,立即被刪除.即在每個(gè)對(duì)象上,事件處理函數(shù)只會(huì)被執(zhí)行一次.使用jQuery創(chuàng)建動(dòng)畫(huà)效果jQuery中的動(dòng)畫(huà):隱藏和顯示hide():

在HTML文檔中,為一個(gè)元素調(diào)用hide()方法會(huì)將該元素的display樣式改為none.代碼功能同css(“display”,“none”);show():

將元素的display樣式改為先前的顯示狀態(tài).以上兩個(gè)方法在不帶任何參數(shù)的情況下,作用是立即隱藏或顯示匹配的元素,不會(huì)有任何動(dòng)畫(huà).可以通過(guò)制定速度參數(shù)使元素動(dòng)起來(lái).以上兩個(gè)方法會(huì)同時(shí)減少(增大)內(nèi)容的高度,寬度和不透明度.jQuery中的動(dòng)畫(huà)(2)fadeIn(),fadeOut():只改變?cè)氐耐该鞫?fadeOut()會(huì)在指定的一段時(shí)間內(nèi)降低元素的不透明度,直到元素完全消失.fadeIn()則相反.slideDown(),slideUp():只會(huì)改變?cè)氐母叨?如果一個(gè)元素的display屬性為none,當(dāng)調(diào)用slideDown()方法時(shí),這個(gè)元素將由上至下延伸顯示.slideUp()方法正好相反,元素由下至上縮短隱藏.

jQuery中的動(dòng)畫(huà)(3)toggle():

切換元素的可見(jiàn)狀態(tài):如果元素時(shí)可見(jiàn)的,則切換為隱藏;如果元素時(shí)隱藏的,則切換為可見(jiàn)的.slideToggle():

通過(guò)高度變化來(lái)切換匹配元素的可見(jiàn)性.fadeTo():

把不透明度以漸近的方式調(diào)整到指定的值(0–1之間).

練習(xí)3:品牌列表注意:兩個(gè)過(guò)濾函數(shù)is和filter的使用更多知識(shí)請(qǐng)查閱PHP論壇練習(xí)4:超鏈接和圖片提示效果練習(xí)5:單行文本框的用戶(hù)體驗(yàn)練習(xí)6:多選框應(yīng)用練習(xí)7:下拉框應(yīng)用JQuery可以通過(guò)$.get()或$.post()方法來(lái)加載xml.JQuery解析XML與解析DOM一樣,可以使用find(),children()等函數(shù)來(lái)解析和用each()方法來(lái)進(jìn)行遍歷JQuery加載并解析XML練習(xí)8:使用JQuery實(shí)現(xiàn)級(jí)聯(lián)對(duì)話(huà)框練習(xí)9:使用JQuery實(shí)現(xiàn)在eclipse中安裝Aptana插件把下載好的插件里的內(nèi)容（只保留features和plugins這兩個(gè)文件夾）放在eclipse的aptana文件夾中在eclipse文件夾里新建一個(gè)links文件夾，里面再建一個(gè)aptana.link文件，內(nèi)容為path=/aptana讓Aptana提示jQueryDreamweaverCS4和Aptana都支持jQuery提示jQuery中的“$”及其作用1.“$”用作選擇器<scripttype="text/JavaScript"src="jquery-1.2.6.js"></script><scripttype="text/JavaScript">$(document).ready(function(){//頁(yè)面載入后執(zhí)行

$("h2>a").css("color","red"); $("h2>a").css("textDecoration","none");});</script>則使得本來(lái)不支持子選擇器的IE6也能支持子選擇器了,jQuery對(duì)象和DOM對(duì)象的區(qū)別注意用“$”選中的元素（jQuery對(duì)象）和用DOM方法選中的元素（DOM對(duì)象）含義并不相同varone=getElementById(“one”);$(“#one”)表現(xiàn)在jQuery對(duì)象的方法和屬性與DOM對(duì)象的并不相同，如one.onclick()$(“#one”).click()jQuery中的“$”及其作用2.“$”用作功能函數(shù)前綴(1)遍歷數(shù)組$.each([0,1,2],function(i){document.write("Item#"+i+"<br/>");});(2)遍歷選擇器中的元素$(function(){ $("img").each(function(index){ this.title="這是第"+(index+1)+"幅圖，路徑是："+this.src; });});jQuery中的“$”及其作用3.用作$(document).ready()$(document).ready(function(){("#loading").css("display","none");})jQuery的寫(xiě)法則會(huì)使頁(yè)面僅加載完DOM結(jié)構(gòu)后就執(zhí)行，即加載完html文檔后，還沒(méi)加載圖像等其他文件就執(zhí)行ready()函數(shù)，給圖像添加“display:none”的樣式，因此id為“l(fā)oading”的圖片不可能被顯示。所以$(document).ready()比window.onload載入執(zhí)行更快$(document).ready()比window.onload的比較$(document).ready()的優(yōu)勢(shì)在DOM文檔載入后就執(zhí)行，載入速度更快；如果找不到DOM中的元素，能夠自動(dòng)容錯(cuò)；在頁(yè)面中多個(gè)地方使用ready()方法不會(huì)發(fā)生沖突jQuery中的“$”及其作用4.創(chuàng)建DOM元素使用“$”可以直接創(chuàng)建DOM元素：varnewP=$("<p>武廣高速鐵路即將通車(chē)！</p>");創(chuàng)建了DOM元素后，將這個(gè)元素插入到在頁(yè)面的某個(gè)具體位置上newP.insertAfter(“#chapter”);//將創(chuàng)建的newP元素插入到ID為#chapter的元素之后或者newP.appendTo("body");

創(chuàng)建DOM元素的方法總結(jié)將新元素插入到匹配元素的里的方法：append()appendTo()prepend()prependTo()append()表示在原有元素中插入新元素$("body")append(newP);appendTo()表示將新元素插入到原有元素里newP.appendTo("body");將新元素插入到匹配元素的盤(pán)邊after()insertafter()before()insertbefore()將新元素包含住匹配的元素wrap()jQuery的選擇器要使某個(gè)動(dòng)作應(yīng)用于特定的html元素，需要有辦法找到這個(gè)元素。在jQuery中，執(zhí)行這一任務(wù)的方法稱(chēng)為jQuery選擇器。jQuery選擇器把網(wǎng)頁(yè)的結(jié)構(gòu)和行為完全分離。利用jQuery選擇器，能快速地找出特定的html元素，然后輕松的給元素添加一系列行為動(dòng)作。jQuery的選擇器主要有三大類(lèi)，即CSS3的基本選擇器，CSS3的位置選擇器和過(guò)濾選擇器。jQuery中的常用方法1.find()方法find()方法可以通過(guò)查詢(xún)獲取新的元素集合，通過(guò)匹配選擇器來(lái)篩選元素，例如：$("div").find("p");2.hover方法一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法。3.toggleclass方法toggleclass方法用于切換元素的樣式。jQuery的應(yīng)用舉例1.制作折疊式菜單（Accordion）折疊式菜單是和Tab面板一樣流行的高級(jí)網(wǎng)頁(yè)元素，它是一種二級(jí)菜單，當(dāng)點(diǎn)擊某個(gè)主菜單項(xiàng)時(shí)，就會(huì)以滑動(dòng)的方式展開(kāi)它下面的二級(jí)菜單，同時(shí)自動(dòng)收縮隱藏其他主菜單項(xiàng)的二級(jí)菜單，如圖7-48所示。因此折疊式菜單有一個(gè)很好聽(tīng)的英文名叫“Accordion”（手風(fēng)琴），它的折疊方式是不是有點(diǎn)像在拉手風(fēng)琴呢？1.制作折疊式菜單（Accordion）<scrip

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論