HTML教程(第四章).pptx

1、jQuery概述及開發(fā)環(huán)境搭建,1.概述 jQuery是一個(gè)開源的、優(yōu)秀的Javascript框架，集CSS、DOM、Ajax操作于一體。它的主旨是“以更少的代碼。實(shí)現(xiàn)更多的功能”?？梢酝ㄋ椎恼J(rèn)為，它就是Javascript函數(shù)庫。 它具有以下幾個(gè)基本功能： (1)訪問和操作DOM元素 使用jQuery，可以很方便地獲取和修改頁面中的某元素，無論是刪除、移動(dòng)還是復(fù)制某元素，jQuery都提供了一整套完整方便、快捷的方法。 (2)控制頁面樣式 通過引入jQuery，開發(fā)人員可以很快捷地控制頁面的CSS樣式。 (3)對頁面事件的處理 引入jQuery后，可以使頁面的表現(xiàn)層與功能開發(fā)分離，通過事件綁

2、定，輕松地實(shí)現(xiàn)二者的結(jié)合。,(4)大量插件在頁面中的運(yùn)用 在引入jQuery后，還可以使用大量的插件來完善頁面的功能和效果，如表單插件、UI插件，這些插件極大的豐富了頁面的展示效果。 (5)與Ajax的完美結(jié)合 Ajax的異步讀取服務(wù)器數(shù)據(jù)的方法，極大地方便了程序的開發(fā)，加深了用戶的頁面體驗(yàn)度；而jQuery不僅完善了原有的功能，而且減少了代碼的書寫，通過其內(nèi)部對象或函數(shù)，加上幾行代碼就可以實(shí)現(xiàn)復(fù)雜的功能。 2.搭建開發(fā)環(huán)境 (1)在jQuery的官方網(wǎng)站下載的jQuery文件庫。(最新版本為2.0.2，但本次案例都沒有使用最新版本，使用了舊的版本1.9.1。) 下載后，會(huì)看到j(luò)query-1

3、.9.1.min.js的文件。 (2)使用標(biāo)簽引用下載的jQuery文件。 例如： ,jQuery的簡單應(yīng)用,例： window.onload = function() alert(open_1); ; window.onload = function() alert(open_2); ; $(document).ready(function() alert(ready_1); ); $(document).ready(function() alert(ready_2); ); ,Javascript: window.onload必須在頁面全部加載完畢后才能執(zhí)行。 多個(gè)onload事件，只會(huì)執(zhí)

4、行最后一個(gè)。,jQuery: $(document).ready在頁面框架下載完畢后就執(zhí)行，早于onload事件，效率更高。并且可多個(gè)執(zhí)行。 $(document) 表示獲取當(dāng)前頁面的Document對象。,$是jQuery的標(biāo)志，無論是頁面元素的選擇、功能函數(shù)的前綴，都需要使用該符號。,(見jQuery_simple.html),$符號在jQuery中一般用于兩個(gè)地方： 1.$()函數(shù) 語法一：$(選擇器表達(dá)式) 例如： $(#divOne) $(#divOne .cls) 語法二：$(字符串) 例如： $(); 2.聲明jQuery對象 語法：$對象名稱 例如： var $doc = $(

5、document); var $divMain = $(#divMain); var $inputList = $();,下章介紹，語法與css選擇器基本一致。 用于獲取頁面元素。,創(chuàng)建了一個(gè)img元素對象。,jQuery選擇器,jQuery選擇器繼承了CSS選擇器的大部分語法，允許通過標(biāo)簽名、屬性名或內(nèi)容對DOM元素進(jìn)行快速、準(zhǔn)確的選擇，而不必?fù)?dān)心瀏覽器的兼容性，通過jQuery選擇器對頁面元素的精確定位，能夠完成元素屬性和行為的處理。 根據(jù)所獲取頁面中元素的不同，分為：,jQuery選擇器,基本選擇器,層次選擇器,過濾選擇器,表單選擇器,簡單過濾選擇器,內(nèi)容過濾選擇器,可見型性過濾選擇器,

6、屬性過濾選擇器,子元素過濾選擇器,表單對象過濾選擇器,css()方法返回或設(shè)置匹配的元素的一個(gè)或多個(gè)樣式屬性。 共兩個(gè)參數(shù)，第一個(gè)參數(shù)為css屬性名，第二個(gè)參數(shù)為css屬性值，可以為具體數(shù)值，也可以是創(chuàng)建函數(shù)進(jìn)行處理。,1.基本選擇器 基本選擇器是使用最頻繁的選擇器。它由元素ID、class屬性、元素名、通配符*、多個(gè)選擇組成，與css選擇器語法完全一致。 例如： ID CLASS SPAN $(#divOne).css(display, block); $(div).css(display, block); $(.clsFrame .clsOne).css(display, block);

7、$(*).css(display, block); $(#divOne, span).css(display, block); ,(見selector_basic.html),ID匹配元素。,元素名匹配元素。,類匹配元素。,匹配所有元素。,多個(gè)選擇器匹配元素。,2.層次選擇器 層次選擇器通過DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，與css選擇器語法完全一致。 例如： Left Right_1 Right_2,匹配子元素。,匹配后代元素。, $(#divMid).css(display, block); $(div span).css(display, b

8、lock); $(div span).css(display, block); $(#divMid + div).css(display, block); $(#divMid).next().css(display, block); $(#divMid div).css(display, block); $(#divMid).nextAll().css(display, block); $(#divMid).siblings(div).css(display, block); ,(見selector_hierarchy.html),返回所有相鄰的div元素。,返回后面所有的同胞元素。,返回下一

9、個(gè)相鄰的同胞元素。,匹配后面相鄰的同胞元素。,匹配后面所有的指定類型的同胞元素。,本例中,效果相同。,本例中,效果相同。,3.過濾選擇器 過濾選擇器根據(jù)某類過濾進(jìn)行元素的匹配，書寫時(shí)以冒號”:”開頭。與CSS樣式偽類和偽元素幾乎一致。 以簡單過濾選擇器為例： Item 1 Item 2 Item 3 Item 4 , $(li:first).addClass(GetFocus); $(li:last).addClass(GetFocus); $(li:not(.NotClass).addClass(GetFocus); $(li:eq(1).addClass(GetFocus); $(li:g

10、t(1).addClass(GetFocus); $(li:lt(4).addClass(GetFocus); ,addClass() 方法向被選元素添加一個(gè)或多個(gè)類選擇器名。,匹配li元素集合的第一個(gè)。,匹配li元素集合的最后一個(gè)。,匹配指定選擇器以外的所有l(wèi)i元素。,匹配li集合中指定索引值的那個(gè)元素，以0開始計(jì)數(shù)。,匹配li集合中大于指定索引值的元素，以0開始計(jì)數(shù)。,匹配li集合中小于指定索引值的元素，以0開始計(jì)數(shù)。,(見selector_filter_simple.html),4.表單選擇器 無論是提交還是傳遞數(shù)據(jù)，表單在頁面中的作用是顯而易見的。為了使用戶能更加方便地、高效地使用表單

11、,jQuery選擇器引入了表單選擇器，這是CSS選擇器沒有的，通過它可以在頁面中快速定位某表單對象。 例如： Textarea $(#form1 :input).addClass(colorA); $(#form1 :button).addClass(colorB); ,:input獲取所有input、textarea、select標(biāo)簽元素。,:button獲取所有按鈕。,jQuery對DOM的操作,1.訪問元素 (1)元素屬性操作 獲取元素屬性：attr(“name“) 設(shè)置單個(gè)元素屬性：attr(“name“,value) 設(shè)置多個(gè)元素屬性：attr(name1:value1,name2:

12、value2,.) 刪除元素屬性：removeAttr(“name“) 例如: var srcStr = $(img).attr(src); $(img).attr(title,This is a picture); $(img).attr(id:img1, title:This is a picture); $(img).removeAttr(title); ,name：屬性名稱 value：屬性值,(見dom_attr_control.html),獲取img標(biāo)簽的src屬性值。,設(shè)置單個(gè)或多個(gè)屬性。,刪除title屬性。,(2)元素內(nèi)容操作 獲取或設(shè)置元素的HTML內(nèi)容(類似JS中的inn

13、erHTML屬性)：html(val) 獲取或設(shè)置元素的文本內(nèi)容(類似JS中的innerText屬性)：text(val) 例如: Write Less Do More var htmlStr = $(#divShow).html(); var textStr = $(#divShow).text(); $(#divHTML).html(htmlStr); $(#divText).text(textStr); ,元素的HTML內(nèi)容，無參數(shù)表示獲取，有參數(shù)表示設(shè)置。,元素的文本內(nèi)容,(見dom_attr_content.html),獲取id屬性為divShow的div元素的HTML內(nèi)容： Wri

14、te Less Do More,獲取id屬性為divShow的div元素的文本內(nèi)容： Write Less Do More,對id屬性為divHTML的div元素設(shè)置HTML內(nèi)容。,對id屬性為divHTML的div元素設(shè)置文本內(nèi)容。,(3)元素樣式操作 獲取元素樣式：css(“樣式名稱“) 直接設(shè)置元素樣式：css(“樣式名稱“,樣式的值) 增加類別設(shè)置樣式：addClass(“類選擇器名稱“) 切換類別設(shè)置樣式：toggleClass(“類選擇器名稱“) 刪除類別：removeClass(“類選擇器名稱“) 例如: .imgCls border-radius: 50px; . var wi

15、dth = $(img).css(width); $(img).css(border,5px solid red); $(img).addClass(imgCls); $(img).toggleClass(imgCls); $(img).removeClass(imgCls); ,(見dom_attr_css.html),當(dāng)元素中含有參數(shù)名稱的類樣式時(shí)，刪除該樣式。否則增加一個(gè)該類名稱的樣式。,獲取img元素的width樣式屬性值。,設(shè)置img元素樣式的border屬性。,添加類樣式。,切換類樣式，增加或刪除類樣式。,刪除類樣式。,2.創(chuàng)建元素節(jié)點(diǎn) 如果要在頁面中增加某個(gè)元素，只需要找到元素的

16、上級節(jié)點(diǎn)，通過函數(shù)$()完成元素的創(chuàng)建，然后添加到該節(jié)點(diǎn)中。 語法：$(HTML字符串) 例如： checkbox var $select = $(AB); $(div).append($select); ,聲明jQuery對象。,向選擇的元素div內(nèi)的結(jié)尾部分插入select元素。 語法：選擇器.append(插入的元素) 參數(shù)也可以是一個(gè)函數(shù)，例如: $(div).append(function() return $select; );,(見dom_addElement.html),創(chuàng)建了select元素對象。,3.插入節(jié)點(diǎn) 按照插入元素的順序來分，可以分為內(nèi)部插入和外部插入。 (1)內(nèi)部

17、插入 (a)append()、appendTo() 上例中提到了append()，還有一個(gè)appendTo()也經(jīng)常用到。該函數(shù)用于將一個(gè)元素插入到另一個(gè)指定的元素內(nèi)的結(jié)尾部分。 語法：插入的元素.appendTo(選擇器表達(dá)式) 所以，參照上例，將$(div).append($select)改為$select.appendTo(div)，運(yùn)行效果是一致的。,(見dom_insertElement_inner_end.html),(b)prepend()、prependTo() 使用方法與append()、appendTo()一致，區(qū)別在于，這兩個(gè)方法不是在指定元素內(nèi)的尾部插入內(nèi)容，而是在頭部

18、。,(見dom_insertElement_inner_start.html),(2)外部插入 (a)after()、insertAfter() 前者是向所選擇的元素外的后面插入內(nèi)容，后者則是將內(nèi)容插入到所選擇的元素外的后面。區(qū)別如同append()與appendTo()的關(guān)系。 語法：選擇器.after(插入的元素) 插入的元素.innserAfter(選擇器表達(dá)式) 例如： var $select = $(AB); $(img).after($select); $(img).after(function() return $select; ); $select.insertAfter(im

19、g); ,參數(shù)也可以是函數(shù)。,效果一致。,(b)before()、inserBefore() 前者是向所選擇的元素外的前面插入內(nèi)容，后者則是將內(nèi)容插入到所選擇的元素外的前面。區(qū)別同樣如同append()與appendTo()的關(guān)系,用法也與after()、insertAfter()一致。 語法：選擇器.before(插入的元素) 插入的元素.innserBefore(父元素選擇器表達(dá)式) 例如： var $select = $(AB); $(img).before($select); $(img).before(function() return $select; ); $select.ins

20、ertBefore(img); ,參數(shù)也可以是函數(shù)。,效果一致。,(見dom_insertElement_outer.html),4.復(fù)制節(jié)點(diǎn) 在頁面中，有時(shí)需要將某個(gè)元素節(jié)點(diǎn)復(fù)制到另一個(gè)節(jié)點(diǎn)后，可以使用clone()實(shí)現(xiàn)。 語法：選擇器.clone(true) 例如： $(img).click(function() alert(img); ); $(img).eq(0).clone().appendTo(div); $(img).eq(0).clone(true).appendTo(div); ,參數(shù)可以省略，這時(shí)表示僅復(fù)制元素本身，被復(fù)制后的新元素不具有任何元素行為。如果需要復(fù)制該元素的全

21、部行為，設(shè)置參數(shù)true。,定義圖片標(biāo)簽點(diǎn)擊事件的行為。,$(“img”)返回一個(gè)img標(biāo)簽元素的集合，eq方法根據(jù)索引值獲取其中指定元素。,第一句代碼中clone()沒有帶參數(shù)，新元素不會(huì)復(fù)制原元素的click行為；而第二代碼添加了參數(shù)true，則click行為被一并復(fù)制。,(見dom_cloneElement.html),5.替換節(jié)點(diǎn) (1)replaceWith() 將所有指定的元素節(jié)點(diǎn)替換成新的元素節(jié)點(diǎn)。 語法：選擇器.replaceWith(新的元素) (2)replaceAll() 將新的元素節(jié)點(diǎn)替換所有指定的元素節(jié)點(diǎn)。 語法：新的元素.replaceAll(選擇器表達(dá)式) 例如：

22、 姓名: 生日: $(#span1).replaceWith(張三); $(2014/4/4).replaceAll(#span2); ,(見dom_replaceElement.html),參數(shù)也可以是函數(shù)。,6.包裹節(jié)點(diǎn) (1)wrap() 所有指定的元素逐個(gè)用其他元素包裹起來。 語法：選擇器.warp(包裹元素) (2)unwrap() 刪除所有指定的元素的父節(jié)點(diǎn)。 語法：選擇器.unwarp() (3)wrapAll() 所有指定的元素用單個(gè)其他元素包裹起來。 語法：選擇器.warpAll(包裹元素) (4)wrapInner() 所有指定元素的文本內(nèi)容用其他元素包裹起來。 語法：選擇

23、器.warpInner(包裹元素),參數(shù)也可以是函數(shù)。,參數(shù)也可以是函數(shù)。,姓名:張三 生日:2014/4/4 $(p).wrap(); $(p).unwrap(); $(p).wrapAll(); $(span).wrapInner(); ,(見dom_wrapElement.html),7.遍歷元素 (1)each() 語法：選擇器.each(function(索引值) 語句塊 ) 例如： $(img).each(function(index) var id = this.id; ); ,如果不需要使用索引值，參數(shù)可以省略。,(見dom_eachElement.html),(2)paren

24、t() 獲取某元素節(jié)點(diǎn)的父節(jié)點(diǎn)。 語法：選擇器.parent() 例如：$(#img1).parent(); (3)parents() 獲取某元素節(jié)點(diǎn)的所有祖先節(jié)點(diǎn)，最外層節(jié)點(diǎn)為根節(jié)點(diǎn)。 語法：選擇器.parents(選擇器表達(dá)式) 例如：$(#img1).parents(); $(#img1).parents(div); (4)children() 獲取某元素節(jié)點(diǎn)的所有子節(jié)點(diǎn)。 語法：選擇器.children(選擇器表達(dá)式) 例如：$(#div1).children(); $(#div1).children(p);,表示獲取p類型的子節(jié)點(diǎn)。,(5)find() 獲取某元素節(jié)點(diǎn)的所有指定節(jié)點(diǎn)類

25、型的后代節(jié)點(diǎn)。 語法：選擇器.find(選擇器表達(dá)式) 例如：$(#div1”).find(*); $(#div1).find(p); (6)siblings() 獲取某元素節(jié)點(diǎn)的同胞節(jié)點(diǎn)。 語法：選擇器.siblings(選擇器表達(dá)式) 例如：$(#img1).siblings(); $(#img1).siblings(input); (7)next() 獲取某元素節(jié)點(diǎn)的下一個(gè)同胞節(jié)點(diǎn)。 語法：選擇器.next() 例如：$(#img1).next();,參數(shù)為*，表示獲取該類型的所有后代節(jié)點(diǎn)。,獲取input類型的同胞節(jié)點(diǎn)。,(8)prev() 獲取某元素節(jié)點(diǎn)的上一個(gè)同胞節(jié)點(diǎn)。 語法：選擇

26、器.prev() 例如：$(#img1).prev();,8.刪除元素 (1)remove() 刪除指定元素。 語法：選擇器.remove(選擇器表達(dá)式) (2)empty() 刪除指定元素的文本和后代元素。 語法：選擇器.empty() 例如： 學(xué)號 1001 1002 1003 $(ul li).remove(lititle=t); $(ul li).remove(); $(ul li).empty(); ,參數(shù)可省略，表示全部刪除。,(見dom_deleteElement.html),jQuery事件,1.頁面載入事件 ready():只要頁面的DOM模型加載完畢，就會(huì)觸發(fā)該方法。 該方

27、法比較特殊，常規(guī)有兩種寫法： (1)$(document).ready(function() ); (2)$(function() ),2.綁定事件 (1)bind() 為每個(gè)選擇元素的事件綁定處理函數(shù)。 語法：元素.bind(type,data，function) type：表示事件類型的字符串，如click、change、blur、focus等。 data：可省略，以event.data形式，傳入處理函數(shù)中。 function：事件處理函數(shù) 例如： $(#txtInput).bind(keyup, function() $(div).html(this.value); ); $(#txtI

28、nput).bind(blur, msg: blur, function(event) alert(event.data.msg); ); ,(見dom_event_bind.html),當(dāng)焦點(diǎn)移開文本輸入框，觸發(fā)事件。,鍵盤按鍵釋放時(shí)，在div標(biāo)簽顯示輸入文本。,固定搭配，實(shí)際中很少使用。,部分常用事件（不同的對象或標(biāo)簽元素，擁有不同的事件。） 鍵盤事件：,事件觸發(fā)順序：keydown - keypress - keyup,(見dom_event_keyboard.html),鍵盤事件：,(見dom_event_mouse.html),表單事件：,(見dom_event_form.html)

29、,(見dom_event_audio.html),audio標(biāo)簽事件：,當(dāng)音頻/視頻處于加載過程中時(shí)，會(huì)依次發(fā)生以下事件： loadstart - durationchange - loadedmetadata - loadeddata - progress - canplay -canplaythrough,viedo與audio標(biāo)簽的事件基本一致。,(2)one() 為所選的元素綁定一個(gè)僅觸發(fā)一次的處理函數(shù)。 語法：元素.one(type,data，function) 例如： $(#txtInput).one(keyup, function() $(div).html(this.value

30、); ); $(#txtInput).one(blur, msg: blur, function(event) alert(event.data.msg); ); ,參數(shù)含義與bind()一致。,(見dom_event_one.html),3.移除事件 既然存在用于綁定事件,也相應(yīng)存在存在移除事件。 語法：元素.unbind(type ,function) type：可省略,表示事件類型的字符串。 function：可省略,綁定事件時(shí)指定的函數(shù)。 例如： $(#txtInput).bind(keyup, oKeyup); $(#txtInput).bind(blur, msg: blur, f

31、unction(event) alert(event.data.msg); ); function oKeyup() $(div).html(this.value); $(#txtInput).unbind(); $(#txtInput).unbind(keyup); $(#txtInput).unbind(keyup, oKeyup); ,(見dom_event_unbind.html),可不帶參數(shù),表示移除所有事件。,文本輸入框綁定了兩個(gè)事件:keyup和blur。,指定事件的處理函數(shù)。,移除全部事件:keyup和blur。,只移除keyup事件。,只移除keyup事件的處理函數(shù),事件不移

32、除。,jQuery的動(dòng)畫與特效,1.顯示與隱藏 (1)show()、hide() 語法：元素.show(speed ,callback) 元素.hide(speed ,callback) speed：表示執(zhí)行動(dòng)畫時(shí)的速度,該速度有三個(gè)值slow、 normal(默認(rèn)值)、 fast；此外也可以直接數(shù)字，如3000，表示3000毫秒； callback：可省略，回調(diào)函數(shù)，動(dòng)畫完成時(shí)執(zhí)行。 該方法可不帶參數(shù)，實(shí)現(xiàn)無動(dòng)畫的效果。 例如： $(div).hide(); $(div).show(); $(div).hide(slow); $(div).show(normal, function() $(

33、div).text(div); ); ,顯示。,隱藏。,(見dom_animation_display.html),直接隱藏。,直接顯示。,以”slow”的速度隱藏。,以”noraml”的速度顯示，并且動(dòng)畫完成后添加文本內(nèi)容。,(2)toggle() 切換元素的可見狀態(tài)。 語法一：元素.toggle(speed ,callback) 語法二：元素.toggle(布爾值) 例如： $(div).toggle(); $(div).toggle(fast); $(div).toggle(false); ,參數(shù)參考show()、hide()。,true表示顯示元素；false表示隱藏元素。,(見dom

34、_animation_toggle.html),在顯示與隱藏之間切換。,隱藏。,以”fast”的速度切換顯示或隱藏。,2.滑動(dòng) (1)slideDown()、slideUp() 前者功能是以動(dòng)畫的效果將所選擇元素的高度向下增大，后者是以動(dòng)畫的效果將所選擇元素的高度向上減小。 語法：元素.slideDown(speed ,callback) 元素.slideUp(speed ,callback) 它們的動(dòng)畫效果僅是增加或減少元素高度，包括margin和padding。 例如： $(div).slideUp(); $(div).slideDown(fast, function() $(div).t

35、ext(div); ); ,默認(rèn)speed為normal。,(見dom_animation_slide.html),(2)slideToggle() 以動(dòng)畫的效果切換所選元素的高度。 語法：元素.slideToggle(speed ,callback) 例如： $(div).slideToggle(); $(div).slideToggle(3000); ,(見dom_animation_slideToggle.html),3.淡入淡出 (1)fadeIn()、fadeOut() 兩者功能都是改變所選元素透明度，前者實(shí)現(xiàn)淡入的動(dòng)畫效果；后者是實(shí)現(xiàn)淡出的動(dòng)畫效果。 語法：元素.fadeIn(sp

36、eed ,callback) 元素.fadeOut(speed ,callback) 例如： $(div).fadeIn(2000, function() $(div).text(fadeIn); ); $(div).fadeOut(5000, function() $(div).text(fadeOut); ); ,(見dom_animation_fade.html),(2)fadeTo() 以動(dòng)畫實(shí)現(xiàn)指定透明度的淡出或淡入效果。 語法：元素.fadeTo(speed, 透明度) 透明度的值范圍為01。 例如： 0 0.2 0.4 0.6 0.8 1 $(#select1).bind(cha

37、nge, function() $(div).fadeTo(2000, this.value); ); ,(見dom_animation_fadeTo.html),根據(jù)select的選項(xiàng)值，改變透明度。,4.自定義動(dòng)畫 (1)animate() 允許用戶自定義動(dòng)畫效果。 語法：元素.animate(param ,speed,easing,callback) param：用于制作動(dòng)畫效果的CSS樣式的集合； speed：可省略，表示執(zhí)行動(dòng)畫時(shí)的速度； esing：可省略，動(dòng)畫插件使用，用于控制動(dòng)畫的表現(xiàn)效果； callback：可省略，回調(diào)函數(shù)。 例如： $(div).animate( left

38、:800px, width: 300px, height: 200px , 5000, function() this.text(div); ); ,(見dom_animation_animate.html),設(shè)定目標(biāo)樣式。,(2)stop() 停止所選元素中正在執(zhí)行的動(dòng)畫。 語法：元素.stop(stopAll,gotoEnd) stopAll：布爾值，true表示停止該元素的所有動(dòng)畫；false表示停止當(dāng)前的動(dòng)畫。 gotoEnd：可省略，布爾值，表示是否立即完成動(dòng)畫。 例如： $(div).animate(left : 800px, 5000); $(div).animate(width

39、 : 300px, 5000); $(div).animate(height : 200px, 5000); $(div).stop(true); $(div).stop(false); $(div).stop(true, true); ,(見dom_animation_stop.html),三個(gè)動(dòng)畫都被停止。,正在執(zhí)行的某個(gè)動(dòng)畫被停止，之后的繼續(xù)執(zhí)行。,三個(gè)動(dòng)畫都被停止，并且當(dāng)前動(dòng)畫立即完成，變?yōu)槟繕?biāo)樣式。,定義了三個(gè)動(dòng)畫。,(3)delay() 設(shè)置一個(gè)時(shí)間來延后執(zhí)行序列中未執(zhí)行的動(dòng)畫。 語法：元素.delay(duration,queueName) duration：延遲的時(shí)間，單位為毫

40、秒。 queueName：可省略，動(dòng)畫隊(duì)列的名稱。 例如： $(div).animate(left : 800px, 1000); $(div).delay(5000); $(div).animate(width : 300px, 1000); $(“div).animate(height : 200px, 1000); ,(見dom_animation_delay.html),隊(duì)列queue很少使用，不太了解。,之后兩個(gè)動(dòng)畫延遲5秒執(zhí)行。,jQuery關(guān)于加載異步數(shù)據(jù)和請求服務(wù)器數(shù)據(jù)的操作,Ajax的核心是通過XMLHttpResponse對象，以一種異步的方式，向服務(wù)器發(fā)送數(shù)據(jù)請求，并通過

41、該對象接受請求返回的數(shù)據(jù)，從而完成數(shù)據(jù)交互。這種方式并不局限與Web動(dòng)態(tài)頁面，在普通的靜態(tài)HTML頁面中同樣可以實(shí)現(xiàn)。在jQuery中，大量運(yùn)用了這些技術(shù)。 1.load() 通過AJAX請求從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中。 語法：元素.load(url ,data ,callback) 例如： $(div).load(dom_attr_control.html, function() alert(load); ); ,(見dom_XMLHttpRequest_load.html),(2)getJSON() 用于調(diào)用JSON格式數(shù)據(jù)。 語法：$.getJSON(url ,d

42、ata ,callback) 例如： json/services.json： services: service_id: 1,service_name: Youku, service_id: 2,service_name: letv, total_results: 2 $.getJSON(json/services.json, function(data) alert(data.total_results); $.each(data.services, function() alert(this.service_id + n + this.service_name); ); ); ,(見dom_XMLHttpRequest_getJSON.html),遍歷。,之后介紹的get()、post()同樣可以調(diào)用JSON格式的數(shù)據(jù)，格式用法完全一致。,$表示調(diào)用全局函數(shù)。,返回