|
今日的學(xué)習(xí)再結(jié)合昨天的JavaScriptDOM的內(nèi)容，讓我對(duì)此十分清晰。JQuery原則：“write less, do more.”，這句話已充分說(shuō)明它對(duì)簡(jiǎn)化使用JavaScriptDOM編程的功力！ 每位老師都有自己的教學(xué)方式，可能根據(jù)教授的內(nèi)容的不同教學(xué)方式也有輕微的變化。老佟是一位非常有經(jīng)驗(yàn)的軟件教師，之前他在大連的軟件公司做培訓(xùn)。經(jīng)過(guò)多年的總結(jié)，他已經(jīng)有自己一套成熟的教學(xué)方式。這個(gè)方式讓我十分喜歡！至于是什么方式，你自己來(lái)體驗(yàn)吧！哈哈~~ 從學(xué)習(xí)JavaWEB、Struts1到現(xiàn)在的JavaScript，我已經(jīng)找到了WEB應(yīng)用開發(fā)的核心——MVC。是的，就是MVC。其實(shí)MVC應(yīng)該是根據(jù)WEB的核心被創(chuàng)造出來(lái)的模式，難道不是嗎！這一整套工具，就是分別對(duì)視圖層、控制層和數(shù)據(jù)模型層的操作。似乎現(xiàn)在才找到了一些感覺，因?yàn)橐郧皩W(xué)習(xí)servlet時(shí)，知道它可以處理用戶的請(qǐng)求，老師講什么就學(xué)習(xí)什么。但現(xiàn)在有思想了，老師你無(wú)論講什么，我都知道它應(yīng)該用在哪一層，有什么用途，這樣提高了我的學(xué)習(xí)效率。這是一個(gè)非常好的成長(zhǎng)！對(duì)以后的成長(zhǎng)大有幫助。 接下來(lái)這些靈散的知識(shí)就不多了，然后就開始做項(xiàng)目了。兩個(gè)字，快、爽！Ok，開始整理學(xué)習(xí)內(nèi)容。 一、JQuery與JavaScript 1.JavaScript庫(kù) 使用過(guò)JavaScriptDOM的人都應(yīng)該知道（比如昨天的練習(xí)），使用JSDOM進(jìn)行頁(yè)面的操作是十分麻煩的。比如獲取、修改及添加子節(jié)點(diǎn)等這些操作。如果操作一個(gè)復(fù)雜的頁(yè)面呢？Ok，JavaScript庫(kù)因此誕生了。 目前比較常見的JavaScript庫(kù)有：  2.JQuery簡(jiǎn)介 JQuery是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript庫(kù)。 JQuery理念：write less , do more. JQuery優(yōu)勢(shì)：輕量級(jí)、強(qiáng)大的選擇器、出色的 DOM 操作的封裝、可靠的事件處理機(jī)制、完善的Ajax、出色的瀏覽器兼容性、鏈?zhǔn)讲僮鞣绞健? 二、JQuery對(duì)象與DOM對(duì)象 1.JQuery對(duì)象 JQuery對(duì)象就是使用“$(“DOMObj”)”，將DOM對(duì)象包裝起來(lái)。一般在JQuery對(duì)象前面加上“$”這樣與DMO對(duì)象區(qū)分，它已經(jīng)是一種公認(rèn)的命名約定。JQuery對(duì)象不能調(diào)用DOM對(duì)象的屬性和方法，同樣DOM對(duì)象也不能調(diào)用JQuery對(duì)象的屬性和方法。 2.JQuery對(duì)象轉(zhuǎn)成DOM對(duì)象 如果想使用JQuery對(duì)象調(diào)用DOM對(duì)象的方法，怎么辦？應(yīng)該將JQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象，JQuery對(duì)象是一個(gè)數(shù)組對(duì)象，這個(gè)很特別。所以只需調(diào)用JQueryObj[x]或JQueryObj.get(X);即可轉(zhuǎn)換為DOM對(duì)象。 3.DOM對(duì)象轉(zhuǎn)換成JQuery對(duì)象 使用“$(“DOMObj”)”將DOM對(duì)象包裝起來(lái)就可以了。 三、JQuery選擇器 選擇器是JQuery的根基，在JQuery 中，對(duì)事件處理，遍歷DOM和Ajax操作都依賴于選擇器。這也是今天我們學(xué)習(xí)的重點(diǎn)內(nèi)容。 1.基本選擇器 基本選擇器是JQuery中最常用的選擇器，也是最簡(jiǎn)單的選擇器，它通過(guò)元素id、class 和標(biāo)簽名來(lái)查找DOM元素。這個(gè)非常重要，下面的內(nèi)容都是以此為基礎(chǔ)，逐級(jí)提高的。 1).“$(“#id”)”，獲取id指定的元素，id是全局唯一的，所以它只有一個(gè)成員。 2).“$(“.class”)”，獲取class指定的元素，不同的元素可以具有相同的class屬性，所以它可能具有多個(gè)成員。 3).“$(“element”)”，獲取element（元素名，比如div、table等）指定的元素，它可能具有多個(gè)成員。 4).“$(“*”)”，獲取所有元素，相當(dāng)于document。 5).“$(“selector1,selector2,…,selectorN”)”，將每個(gè)選擇器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。 2.層次選擇器 什么是層次？層次就是父子關(guān)系、兄弟關(guān)系的節(jié)點(diǎn)。所以，層次選擇器就是用來(lái)獲取指定元素的父子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)。 1).“$(“ancestor descendant”)”，獲取ancestor元素下邊的所有元素。 2).“$(“parent > child”)”，獲取parent元素下邊的所有子元素（只包含第一層子元素）。 3).“$(“pre + next”)”，獲取緊隨pre元素的后一個(gè)兄弟元素。 4).“$(“pre ~ siblings”)”，獲取pre元素后邊的所有兄弟元素。 3.過(guò)濾選擇器 過(guò)濾？肯定是要添加過(guò)濾條件的。通過(guò)“:”添加過(guò)濾條件，比如“$(“div:first”)”返回div元素集合的第一個(gè)div元素，first是過(guò)濾條件。 按照不同的過(guò)濾規(guī)則，過(guò)濾選擇器可以分為基本過(guò)濾，內(nèi)容過(guò)濾，可見性過(guò)濾，屬性過(guò)濾，子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器。 1). 基本過(guò)濾選擇器 a) “:first”，選取第一個(gè)元素，別忘記它也是被放在一個(gè)集合里哦！因?yàn)镴Query它是DOM對(duì)象的一個(gè)集合。如，“$("tr:first")”返回所有tr元素的第一個(gè)tr元素，它仍然被保存在集合中。 b) “:last”，選取最后一個(gè)元素。如，“$("tr:last")”返回所有tr元素的最后一個(gè)tr元素，它仍然被保存在集合中。 c) “:not(selector)”，去除所有與給定選擇器匹配的元素。如，“$("input:not(:checked)")”返回所有input元素，但去除被選中的元素（單選框、多選框）。 d) “:even”，選取所有元素中偶數(shù)的元素。因?yàn)镴Query對(duì)象是一個(gè)集合，這里的偶數(shù)指的就是集合的索引，索引從0開始。 e) “:odd”，選取所有元素中奇數(shù)的元素，索引從0開始。 f) “:eq(index)”，選取指定索引的元素，索引從0開始。 g) “:gt(index)”，選取索引大于指定index的元素，索引從0開始。 h) “:lt(index)”，選取索引小于指定index的元素，索引從0開始。 i) “:header”，選取所有的標(biāo)題元素，如hq、h2等。 j) “:animated”，選取當(dāng)前正在執(zhí)行的所有動(dòng)畫元素。 2). 內(nèi)容過(guò)濾選擇器 它是對(duì)元素和文本內(nèi)容的操作。 a) “:contains(text)”，選取包含text文本內(nèi)容的元素。 b) “:empty”，選取不包含子元素或者文本節(jié)點(diǎn)的空元素。 c) “:has(selector)”，選取含有選擇器所匹配的元素的元素。 d) “:parent”，選取含有子元素或文本節(jié)點(diǎn)的元素。（它是一個(gè)父節(jié)點(diǎn)） 3). 可見性過(guò)濾選擇器 根據(jù)元素的可見與不可見狀態(tài)來(lái)選取元素。 “:hidden”，選取所有不可見元素。 “:visible”，選擇所有可見元素。 可見選擇器：hidden 不僅包含樣式屬性 display 為 none 的元素，也包含文本隱藏域 (<input type=“hidden”>)和 visible:hidden 之類的元素。 4).屬性過(guò)濾選擇器 通過(guò)元素的屬性來(lái)選取相應(yīng)的元素。 a) “[attribute]”，選取擁有此屬性的元素。 b) “[attribute=value]”，選取指定屬性值為value的所有元素。 c) “[attribute !=value]”，選取屬性值不為value的所有元素。 d) “[attribute ^= value]”，選取屬性值以value開始的所有元素。 e) “[attribute $= value]”，選取屬性值以value結(jié)束的所有元素。 f) “[attribute *= value]”，選取屬性值包含value的所有元素。 g) “[selector1] [selector2]…[selectorN]”，復(fù)合性選擇器，首先經(jīng)[selector1]選擇返回集合A，集合A再經(jīng)過(guò)[selector2]選擇返回集合B，集合B再經(jīng)過(guò)[selectorN]選擇返回結(jié)果集合。 5). 子元素過(guò)濾選擇器 一看名字便是，它是對(duì)某一元素的子元素進(jìn)行選取的。 a) “:nth-child(index/even/odd)”，選取索引為index的元素、索引為偶數(shù)的元素、索引為奇數(shù)的元素。 l nth-child(even/odd)：能選取每個(gè)父元素下的索引值為偶(奇)數(shù)的元素。 l nth-child(2)：能選取每個(gè)父元素下的索引值為 2 的元素。 l nth-child(3n)：能選取每個(gè)父元素下的索引值是 3 的倍數(shù)的元素。 l nth-child(3n + 1)：能選取每個(gè)父元素下的索引值是 3n + 1的元素。 b) “:first-child”，選取第一個(gè)子元素。 c) “:last-child”，選取最后一個(gè)子元素。 d) “:only-child”，選取唯一子元素，它的父元素只有它這一個(gè)子元素。 6). 表單過(guò)濾選擇器 選取表單元素的過(guò)濾選擇器。 a) “:input”，選取所有<input>、<textarea>、<select >和<button>元素。 b) “:text”，選取所有的文本框元素。 c) “:password”，選取所有的密碼框元素。 d) “:radio”，選取所有的單選框元素。 e) “:checkbox”，選取所有的多選框元素。 f) “:submit”，選取所有的提交按鈕元素。 g) “:image”，選取所有的圖像按鈕元素。 h) “:reset”，選取所有重置按鈕元素。 i) “:button”，選取所有按鈕元素。 j) “:file”，選取所有文件上傳域元素。 k) “:hidden”，選取所有不可見元素。 7).表單對(duì)象屬性過(guò)濾選擇器 選取表單元素屬性的過(guò)濾選擇器。 “:enabled”，選取所有可用元素。 “:disabled”，選取所有不可用元素。 “:checked”，選取所有被選中的元素，如單選框、復(fù)選框。 “:selected”，選取所有被選中項(xiàng)元素，如下拉列表框、列表框。 四、JQuery中的DOM操作 一種與瀏覽器，平臺(tái)，語(yǔ)言無(wú)關(guān)的接口。使用該接口可以輕松地訪問(wèn)頁(yè)面中所有的標(biāo)準(zhǔn)組件。 DOM Core：DOM Core 并不專屬于 JavaScript，任何一種支持 DOM 的程序設(shè)計(jì)語(yǔ)言都可以使用它。它的用途并非僅限于處理網(wǎng)頁(yè)，也可以用來(lái)處理任何一種是用標(biāo)記語(yǔ)言編寫出來(lái)的文檔，例如：XML。 HTML DOM：使用 JavaScript 和 DOM 為 HTML 文件編寫腳本時(shí)，有許多專屬于HTML-DOM的屬性。 CSS-DOM：針對(duì)于CSS操作，在JavaScript中，CSS-DOM 主要用于獲取和設(shè)置 style 對(duì)象的各種屬性。 1.查找節(jié)點(diǎn) 請(qǐng)見上面的“基本選擇器”。 2.創(chuàng)建節(jié)點(diǎn) 使用JQuery的工廠函數(shù)，創(chuàng)建一個(gè)新節(jié)點(diǎn)：var $newNode = $(“<p>你好</p>”);，然后將新節(jié)點(diǎn)插入到指定元素節(jié)點(diǎn)處。 3.插入節(jié)點(diǎn) 將新創(chuàng)建的節(jié)點(diǎn)，或獲取的節(jié)點(diǎn)插入指定的位置。 “$node.append($newNode)”，向每個(gè)匹配的元素內(nèi)部的結(jié)尾處追加結(jié)尾處。如，“$("p").append("<b>Hello</b>");”將"<b>Hello</b>"添加到"p"內(nèi)部的結(jié)尾處。 “$newNode.appendTo($node)”，將新元素追加到每個(gè)匹配元素內(nèi)部的結(jié)尾處。 “$node.prepend($newNode)”，向每個(gè)匹配的元素內(nèi)部的結(jié)尾處追加開始處。如，“$("p").prepend("<b>Hello</b>");”將"<b>Hello</b>"添加到"p"內(nèi)部的起始處。 “$newNode.prependTo($node)”， 將新元素追加到每個(gè)匹配元素內(nèi)部的開始處。 “$node.after($newNode)”，向每個(gè)匹配的元素的之后插入內(nèi)容，是并列兄弟。如，“$("p").after("<b>Hello</b>");”將"<b>Hello</b>"插入到"p"的后邊。它們是兄弟關(guān)系。 “$newNode.insertAfter($node)”，將新元素插入到每個(gè)匹配元素之后。 “$newNode.before($node)”，向每個(gè)匹配的元素的之前插入內(nèi)容。如，“$("p").before("<b>Hello</b>");”將"<b>Hello</b>"插入到"p"的前面，它們是兄弟關(guān)系。 “$node.insertBefore($newNode)”，將新元素插入到每個(gè)匹配元素之前。 注意：如果插入的節(jié)點(diǎn)是不是新創(chuàng)建的，插入將變成移動(dòng)操作。所以，在插入這樣的節(jié)點(diǎn)之前應(yīng)該使用clone的節(jié)點(diǎn)。 4.刪除節(jié)點(diǎn) 從DOM中刪除所有匹配的元素。如，“$("p").remove(".hello");”刪除所為class屬性值為hello的p元素，還有它下面的所有元素。 從DOM中清除所有匹配的元素。如，“$("p").empty();”清除所有p元素，還有它下面的所有元素。 5.復(fù)制節(jié)點(diǎn) 克隆匹配的DOM元素。如，“$("p").clone();”返回克隆后的副本，但不具有任何行為。如果要將DOM的事件一起克隆，應(yīng)該使用“$("p").clone(true);”。 6.替換節(jié)點(diǎn) 將所有匹配的元素都替換為指定的 HTML 或 DOM 元素。如，$("p").replaceWith("<b>Paragraph. </b>");，將所有p元素，替換為"<b>Paragraph. </b>"。 與replaceWith相返：$("<b>Paragraph. </b>").replaceAll("p");。 7.包裹節(jié)點(diǎn) wrap()：將指定節(jié)點(diǎn)用其他標(biāo)記包裹起來(lái)。該方法對(duì)于需要在文檔中插入額外的結(jié)構(gòu)化標(biāo)記非常有用， 而且不會(huì)破壞原始文檔的語(yǔ)義。如，“$("p").wrap("<div class='wrap'></div>");”。每個(gè)p元素被包裹到<div>中。 wrapAll()：將所有匹配的元素用一個(gè)元素來(lái)包裹。而wrap()方法是將所有的元素進(jìn)行單獨(dú)包裹。如，“$("p").wrapAll("<div></div>");”，將所有p元素包裹到<div>中。 wrapInner()：將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用其他結(jié)構(gòu)化標(biāo)記包裹起來(lái)。如，“$("p").wrapInner("<b></b>");”， <b>被每一個(gè)p元素包裹。 8.屬性設(shè)置 attr()：獲取屬性和設(shè)置屬性。 當(dāng)為該方法傳遞一個(gè)參數(shù)時(shí)，即為某元素的獲取指定屬性。如，“$("img").attr("src");”，獲取img元素的src屬性值。 當(dāng)為該方法傳遞兩個(gè)參數(shù)時(shí)，即為某元素設(shè)置指定屬性的值。如，“$("img").attr("src","test.jpg");”，設(shè)置img元素的src屬性值為test.jsp。 jQuery 中有很多方法都是一個(gè)函數(shù)實(shí)現(xiàn)獲取和設(shè)置。如：attr()，html()，text()，val()，height()，width()，css()等。 removeAttr()：刪除指定元素的指定屬性。 9.樣式操作 可以通過(guò)“attr()”設(shè)置或獲取css樣式。 追加樣式：addClass() 。如，“$("p").addClass("selected");”，向所有P元素中追加“selected”樣式。 移除樣式：removeClass() --- 從匹配的元素中刪除全部或指定的class。如，“$("p").removeClass("selected");”，刪除所有P元素中的“selected”。 切換樣式：toggleClass() --- 控制樣式上的重復(fù)切換。如果類名存在則刪除它，如果類名不存在則添加它。如，“$("p").toggleClass("selected");”，所有的P元素中，如果存在“selected”樣式就刪除“selected”樣式，否則就添加“selected”樣式。 判斷是否含有某個(gè)樣式：hasClass() --- 判斷元素中是否含有某個(gè) class，有返回 true； 否則返回 false。如，“$(this).hasClass("protected")”，判斷當(dāng)前節(jié)點(diǎn)是否有“protected”樣式。 10.設(shè)置或獲取HTML、文本和值 讀取和設(shè)置某個(gè)元素中的 HTML 內(nèi)容： html()，該方法可以用于 XHTML，但不能用于 XML 文檔。 讀取和設(shè)置某個(gè)元素中的文本內(nèi)容：text()，該方法既可以用于 XHTML 也可以用于 XML 文檔。 讀取和設(shè)置某個(gè)元素中的值：val()，該方法類似 JavaScript 中的 value 屬性。對(duì)于文本框，下拉列表框，單選框該方法可返回元素的值(多選框只能返回第一個(gè)值)。如果為多選下拉列表框，則返回一個(gè)包含所有選擇值的數(shù)組。 11.常用遍歷節(jié)點(diǎn)的方法 取得匹配元素的所有子元素組成的集合：children()。該方法只考慮第一層子元素而不考慮任何后代元素。 取得匹配元素后面緊鄰的兄弟元素的集合(但集合中只有一個(gè)元素)：next()。 取得匹配元素前面緊鄰的兄弟元素的集合(但集合中只有一個(gè)元素)：prev()。 取得匹配元素前后所有的兄弟元素: siblings()。 12.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ì)可見元素有效。 五、JQuery中的事件 1.加載DOM 在頁(yè)面加載完畢后，瀏覽器會(huì)通過(guò) JavaScript 為 DOM 元素添加事件。在常規(guī)的 JavaScript 代碼中，通常使用 window.onload 方法，在JQuery 中使用$(document).ready() 方法。JQuery中的簡(jiǎn)化寫法“$()”。在window.onload中注冊(cè)事件時(shí)，只能在一個(gè)window.onload體中注冊(cè)。但使用JQuery，可以在多個(gè)$(document).ready()或$()中注冊(cè)。 2.事件綁定 對(duì)匹配的元素對(duì)指定的事件綁定。如，昨天我們?cè)趙indow.onload中綁定事件的方法：“$("p").onclick(function(){ alert( $(this).text() ); });” 在JQuery的$(document).ready()中可以這樣綁定：“$("p").click(function(){ alert( $(this).text() ); });” 使用bind()，可以這樣綁定：$("p").bind("click", function(){ alert( $(this).text() ); }); 3.合成事件 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ù)。如，懸停效果：$("td").hover( function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");}); toggle()：用于模擬鼠標(biāo)連續(xù)單擊事件。第一次單擊元素，觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再一次單擊同一個(gè)元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)，如果有更多個(gè)函數(shù)，則依次觸發(fā)，直到最后一個(gè)。如，設(shè)置元素的選擇與非選中效果： $("td").toggle( function () {$(this).addClass("selected");}, function () {$(this).removeClass("selected");}); 使用toggle()而不傳遞參數(shù)，效果為切換元素的可見狀態(tài)。 4.事件的冒泡 事件會(huì)按照 DOM 層次結(jié)構(gòu)像水泡一樣不斷向上只止頂端。 解決：在事件處理函數(shù)中返回 false，會(huì)對(duì)事件停止冒泡。還可以停止元素的默認(rèn)行為。 目前的所有UI交互或其事件，都支持這個(gè)特性。在自己的事件處理函數(shù)返回false將中止事件的繼續(xù)向下傳遞。返回true事件繼續(xù)向下傳遞。 5.事件對(duì)象的屬性 事件對(duì)象：當(dāng)觸發(fā)事件時(shí)，事件對(duì)象就被創(chuàng)建了。在程序中使用事件只需要為處理函數(shù)添加一個(gè)參數(shù)。在事件處理函數(shù)中使用些參數(shù)。如，獲取事件發(fā)生時(shí)，相對(duì)于頁(yè)面的位置：event.pageX, event.pageY，event是事件處理函數(shù)的參數(shù)。 6.移除事件 移除某按鈕上的所有click 事件：$(“btn”).unbind(“click”) 移除某按鈕上的所有事件：$(“btn”).unbind(); one()：該方法可以為元素綁定處理函數(shù)。當(dāng)處理函數(shù)觸發(fā)一次后，事件立即被刪除。即在每個(gè)對(duì)象上，事件處理函數(shù)只會(huì)被執(zhí)行一次。 六、JQuery中的DOM動(dòng)畫 通過(guò)設(shè)置DOM對(duì)象的顯示與隱藏方式，可以產(chǎn)生動(dòng)畫效果。 1.無(wú)動(dòng)畫效果的隱藏與顯示 hide()：在HTML文檔中，為一個(gè)元素調(diào)用hide()方法會(huì)將該元素的display樣式改為none。代碼功能同css(“display”, “none”);相同。 show()：將元素的display樣式改為先前的顯示狀態(tài)。 toggle()：切換元素的可見狀態(tài)：如果元素時(shí)可見的，則切換為隱藏；如果元素時(shí)隱藏的，則切換為可見的。 2.通過(guò)設(shè)置透明度效果的隱藏與顯示，達(dá)到淡入淡出的動(dòng)畫效果 fadeIn()，fadeOut()：只改變?cè)氐耐该鞫取adeOut() 會(huì)在指定的一段時(shí)間內(nèi)降低元素的不透明度，直到元素完全消失。fadeIn() 則相反。如，用600毫秒緩慢的將段落淡入：$("p").fadeIn("slow");。 fadeTo()：把不透明度以漸近的方式調(diào)整到指定的值(0 – 1 之間)。并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。如，用200毫秒快速將段落的透明度調(diào)整到0.25，動(dòng)畫結(jié)束后，顯示一個(gè)“Animation Done”信息框：“$("p").fadeTo("fast", 0.25, function(){ alert("Animation Done."); });”。 3.通過(guò)設(shè)置高度效果的隱藏與顯示，達(dá)到滑下與收起的動(dòng)畫效果 slideDown()，slideUp()：只會(huì)改變?cè)氐母叨取Ｈ绻粋€(gè)元素的display屬性為none，當(dāng)調(diào)用slideDown() 方法時(shí)，這個(gè)元素將由上至下延伸顯示。slideUp() 方法正好相反，元素由下至上縮短隱藏。如，用600毫秒緩慢的將段落滑下：$("p").slideDown("slow");。 slideToggle()：通過(guò)高度變化來(lái)切換匹配元素的可見性。如，200毫秒快速將段落滑上或滑下，動(dòng)畫結(jié)束后，會(huì)顯示一個(gè)“Animation Done”信息框：“$("p").slideToggle("fast",function(){ alert("Animation Done."); });”。 使用JavaScript、JQuery可以處理當(dāng)前頁(yè)面的動(dòng)態(tài)更新，再結(jié)合CSS樣式可以做出十分漂亮的UI，甚至比桌面軟件UI漂亮的多。JavaScript的編寫與調(diào)試非常麻煩，所以也有一些公司出品了專門針對(duì)JavaScript應(yīng)用的簡(jiǎn)化開發(fā)，比如Google出品的GWT，可以像使用Java編寫swing那樣編寫JavaScript。它為用戶提供像swing那樣的UI接口與事件等操作并且支持JAVA的核心庫(kù)。使用GWT自己的編譯器，可以將JAVA代碼編譯為JavaScript代碼、CSS樣式文件和HTML。 |
|
|
