1、JQuery 學(xué)習(xí)筆記一、 基礎(chǔ)知識(shí)1、JQuery 庫說明JQuery-1.5.2.js 完整無壓縮版本，用于測試、學(xué)習(xí)和開發(fā)JQuery-1.5.2.min.js 經(jīng)過 JSMin 等工具壓縮后的版本，體積小，用于項(xiàng)目和產(chǎn)品【注：jQuery 正確寫法是j 小寫】2、使用 JQuery只要將的 JQuery 庫引入到頁面 JS處即可，方法如下：3、JQuery 對象與 DOM 對象轉(zhuǎn)換JQuery 對象是一個(gè)數(shù)組對象，可以使用兩種方式轉(zhuǎn)換為 DOM 對象（1）var$cr = $(“#cr”) ;/JQueryobjectVarcr = $cr0 ;/DOMobject ;（2） var$

2、cr = $ (“ #cr “) ;varcr = $cr . get ( 0 );對于一個(gè) DOM 對象，只需用$() 將 DOM 對象包裝起來，就可以轉(zhuǎn)換為 JQuery 對象Varcr=.geementById ( “ cr” );/DOMobjectVar$cr = $ ( cr ) ; /JQuery object4、JQuery 庫與其他庫的解決默認(rèn) JQuery$作為自身的快捷方式，在先加載其他 JS 庫時(shí)，可能出現(xiàn)$，這時(shí)有以下幾種解決方法：（1）在任何時(shí)候都可以調(diào)用 JQuery . no庫。( ) 函數(shù)來將變量$的控制權(quán)移交給其他 JS示例：( ); /移動(dòng)變量$控制權(quán)JQ

3、uery . no（2）還可以使用 JQuery . no( ) 方法自定義快捷方式，即 Var 新快捷方式 = JQuery .no( );（3）將變量$作為形參傳遞到 JQuery 中，在函數(shù)繼續(xù)使用$快捷符號(hào)，示例如下：( ); /移動(dòng)變量$控制權(quán)JQuery . noJQuery ( function ( $ )$(“ p” ) . click ( function () alet( $(this) . text () ); ) )（4）將 JQuery 庫在其他庫之前導(dǎo)入，這時(shí)無需調(diào)用 JQuery . noConfict () 函數(shù)就可以交出$控制權(quán)限。5、常用開發(fā)工具（1）Dre

4、amweaver ：可以通過安裝擴(kuò)展管理來實(shí)現(xiàn) JQuery 代碼的自動(dòng)提示。首先JQuery_API.mxp 插件，然后在 Dreamweaver 中依次選擇“命令”“擴(kuò)展管理”“安裝擴(kuò)展”“JQuery_API.mxp”命令后，就可以安裝插件了。【 注 意： 如 果HtDreamweaver 沒有 擴(kuò) 展管 理 功能 ， 說明 是簡化 版本， 可 以 在/cn/exchange 中相應(yīng)。】（2）Aptana：功能強(qiáng)大、開源、專注于 JS 的 AJAX 開的 IDEJQueryWTP 和 Spket 插件：可以使Eclipse 支持 JQuery 自動(dòng)提示VisualStudio2008：安

5、裝 KB958502/Release/ProjectReleases.aspx?releaseId=1736 補(bǔ)丁后，JQuery-1.5.2-vsdoc.js，將其與 JQuery-1.5.2.js 放在同一文件夾下，就可以實(shí)現(xiàn) JQuery自動(dòng)代碼提示了。二、JQuery 選擇器1、JQuery 選擇器簡介JQuery 選擇器完全繼承了 CSS 風(fēng)格，可以非常快捷的找出特定 DOM 元素，然后添加相應(yīng)行為，而無需擔(dān)心瀏覽器是否支持定一選擇。JQuery 選擇器獲取的是對象，即使沒有此元素也不會(huì)報(bào)錯(cuò)，因此當(dāng)要用 JQuery 檢查某個(gè)元素在網(wǎng)頁是否存在時(shí)，要用長度或轉(zhuǎn)換為 DOM 對象進(jìn)行判

6、斷，示例如下：If ( $(“ #tt “) )/這樣是錯(cuò)誤的 應(yīng)該這樣： if ( $(“#tt”) .length 0 ) .或者 if ( $(“#tt”) 0 ) 2、常用選擇器選擇器描述返回示例選擇給定類名的元素集合元素取所有 class 為 test 的元素.class$(“ .test”)匹配所有元素集合元素略*3、層次選擇器選擇器描述返回示例$(“antordescendant”)選擇 antor 元素里 集合元素$( “divspan”)選擇 div 里的所有span的所有 descendant元素（后代）元素Selector1,將每個(gè)選擇器匹配的元素 集合元素$(“div

7、, span, p.myclass “) 選擇所有,selector2,合并后一起返回和擁有 class 為myclass 的的一 ,selectorN組元素Element選擇給定元素名的元素集合元素$(“P”) 取所有元素#id選擇匹配 ID 的元素單個(gè)元素$( “test”)取 Id 為test 的元素選擇 parent 元素下的child 元素集合元素$(“ div span ”) 取 div 下元素名是的素$(“parent child”)取prev 元素后的所有siblings 元素集合元素$(“#two div”)取 id 為 two 元素后面的所有div 兄弟元素$(“prev”

8、).nextAll(“div”)$( “prev siblings”)或 $(“prev”).nextAll();4、過濾選擇器基本選擇器描述返回示例選擇最后一個(gè)元素單個(gè)元素$(“div:last”)所有 div 中最后一個(gè) div 元素:last取索引是偶數(shù)的元素集合元素$(“input:even”)取索引是偶數(shù)的 input 元素:even取索引等于index 的元素單個(gè)元素$(“input :eq(1)”)索引等于 1 的元素:eq (index)取索引小于index 的元素集合元素:lt (index)$(“input :lt(1)”)取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素集合元素$(“div

9、:animated”)取正在執(zhí)行動(dòng)畫的 div 元素:animated取內(nèi)容為text 的元素集合元素$(“div:contains(我)”):contains(text)取含有選擇器所匹配的元素的元素集合元素$(“div :has(p)”)取含有元素的元素:haector)可見過濾取所有可見元素集合元素:visible$(“div :visible”):hidden取所有不可見元素集合元素$(“:hidden”) 包括 hiden 和 none:parent取含有素或文本元 集合元素$(“div: parent”) 注意與parent()方法的區(qū)別素:empty取不包含素或文本 集合元素$(

10、“div :empty”)的空元素內(nèi)容過濾:header取所有標(biāo)題元素集合元素$(“:header”):gt (index)取索引大于index 的元素 集合元素$(“input :gt(1)”)取索引大于 1 而不包括 1 的索引都從 0 開始計(jì)算元素:odd選擇索引是奇數(shù)的元素集合元素$(“input:odd”):not(selector)去除與給定選擇器匹配 集合元素$(“input:not(.myclass)”) 選取 class 不是 的元素myclass 的 input 元素:選擇第一個(gè)元素單個(gè)元素$(“div :”)取所有 div 中第 1 個(gè) div 元素$(“prev”) .

11、 siblings ()取prev 元素的所有同 集合元素$(“#prev”).siblings(“div”)取所有與 prev輩元素同輩的元素，無論前后位置$(“prev + next “)取prev 元素后的next集合元素$(“.one + div”) 或$(“.one”).next(“div”)取或 $(“prev”).next()元素class 為 one 的下一個(gè) div 元素取有此屬性的元素集合元素$(“divid”) 取有 id 屬性的元素attribute取值不等于value 的元素集合元素attribute!=value$(“div title!=test”)取值以valu

12、e 結(jié)束的元素集合元素略attribute$=value用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器集合元素$(“dividtitle$=test取有屬性 id 且屬性title 以test 結(jié)束的元素slector1selector2.取每個(gè)父元素下第 index集合元素注意與 :eq(index)的區(qū)別很常用的過濾器 :nth-child(2n);取索引值是 2 的倍數(shù)的元素，n 從 0 開始:nth-child(index/even/odd/equation)個(gè)素或奇偶元素，index 從 1 開始取每個(gè)父元素的最后一集合元素注意與:last 的區(qū)別:last-child個(gè)素表單屬性過濾取所有不

13、可用元素集合元素略:disabled取所有被選中的選項(xiàng)元素（下拉列表）集合元素:selected$(“select :selected”)5、表單選擇器選擇器描述返回示例取所有單行文本框集合元素:text$(“:text”)取所有單選框集合元素略:radio取所有提交按鈕集合元素:submit:checkbox取所有多選框集合元素略:password取所有框集合元素略:input所有的集合元素$(“:input”)和元素:checked取所有被選中的元素集合元素$(“input :checked”):enabled取所有可用元素集合元素$(“#form1 :enabled”)取 id 為 fo

14、rm1 的表單內(nèi)的所有可用元素:only-child如果某個(gè)元素是它父元 集合元素$(“ul li:only-child”) 選擇中是惟一素的中的惟一素，則素的匹配:-chile取父元素下第 1 個(gè)集合元素注意與:的區(qū)別素素過濾attribute*=value取值含有 value 的元素集合元素略attribute=value取值以value 開始的元素 集合元素$(“divtitle=test”)attribute=value取屬性值為value 的元素 集合元素$(“divtitle=test”)屬性過濾器描述返回示例取所有按鈕集合元素:reset取所有不可見元素集合元素:hidden【注

15、意：選擇器出現(xiàn)空格表示為后代選擇器，與過濾選擇器是不同的結(jié)果，例： Var $t_a = $( .test:hidden); /表示選取 class 為”test”的元素里面的隱藏元素 而 var$t_b = $( .test:hidden); /表示選中隱藏的class 為”test”的元素】三、DOM 操作1、查找節(jié)點(diǎn)和創(chuàng)建節(jié)點(diǎn)（1）查找節(jié)點(diǎn)：通過前面介紹的的選擇器可以輕松查找節(jié)點(diǎn)，【例：var$li = $(“ul/取 ul 中的第 2 個(gè)節(jié)點(diǎn)】然后可以使用 attr () 方法來獲取它的各種屬性q(1)”);（2）創(chuàng)建節(jié)點(diǎn)：JQuery 中可以通過 $( HTML) 來實(shí)現(xiàn)節(jié)點(diǎn)的創(chuàng)建。

16、例：這是一個(gè)復(fù)雜的組合2、節(jié)點(diǎn)方法描述示例appendT0()將匹配元素追加到指定元素中， 實(shí)際是顛倒了上面的append()方法o”).appendTo(“p”)，結(jié)果o$(“prependTo()上面 prepend()方法的反操作略insertAfter()將匹配元素到指定元素的略后面，after()方法的顛倒操作insertBefore()Before()的顛倒方法略Before()在匹配元素前內(nèi)容$(“p”).before(“o”)，結(jié)果oAfter()在匹配元素后內(nèi)容$(“p”).after(“o”)，結(jié)果oPrepend()向匹配元素關(guān)添加內(nèi)容$(“p”).prepend(“o”

17、);Append向匹配元素追加節(jié)點(diǎn)$(“p”).append(“o”):file取所有上傳域集合元素:image取所有圖像按鈕集合元素3、刪除節(jié)點(diǎn)remove()方法：刪除匹配元素及其所有后代節(jié)點(diǎn)，返回值是指向已刪除節(jié)點(diǎn)的使用這些元素empty()方法：并不刪除當(dāng)前節(jié)點(diǎn)，而是清空所有后代節(jié)點(diǎn)。，可以在其他地方或以后4、節(jié)點(diǎn)和替換節(jié)點(diǎn)（1）節(jié)點(diǎn)：Clone(bool)方法可以當(dāng)前節(jié)點(diǎn)，默認(rèn)參數(shù)為 False，可以不填寫，指復(fù)制的新元素不具備原節(jié)點(diǎn)的任何行為，當(dāng)為 True 時(shí)，新元素將同時(shí)具有被行為，包括事件。元素的所有（2）替換節(jié)點(diǎn)：ReplaceWith()與 ReplaceAll()可以將

18、所有匹配的元素都替換成指定的或者 DOM 元素，這兩個(gè)方法互為顛倒。示例：$(“p”).replaceWith (“你不喜歡什么？”);或 $(“你不喜歡什么？”).replaceAll (“p”);HTML5、節(jié)點(diǎn)（1）wrap()方法：把每個(gè)匹配元素用指定示例如下：起來，每個(gè)匹配元素都一次$(“strong”).wrap (“”); /結(jié)果如果有 2 個(gè)元素，則為aaabbb(2)wrapAll()方法：將所有匹配元素在指定中，示例如下$(“strong”).wrap All(“”); /結(jié)果如果有 2 個(gè)元素，則為aaabbb（3）wrapInner()方法：將每個(gè)匹配元素的子內(nèi)容用指定

19、起來，示例$(“strong”).wrap Inner(“”); /結(jié)果如果有 2 個(gè)元素，則為aaa6、屬性操作（1）獲取和設(shè)置屬性： attr()Varp_txt = $para.attr (“title”) ; /獲取 Title 屬性值$(“p”).attr( “title” : ”o” , “name” : “test” ); /將一個(gè)“名/值”形式的對象設(shè)置為匹配元素的屬性【注意：JQuery 中很多方法都是同一個(gè)函數(shù)來實(shí)現(xiàn)獲取和設(shè)置，如 attr () 、html ()、text ()、 height ()、width ()、val ()和 css ()等方法。】（2）刪除屬性：

20、removeAttr ()例：$(“p”).removeAttr (“ title”);7、樣式操作（1）獲取設(shè)置樣式：attr()獲取樣式示例：varp_class = $(“p”).attr (“class” ); /獲取元素的 class設(shè)置樣式：$(“p”) . attr (“class” ,”high”) ; /此處嚴(yán)格說只是替換了元素的樣式（2）追加樣式：addClass()示例： $(“p”) .addClass (“high” ); /即元素會(huì)具有以前和現(xiàn)在兩格樣式（3）移除樣式：removeClass (“ 樣式 1 樣式 2”)和 removeClass()參數(shù)為空移除所有

21、樣式（4）切換樣式：toggleClass() /樣式存在則刪除，不存在則添加（5）判斷樣式是否存在：hasClass ()/實(shí)際是調(diào)用了 is()方法，所以等價(jià)于is()8、CSS-DOM 操作（1）設(shè)置和獲取 style 對象的各種屬性：css ()查看某元素css 屬性的值： var p_value = $(“p”).css (“color”);改變元素樣式：$(“p”).css (“ color” , “red”);（2）獲取和設(shè)置高度寬度：height () 和 width ()示例：$(“p”) .heigth();$(“p”).height(100);（3）獲取元素在當(dāng)前視窗的相

22、對偏移：offset ()示例： varoffset = $(“p”).offset ();Varleft = offset.left ;Vartop = offset.top;（4）ition()方法：用于獲取元素相對于最近一個(gè)ition 樣式屬性設(shè)置為 relative 或absolute 的祖父節(jié)點(diǎn)的相對偏移，同 offset ()一樣，返回對象包括兩個(gè)屬性，即 top 和 left 。（5）獲取元素的滾動(dòng)條距頂端和距左側(cè)的距離：scrollTop () 和 scrollLeft ()【注：height () 與css() 方法的區(qū)別是，height ()方法獲取的高度是元素在頁面中的實(shí)

23、際高度，且不帶；而 css ()獲取到的高度與樣式有關(guān)，可能為”auto “ 或 “10px”之類】【注意：attr () 與 css ()，attr () 設(shè)置對象的class 屬性，而 css () 設(shè)置對象的style 屬性】【注：css()方法中如果屬性有”-“號(hào)，如：font-size，不加引號(hào)時(shí)必須用駝峰式寫法（fontSize），如果帶上了引號(hào)，兩種寫法都可以。】9、設(shè)置和獲取 HTML 與文本和值（1）設(shè)置和獲取 HTML：html ()類似于 JS 中的 InnerHTML設(shè)置示例：$(“p”).html (“ 獲取示例：$(“p”).html ();【注：html()方法不

24、能用于 XML 文檔】o ”);（2）設(shè)置和獲取文本：text ()類似于 JS 中的 InnerText【注：text()方法對 HMTL 和 XML 文檔都有效，且支持所有瀏覽器】（3）設(shè)置和獲取值：val ()類似于 JS 中的Value【注 1：val()方法不僅能設(shè)置和獲取元素的值，還有一個(gè)用處就是能使 select 、checkbox 、radio 相應(yīng)的選項(xiàng)被選中。注 2：val()方法是從最后一個(gè)選項(xiàng)往前。也可以使用 attr()方法來實(shí)現(xiàn)同樣功能】示例：$(“ :checkbox”).val ( “check2” , “check3”);$(“#singleoption:eq

25、(1) “).attr ( “selected” , true);10、遍歷節(jié)點(diǎn)（1）children ()：獲取匹配元素的所有素，不考慮任何后代元素next ()：用于取得匹配元素后面緊鄰的同輩元素prev ()：用于取得匹配元素前面緊鄰的同輩元素siblings ()：用于取得匹配元素前后所有的同輩元素closest ()：用來取得最近的匹配元素【其他：find ()、filter ()、nextAll ()、prevAll ()、parent ()、parents ()等】四、JQuery 中的事件和動(dòng)畫1、加載 DOM 對象) .ready (function () /代碼 $($()

26、 .ready (function () /代碼 $ (function () /代碼 三種方式是一樣的。【注：使用 ready()方法的事件，只要 DOM 加載完畢就會(huì)被執(zhí)行，如果此時(shí)元素關(guān)聯(lián)的）則會(huì)報(bào)錯(cuò)，解決方法是使用 JQuery 的 load()方法，可以在文件未完畢（如較大的元素上綁定一個(gè)算處理函數(shù)。例：$(window).load ( function ( ); 等價(jià)于 window.onload ()】2、事件綁定在文檔裝載完畢后，可以通過 bind ( ) 方法來對匹配元素進(jìn)行特定事件的綁定，語法為：Bind ( type , data , fn ) ;參數(shù)說明：第 1 個(gè)為事

27、件類型，包括：blur/focus/load/unload/click/mousedown/keypress/error第 2 個(gè)為可選參數(shù)，作為 event .data 屬性值傳遞給事件對象的額外數(shù)據(jù)對象第 3 個(gè)是用來綁定處理函數(shù)的。示例：$(“#panel”).bind (“mouseover” , function () /處理代碼 );【注：像click 、mouseover 、mouseout 這類在程序中常用的事件，系統(tǒng)提供了簡寫方法，效果與 bind () 方法一樣，示例：$(“#panel”) . click (function () /代碼 );3、事件（1）hover()

28、 方法結(jié)構(gòu)為：hover (enter ,leave ); 用于模擬光標(biāo)懸停事件，當(dāng)光標(biāo)移動(dòng)到元素上時(shí)，觸發(fā)第 1個(gè)函數(shù)（enter），當(dāng)光標(biāo)移出這個(gè)元素時(shí)，觸發(fā)第 2 個(gè)函數(shù)（leave）。示例：$(“#panel”) .hover ( function () , function () );【注：hover () 方法是用來替代 JQuery 中的 bind (“ mouseenter”) 和 bind (“mouseleave”)方法的，而不是 bind (“mouseover”)和 bind (“mouseout”)方法，因此當(dāng)需要觸發(fā)第 2 個(gè)函數(shù)時(shí)，需要用 trigger(“mou

29、seleave”)來觸發(fā)?！浚?）toggle ()方法結(jié)構(gòu)為：toggle (fn1 , fn2, fnN) ;用于模擬鼠標(biāo)連續(xù)點(diǎn)擊事件，依次觸發(fā)多個(gè)函數(shù)。【注：常用于動(dòng)態(tài)交替元素的可見狀態(tài)，如果元素可見則切換為隱藏，如果元素是隱藏的，則單擊后切換為可見，例：$(“#panel”).toggle (function () $(this).next().toggle();, function () $(this).next().toggle(); ) 】4、事件對象的使用（1）冒泡問題的解決：由于事件冒泡可能會(huì)預(yù)料之外的效果，所以要通過事件對象的一些屬性來進(jìn)行控制，因?yàn)?IE-DOM 與 DO

30、M 實(shí)現(xiàn)事件對象的方法各不相同，導(dǎo)致在不同瀏覽器中獲取事件對象變得比較，JQuery 對這個(gè)問題進(jìn)行了必要的擴(kuò)展和封裝，從而使得在任何瀏覽器中都能很輕松的使用事件對象的一些屬性。在 JQuery 中，只要為函數(shù)添加一個(gè) event 參數(shù)，就可以輕松使用事件對象，示例如下：$(“element”) .bind (“click” ,function (event )/event：事件對象 ) ;停止事件冒泡：stopPropagation ()；示例：event . stopPropagation ();默認(rèn)行為：preventDefault ()；示例：event . preventDefaul

31、t ();【注：以上兩個(gè)方法都可以用簡寫方式代替：returnfalse；另外 JQuery 不支持事件捕獲】（2）事件對象屬性屬性名描述示例默認(rèn)事件preventDefaultEvent . preventDefault獲取觸發(fā)事件的相關(guān)元素略related在單擊事件中獲取到鼠標(biāo)的左、中、右鍵，在鍵盤事件中獲取鍵盤按鍵WhickoriginalEvent指向原始的事件對象（3）模擬單擊事件：可以使用 trigger()或 click()方法例：$(#btn).trigger(“click”);或者 $(#btn).click ();【注：trigger()不僅可以觸發(fā)瀏覽器支持的具有相同名稱

32、的事件，還可以觸發(fā)自定義名稱的事件，還可以傳遞參數(shù)，示例：語法：trigger(type,data);$(#btn).bind(“myclick” , function(event , message1, message2)$(#test) . append (“”+message1+message2+”););$(“#btn”).trigger (“ myClick” , “自定義” , “事件” );】metaKeyJQuery 中用于在鍵盤事件中獲取Ctrl 鍵Event . pageX獲取光標(biāo)相對于頁面的 JQuery 封裝后可以兼容各種瀏覽器/event.PageYx/y 坐標(biāo)獲取觸

33、發(fā)事件的元素Enevt . hrefType用以獲取到事件類型Event . type（4）triggerHandler()方法：trigger()方法不僅會(huì)觸發(fā)綁定的事件，同時(shí)也會(huì)執(zhí)行瀏覽器的默認(rèn)操作（如果有的話，例如 focus 事件，不僅會(huì)執(zhí)行 focus 事件，也會(huì)使文本框獲得焦點(diǎn)），而 triggerHnadler()方法則不執(zhí)行瀏覽器默認(rèn)操作。（5）綁定多個(gè)事件類型：bind ( “mouseouvermouseout ” , function () );（6）添加事件命名空間，便于管理：bind (“ click .plugin “, function () ) ; 刪除時(shí)直接刪

34、除命名空間，則相關(guān)事件都會(huì)被刪除，例：unbind(“ .plugin”);【注：事件類型加感嘆號(hào)表示匹配不包含在命名空間中的事件，例 click!】5、移除事件：unbind ()語法結(jié)構(gòu)：unbind ( type , date ) ;參數(shù)說明：第 1 個(gè)是事件類型，如果沒有參數(shù)，則刪除所有綁定事件第 2 個(gè)參數(shù)是綁定時(shí)傳遞的數(shù)據(jù)，如處理函數(shù)名?！咀ⅲ簩τ谥唤壎ㄒ淮蔚氖录?，JQuery 提供了簡寫方法one()方法，使用方法與 bind ()相同，當(dāng)處理函數(shù)執(zhí)行一次后立即被刪除。語法結(jié)構(gòu)：one ( type , data ,fn );】6、JQuery 中的動(dòng)畫（1）顯示與隱藏元素：Sh

35、ow()和 Hide()Show()與 Hide()在不帶參數(shù)的情況下相當(dāng)于CSS(“display”, “none/block/inline”)，不會(huì)有任何動(dòng)畫，通過指定速度參數(shù)可實(shí)現(xiàn)動(dòng)畫效果。示例：$(“element”) .show (“slow/normal/fast “); 或者 $(“element”).show (1000); /具體的值【注：這兩個(gè)方用下面的方法】同時(shí)減少“內(nèi)容”高度、寬度和不，如果只想改變不則使（2）自定義動(dòng)畫：animate ( params , speed ,callback );Params：一個(gè)包含樣式屬性及值的 Speed：速度參數(shù)，可選。，例：pr

36、operty1:”value1”,property2:”value2”,。Callback：回調(diào)函數(shù)，動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，可選，適用于所有的動(dòng)畫效果方法。【注：在 animate()方法中，多個(gè)屬性會(huì)同時(shí)發(fā)生作用，只有當(dāng)以鏈?zhǔn)椒绞綉?yīng)用時(shí)，動(dòng)畫才會(huì)按照順序發(fā)生，形成動(dòng)畫隊(duì)列。另外，要防止非動(dòng)畫方法插隊(duì)，需要把非動(dòng)畫方法寫在回調(diào)函數(shù)中。】（3）停止動(dòng)畫：Stop()語法結(jié)構(gòu)：stop ( clearQueue, gotoEnd );參數(shù)都為可選，為布爾值（True 或 Flase），ClearQueue 表示是否要清空未執(zhí)行完的動(dòng)畫隊(duì)列， GotoEnd 代表是否直接跳轉(zhuǎn)到當(dāng)前動(dòng)畫末尾狀態(tài)。不加

37、任何參數(shù)則表示停止當(dāng)前動(dòng)畫，繼續(xù)執(zhí)行隊(duì)列中的其他動(dòng)畫?！咀ⅲ篔Query 只能設(shè)置當(dāng)前正在執(zhí)行的動(dòng)畫狀態(tài)，并沒有提供直接到達(dá)動(dòng)畫隊(duì)列最終狀態(tài)的方法?！浚?）判斷動(dòng)畫狀態(tài)： if ( ! $(element) .is (“ :animated”) )（5）動(dòng)畫方法說明：方法說明只改變不fadeIn() / fadeOut()只改變不fadeTo()用來代替 slideUP()和 slideDown()方法SlideToggle()【注：JQuery 動(dòng)畫需要在標(biāo)準(zhǔn)模式下執(zhí)行，即 HMTL 文件頭要包含 DTD 定義，否則會(huì)引起動(dòng)畫抖動(dòng)。JQuery 中的動(dòng)畫都可以帶參數(shù)，數(shù)值參數(shù)不需要引號(hào)。】五

38、、JQuery 對表單表格的操作1、表單應(yīng)用（1）單行文本框應(yīng)用：主要是改變樣式，例如獲取和失去焦點(diǎn)時(shí)的樣式改變值得學(xué)習(xí)的 HMTL 代碼：個(gè)人基本信息名稱：【注：fieldset 可以在頁面中形成groupbox，legend 則設(shè)置其標(biāo)題?！浚?）多行文本框應(yīng)用：主要是動(dòng)態(tài)改變多行文本框的大小或者通過 scrollTop 屬性控制滾動(dòng)條的狀態(tài)Animate()自定義動(dòng)畫，以上各種動(dòng)畫方法實(shí)質(zhì)都調(diào)用了該方法，所以也可以用些方法替代其他所有動(dòng)畫方法Toggle()用來代替 hide()和 show()方法slideUP() / slideDown()只改變高度Hide() / show()同時(shí)

39、修改多個(gè)樣式屬性即高度、寬度、不（3）復(fù)選框應(yīng)用：主要是全選、反選等（4）下拉框應(yīng)用：常用于級(jí)聯(lián)操作或?qū)⒁粋€(gè)區(qū)域內(nèi)容添加到另一個(gè)區(qū)域中，如下圖：（5）表單驗(yàn)證應(yīng)用：動(dòng)態(tài)添加驗(yàn)證標(biāo)識(shí)，各類驗(yàn)證同 JS。2、表格應(yīng)用（1）隔行變色：應(yīng)用選擇器 odd 和even 屬性實(shí)現(xiàn)，注意下標(biāo)從 0 開始例：$(“tbodytr:odd”).addClass(“odd”);/排除表頭行為奇數(shù)行添加樣式（2）表格開閉：應(yīng)用選擇器實(shí)現(xiàn)樣式控制例：$(this).siblings(.child_+this.id).toggle().toggleClass(high);（3）表格內(nèi)容篩選：通過contains()方法

40、配合 filter()方法實(shí)現(xiàn)內(nèi)容過濾。示例：通過用戶輸入篩選表格內(nèi)容顯示$(“#filterName”).keyup(function()$(“table tbody tr”).hide().filter(“:contains(”+($(this).val()+”)”).show(); /為 filterName 文本框綁定輸入事件);3、其他頁面應(yīng)用（1）動(dòng)態(tài)調(diào)整頁面字體大小。VarthisEle=$(“P”).css(“font-size”); /獲取字體大小 VartextFontSize=parseFloat ( thisEle ,10); /去掉 Varunit=thisEle.s

41、lice(-2); /獲取TextFontSize +=2;，第 2 個(gè)參數(shù)表示進(jìn)制$(“p”).css (“font-size” , textFontSize + unit); /設(shè)置字體大小（2）網(wǎng)頁選項(xiàng)卡：通過顯示隱藏層實(shí)現(xiàn)（3）網(wǎng)頁換膚：通過 JQuery 改變樣式文件首先創(chuàng)建樣式選擇列表：白色紫色然后為 HTML 代碼添加樣式，注意一定要有一個(gè)帶 ID 的樣式表，便于操作其 href 屬性。最后就可以通過代碼修改網(wǎng)頁樣式了：Var $li= $(“#skinli”);$li.click (function() $(“#”+this.id).addClass(“high”)/顯示當(dāng)前選

42、項(xiàng).siblings().removeClass(“high”); /移除其他選項(xiàng)顯示$(“#cssfile”).attr(“href” , “ css/”+ this.id +”.css”) ; /設(shè)置皮膚);【注：還可以通過 JQuery 的插件將用戶選擇保存起來，或者保存到服務(wù)器上持久化?！苛Query 與 Ajax 的應(yīng)用1、Ajax 簡介（1）Ajax 是“AsynchronousJavaScriptandXML”（異步 JavaScript 和 XML）的縮寫。擁有只要瀏覽器的 JS 就可以使用，提高用戶體驗(yàn)和 Web 性能，減輕服務(wù)器帶寬和負(fù)擔(dān)等特點(diǎn)。之處在于各大瀏覽器對 X

43、MLHttpRequest 對象的支持，同時(shí)對搜索引擎的支持不好，開發(fā)和調(diào)試工具缺乏。（2）JQuery 對 Ajax 作了封裝，兼容各大瀏覽器，其中$.ajax()方法屬于最底層方法，第 2 層是 load() 、$.get() 、$.t()方法，第 3 層是$.getScript()和$.getJSON()方法。2、JQuery 中的 Ajax（1）Load()方法：載入 HTML 文檔，load()方法常用來從 Web 服務(wù)器上獲取靜態(tài)數(shù)據(jù)文件語法結(jié)構(gòu)：load (url , data ,callback)url 參數(shù)：請求 HTML 頁面的 URL 地址，通過添加選擇符可以篩選要加載的

44、頁面元素例：$().load (“ test.html.para”);/注意中間有空格，將 test.html 中樣式是 para 的元素加載出來。data 參數(shù)：發(fā)送至服務(wù)器的key/value 數(shù)據(jù)，如果有參數(shù)則為t 傳遞方式，沒有則為Getcallback 參數(shù)：回調(diào)函數(shù)，共有三個(gè)參數(shù) responseText（請求返回的內(nèi)容）、textSus（請求狀態(tài)：sucs/error/notmodified/timeout 共 4 種）、XMLHttpRequest（XMLHttpRequest 對象）。【注：在 load()方法中，無論 Ajax 請求是否成功，只要當(dāng)請求完成（complete

45、）后，回調(diào)函數(shù)（callback）都將觸發(fā)此函數(shù)?！浚?）$.get()和$.t()方法：它們是 JQuery 的全局函數(shù)，語法和結(jié)構(gòu)相同$.get()語法結(jié)構(gòu)：$.get ( url ,data ,callback ,type)url 參數(shù)：請求 HTML 頁的 URL 地址data 參數(shù)：發(fā)送到服務(wù)器的key/value 數(shù)據(jù)會(huì)作為QueryString 附加到請求 URL 中callback 參數(shù)：載入成功時(shí)的回調(diào)函數(shù)（與 load()方法不同，只有當(dāng) response 的返回狀態(tài)是sucs 時(shí)才調(diào)用此方法）type 參數(shù)：服務(wù)器端返回內(nèi)容的格式，包括XML/html/script/js

46、on/text 等【注：回調(diào)函數(shù)有兩個(gè)參數(shù) data 和textSus，分別表示請求返回的內(nèi)容和請求狀態(tài)?！吭诟鞣N返回格式中，XML 是 Web 服務(wù)領(lǐng)域的“世界語”，JSON 體積小易和閱讀，但格式嚴(yán)格，稍一有錯(cuò)，易導(dǎo)致終止或其他影響，下面用一個(gè)示例介紹 XML 的：$.get (“get2.” , username:$(“#username”).val() , content: $(“#content”).val() , function(data , textSus )Var username= $(data).find (“comment”).attr(“username”); Var

47、 content=$(data).find(“commentcontent”).text();Var txtHtml=”+username+”:”+content+”;$(“#resText”).html(txtHtml););（3）$.getScript()方法：動(dòng)態(tài)加載 JS 文件JQuery 加載 JS 文件方法：$(.createElement(“script”).attr(“src” , “test.js”).appendTo(“head”);或 $(“”).appendTo(“head”);以上方法并不是很理想，$.getScript()方法可以像加載一個(gè) HTML 片段一樣來直接

48、加載 JS 文件，并且不需要對 JavaScript 文件進(jìn)行處理，JavaScript 文件會(huì)自動(dòng)執(zhí)行，例：$.getScript ( test.js , function () . );/回調(diào)函數(shù)為可選，會(huì)在 JS 文件成功載入后運(yùn)行。（4）$.getJSON()方法：用來加載 JSON 文件。語法結(jié)構(gòu)：$.getJSON（Json 文件【，回調(diào)函數(shù)】）；$.getJSON ( test.json , function (data) Varhtml=;$(#resText).empty();$.each ( data , function ( commentIndex , comment

49、) Html += +comment username+:+commentcontent+”;);$(#resText).html ( Html););【注：$.each()與 JQuery 對象的 each()方法不同，它是一個(gè)全局函數(shù)，不操作 JQuery 對象，以一個(gè)數(shù)組或?qū)ο鬄榈?1 個(gè)參數(shù)，以一個(gè)回調(diào)函數(shù)為第 2 個(gè)參數(shù)?；卣{(diào)函數(shù)有 2 個(gè)參數(shù)：第1 個(gè)為對象成員或數(shù)組索引，第 2 個(gè)為對應(yīng)變量或內(nèi)容。如果要退出循環(huán)，在$.each()中返回 False 即可。】（5）$.ajax()方法：是 JQuery 最底層的 Ajax 實(shí)現(xiàn)，結(jié)構(gòu)為 $.ajax ( options );常用

50、參數(shù)如下表：參數(shù)名稱類型說明請求方式，默認(rèn)為GetTypeStringObject 和 String發(fā)送到服務(wù)器的數(shù)據(jù)。Get 請求中將附加在 URL 后，如果不是字符串將自動(dòng)轉(zhuǎn)換為字符串格式。對象必須為key/value 格式。Data發(fā)送請求前可以修改XMLHttpRequest 對象的函數(shù)，例如添加自定義 Http 頭。如果返回 False 可以取消本次 Ajax 請求。其參數(shù)只有一個(gè) XMLHttpRequest 對象beforeSendFunction請求成功后調(diào)用回調(diào)函數(shù)，有 2 個(gè)參數(shù)：SucsFunction由服務(wù)器返回的 da描述狀態(tài)的字符串ype 指定的數(shù)據(jù)是否異步提交，為

51、 true 時(shí)異步，false 時(shí)同步提交Async默認(rèn)為 true，表示會(huì)觸發(fā)全局 Ajax 事件。AjaxStart 和 AjaxStop可用于控制各種 Ajax 事件Global給 Ajax 返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)，有 data 和 type 兩個(gè)參數(shù)，data 是返回原始數(shù)據(jù)，type 是調(diào)用 Ajax 時(shí)提供的 da ype 參數(shù)。函數(shù)返回值將由 JQuery 進(jìn)一步處理。dataFilterFunction在一個(gè) jsonp 請求中重寫回調(diào)函數(shù)的名字jsonpString響應(yīng) HTTP認(rèn)證請求的passwordString只有當(dāng)請求時(shí) daype 為”jsonp”或”scr

52、ipt”，且 type 是 GET 時(shí)scriptCharsetString才會(huì)用于強(qiáng)制修改字符集編碼prosData默認(rèn)為 true，默認(rèn)情況發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象usernameString響應(yīng) HTTP認(rèn)證請求的用戶名ifModified默認(rèn)為 false，僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)contentTypeString當(dāng)發(fā)送信息至服務(wù)器時(shí)， 內(nèi)容編碼類型 。默認(rèn)為 “application/x-www-form-urlencoded”。cache默認(rèn)為true，（當(dāng) daype 為 script 時(shí)默認(rèn)為 false），設(shè)置為 false時(shí)將不會(huì)從瀏覽器緩存中加載請求信息ErrorF

53、unction請求失敗時(shí)調(diào)用的函數(shù)，有 3 個(gè)參數(shù)：（1）XMLHttpRequest 對象；（2）錯(cuò)誤信息 textSus（3）捕獲的錯(cuò)誤 errorThrown 對象CompleteFunction請求完成后調(diào)用的回調(diào)函數(shù)（請求成功或失敗調(diào)用）。參數(shù)是 XMLHttpRequest 對象和一個(gè)描述成功請求類型的字符串daypeString預(yù)期服務(wù)器返回的數(shù)據(jù)類型，如果不指定，JQuery 將自動(dòng)根據(jù)Http 包的 Mime 信息返回 responseXML 和 responseText，并作為回調(diào)函數(shù)傳遞。可用類型有 XML/html/script/json/textTimeoutNumb

54、er請求超時(shí)時(shí)間（毫秒），將覆蓋$.ajaxSetup()方法的全局設(shè)置urlString發(fā)送請求的地址，默認(rèn)為當(dāng)前頁3、序列化元素（1）Serialize()方法：將 DOM 元素內(nèi)容序列化為字符串Ajax 中，為了獲取表單元素，必須將字可以采用如下方法：逐個(gè)封裝到 data 參數(shù)中，對于元素較少的表單$.get ( “get1.ashx”, username :$(#username).val() , content :$(#content).val() ,function() );但表單元素復(fù)雜時(shí)這種方式就缺乏彈性，這時(shí)可以使用 JQuery 提供的另一個(gè)簡化方法序列化元素方法 Seri

55、alize()，用于 Ajax 請求，例：$( “get1.ashx”, $(“#form1”).serialize() , function () ); /結(jié)果與上面代碼相同，且更靈活【注：$.get()方法中的 data 參數(shù)不僅可以使用方式（$(“#username”).val()），也可以使用字符串方式（”username=”ponent($(#username).val()），字符串方式需要注意對中文進(jìn)行編碼，如果不希望這么麻煩，可以使用 Serialize()方法，它會(huì)自動(dòng)編碼，另外其他選擇器選取的表單元素也能使用它，如：$(“:checkbox,:radio”).serializ

56、e(); /序列化選中的值?！浚?）SerializeArray()方法：將 DOM 元素序列化為數(shù)組示例：Var fields=$(“:checkbox,:radio”).serializeArray() ;$.each ( fields , function ( i , field)$(“#results”).append ( field.value +”,”););(3) $.param()方法：是序列化方法的Varobj=a:1 , b:2 , c:3 ;，用來對一個(gè)數(shù)組或?qū)ο蟀?key/value 進(jìn)行序列化Vark=$.param(obj); /結(jié)果為：a=1&b=2&c=34、A

57、jax 全局函數(shù)方法說明Ajax 請求錯(cuò)誤時(shí)執(zhí)行的函數(shù)，捕捉到的錯(cuò)誤可以作為最后一個(gè)參數(shù)ajaxError (callback)Ajax 請求成功時(shí)執(zhí)行的函數(shù)ajaxSucs (callback)Ajax 請求結(jié)束時(shí)執(zhí)行的函數(shù)ajaxStop (callback)【注：如果不想觸發(fā)全局事件，則可以將$.ajax(options)方法中的 global 參數(shù)設(shè)置為 false?！縜jaxStart (callback)Ajax 請求開始時(shí)執(zhí)行的函數(shù)ajaxSend (callback)Ajax 請求發(fā)送前執(zhí)行的函數(shù)plete (callback)Ajax 請求完成時(shí)執(zhí)行的函數(shù)七、插件的寫法和使用

58、1、表單驗(yàn)證插件（1）Validation 插件：標(biāo)準(zhǔn)的驗(yàn)證方法庫，需要如果配合 JQuery.metadata.js（一個(gè)支持固定格式使用，默認(rèn)為英文。的 JQuery 插件）使用，可以將 Validation插件的驗(yàn)證規(guī)則與 HTML 代碼完全分離，利用字段 name 屬性實(shí)現(xiàn)驗(yàn)證規(guī)則，更好的整合到代碼中，示例如下：首先引入這兩個(gè)庫文件，然后添加如下 JS 代碼：$(“#form1”).validate ( rules:username:/字段 name 屬性required:true,minlength:2/最少 2 位字符,:required:true,:true, url:”url”

59、 ,comment:”required”);【注：如果要驗(yàn)證中文需要加載中文驗(yàn)證信息庫JQuery.val.js】【注：自定義驗(yàn)證規(guī)則提示信息：】（2）美化提示信息對于 Validation 插件來說，想為驗(yàn)證提示信息加入漂亮的提示在 JQuery 代碼中增加如下代碼：errorElement : “em” ,/用來創(chuàng)建錯(cuò)誤提示信息sucs : function (label) /驗(yàn)證成功后執(zhí)行的函數(shù)/label 指向上面那個(gè)錯(cuò)誤提示信息em也是很簡單的事情，首先s “);/清空錯(cuò)誤提示信息并加上自定義樣式label.text ( “) . addClass (“suc然后在CSS 創(chuàng)建相應(yīng)樣

60、式，以便和 errorElement 相關(guān)聯(lián)。em.error background:url(“images/a.gif”)no repeat0px0px;em.sucs background:url(“images/a.gif”)no repeat0px0px;（3）自定義驗(yàn)證規(guī)則示例為驗(yàn)證，HTML 代碼如下：=7+9自定義驗(yàn)證規(guī)則方法：$.validator.addMethod(“formula”,/驗(yàn)證方法名function (value , element , param ) /驗(yàn)證規(guī)則 returnvalue = eval (param ); , 請正確輸入公式計(jì)算后的結(jié)果/驗(yàn)證提