jQuery使用手冊

1、jQuery使用手冊 （轉(zhuǎn)） jQuery是一款同prototype一樣優(yōu)秀js開發(fā)庫類，特別是對css和XPath的支持，使我們寫js變得更加方便！如果你不是個(gè)js高手又想寫出優(yōu) 秀的js效果，jQuery可以幫你達(dá)到目的！ $(document).ready(function() $(a).click(function() alert(Hello world!); );); 上邊的效果是點(diǎn)擊文檔中所有a標(biāo)簽時(shí)將彈出對話框，$(a) 是一個(gè)jQuery選擇器，$本身表示一個(gè)jQuery類，所有$()是構(gòu)造一個(gè)jQuery對象，click()是這個(gè)對象的方法，同理$(document)也是一個(gè)

2、jQuery對象，ready(fn)是$(document)的方法，表示當(dāng)document全部下載完畢時(shí)執(zhí)行函數(shù)。 在進(jìn)行下面內(nèi)容之前我還要說明一點(diǎn)$(p)和$(#p)的區(qū)別,$(p)表示取所有p標(biāo)簽()的元素,$(#p)表示取id為p()的元素.我將從以下幾個(gè)內(nèi)容來講解jQuery的使用:1:核心部分2:DOM操作3:css操作4:javascript處理5:動(dòng)態(tài)效果6:event事件 7:ajax支持 8:插件程序 一：核心部分$(expr)說明：該函數(shù)可以通過css選擇器，Xpath或html代碼來匹配目標(biāo)元素，所有的jQuery操作都以此為基礎(chǔ)參數(shù)：expr：字符串，一個(gè)查詢表達(dá)式或一

3、段html字符串例子：未執(zhí)行jQuery前：one two three jQueryjQuery代碼及功能： function jq() alert($(div p).html(); 運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，彈出對話框文字為two，即div標(biāo)簽下p元素的內(nèi)容 function jq() $(Hello).appendTo(body);運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，向body中添加“Hello”$(elem)說明：限制jQuery作用于一個(gè)特定的dom元素，這個(gè)函數(shù)也接受xml文檔和windows對象參數(shù)： elem：通過jQuery對象壓縮的DOM元素例子：未執(zhí)行jQuery

4、前： one two threejQueryjQuery代碼及功能： function jq() alert($(document).find(div p).html();運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，彈出對話框文字為two，即div標(biāo)簽下p元素的內(nèi)容 function jq() $(document.body).background(black);運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，背景色變成黑色$(elems)說明：限制jQuery作用于一組特定的DOM元素參數(shù)： elem：一組通過jQuery對象壓縮的DOM元素例子：未執(zhí)行jQuery前： jQueryjQuery代碼及功能： f

5、unction jq() $(form1.elements ).hide(); 運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，隱藏form1表單中的所有元素。$(fn)說明：$(document).ready()的一個(gè)速記方式，當(dāng)文檔全部載入時(shí)執(zhí)行函數(shù)。可以有多個(gè)$(fn)當(dāng)文檔載入時(shí)，同時(shí)執(zhí)行所有函數(shù)！參數(shù)：fn (Function):當(dāng)文檔載入時(shí)執(zhí)行的函數(shù)！例子： $( function() $(document.body).background(black);)運(yùn)行：當(dāng)文檔載入時(shí)背景變成黑色，相當(dāng)于onLoad。$(obj)說明：復(fù)制一個(gè)jQuery對象，參數(shù)：obj (jQuery): 要復(fù)制的

6、jQuery對象例子：未執(zhí)行jQuery前： one twothreejQueryjQuery代碼及功能： function jq() var f = $(div); alert($(f).find(p).html() 運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，彈出對話框文字為two，即div標(biāo)簽下p元素的內(nèi)容。each(fn)說明：將函數(shù)作用于所有匹配的對象上參數(shù)：fn (Function): 需要執(zhí)行的函數(shù)例子：未執(zhí)行jQuery前： jQueryjQuery代碼及功能： function jq() $(img).each(function() this.src = 2.jpg; );運(yùn)行：當(dāng)點(diǎn)

7、擊id為test的元素時(shí)，img標(biāo)簽的src都變成了2.jpg。eq(pos)說明：減少匹配對象到一個(gè)單獨(dú)得dom元素參數(shù)：pos (Number): 期望限制的索引，從0 開始例子：未執(zhí)行jQuery前： This is just a test.So is thisjQueryjQuery代碼及功能： function jq() alert($(p).eq(1).html()運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，alert對話框顯示：So is this，即第二個(gè)標(biāo)簽的內(nèi)容get() get(num)說明：獲取匹配元素，get(num)返回匹配元素中的某一個(gè)元素參數(shù)：get (Number):

8、 期望限制的索引，從0 開始例子：未執(zhí)行jQuery前： This is just a test.So is thisjQueryjQuery代碼及功能： function jq() alert($(p).get(1).innerHTML);運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，alert對話框顯示：So is this，即第二個(gè)標(biāo)簽的內(nèi)容注意get和eq的區(qū)別，eq返回的是jQuery對象，get返回的是所匹配的dom對象，所有取$(p).eq(1)對象的內(nèi)容用jQuery方法html()，而取$(p).get(1)的內(nèi)容用innerHTMLindex(obj)說明：返回對象索引參數(shù)：obj

9、(Object): 要查找的對象例子：未執(zhí)行jQuery前： jQueryjQuery代碼及功能： function jq() alert($(div).index(document.getElementById(test1); alert($(div).index(document.getElementById(test2);運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，兩次彈出alert對話框分別顯示0，1size() Length說明：當(dāng)前匹配對象的數(shù)量，兩者等價(jià)例子：未執(zhí)行jQuery前： jQueryjQuery代碼及功能： function jq() alert($(img).length)

10、;運(yùn)行：當(dāng)點(diǎn)擊id為test的元素時(shí)，彈出alert對話框顯示2，表示找到兩個(gè)匹配對象 二：DOM操作屬性我們以為例，在原始的javascript里面可以用var o=document.getElementById(a)取的id為a的節(jié)點(diǎn)對象，在用o.src來取得或修改該節(jié)點(diǎn)的scr屬性，在jQuery里$(#a)將得到j(luò)Query對象 ，然后可以用jQuery提供的很多方法來進(jìn)行操作，如$(#a).scr()將得到5.jpg,$(#a).scr(1.jpg)將該對象src屬性改為1,jpg。下面我們來講jQuery提供的眾多jQuery方法，方便大家快速對DOM對象進(jìn)行操作herf() he

11、rf(val)說明：對jQuery對象屬性herf的操作。例子：未執(zhí)行jQuery前 jQueryjQuery代碼及功能： function jq() alert($(#test).href(); $(#test).href(2.html);運(yùn)行：先彈出對話框顯示id為test的連接url，在將其url改為2.html，當(dāng)彈出對話框后會看到轉(zhuǎn)向到2.html同理，jQuery還提供類似的其他方法，大家可以分別試驗(yàn)一下：herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val)src() sr

12、c (val) title() title (val) val() val(val)操作after(html) 在匹配元素后插入一段html jQueryjQuery代碼及功能： function jq() $(#test).after(Hello); 執(zhí)行后相當(dāng)于： jQueryHelloafter(elem) after(elems) 將指定對象elem或?qū)ο蠼Melems插入到在匹配元素后 afterjQueryjQuery代碼及功能 function jq() $(a).after($(#test); 執(zhí)行后相當(dāng)于 jQueryafterappend(html)在匹配元素內(nèi)部，且末尾插入

13、指定html jQueryjQuery代碼及功能： function jq() $(#test).append(Hello); 執(zhí)行后相當(dāng)于 jQueryHello同理還有append(elem) append(elems) before(html) before(elem) before(elems)請執(zhí)行參照append和after的方來測試、理解！appendTo(expr) 與append(elem)相反 afterjQueryjQuery代碼及功能 function jq() $(a). appendTo ($(#test); 執(zhí)行后相當(dāng)于 afterjQuery clone() 復(fù)

14、制一個(gè)jQuery對象 afterjQueryjQuery代碼及功能： function jq() $(#test).clone().appendTo($(a); 復(fù)制$(#test)然后插入到后,執(zhí)行后相當(dāng)于 afterjQueryafterempty() 刪除匹配對象的所有子節(jié)點(diǎn) span afterjQueryjQuery代碼及功能： function jq() $(#test).empty(); 執(zhí)行后相當(dāng)于 jQueryinsertAfter(expr) insertBefore(expr) 按照官方的解釋和我的幾個(gè)簡單測試insertAfter(expr)相當(dāng)于before(ele

15、m),insertBefore(expr)相當(dāng)于after (elem)prepend (html) prepend (elem) prepend (elems) 在匹配元素的內(nèi)部且開始出插入通過下面例子區(qū)分append(elem) appendTo(expr) prepend (elem) pdiv執(zhí)行$(#a).append($(div) 后相當(dāng)于 P div執(zhí)行$(#a).appendTo($(div) 后 相當(dāng)于 div p執(zhí)行$(#a).prepend ($(div) 后 相當(dāng)于 div Premove() 刪除匹配對象注意區(qū)分empty()，empty()移出匹配對象的子節(jié)點(diǎn)，re

16、move()，移出匹配對象wrap(htm) 將匹配對象包含在給出的html代碼內(nèi) Test Paragraph. jQueryjQuery代碼及功能： function jq() $(p).wrap(); 執(zhí)行后相當(dāng)于 Test Paragraph.wrap(elem) 將匹配對象包含在給出的對象內(nèi) Test Paragraph.jQueryjQuery代碼及功能： function jq() $(p).wrap( document.getElementById(content) );執(zhí)行后相當(dāng)于 Test Paragraph.遍歷、組合add(expr) 在原對象的基礎(chǔ)上在附加符合指定表達(dá)

17、式的jquery對象 HelloHello AgainjQueryjQuery代碼及功能： function jq() var f=$(p).add(span); for(var i=0;i $(f).size();i+) alert($(f).eq(i).html();執(zhí)行$(p)得到匹配的對象，有兩個(gè)，add(span)是在(p)的基礎(chǔ)上加上匹配的對象，所有一共有3個(gè)，從上面的函數(shù)運(yùn)行結(jié)果可以看到$(p).add(span)是3個(gè)對象的集合，分別是Hello，Hello Again，Hello Again。add(el) 在匹配對象的基礎(chǔ)上在附加指定的dom元素。 $(p).add(doc

18、ument.getElementById(a);add(els) 在匹配對象的基礎(chǔ)上在附加指定的一組對象，els是一個(gè)數(shù)組。HelloHello AgainjQuery代碼及功能： function jq() var f=$(p).add(document.getElementById(a), document.getElementById(b) for(var i=0;i $(f).size();i+) alert($(f).eq(i).html();注意els是一個(gè)數(shù)組，這里的 不能漏掉。ancestors () 一依次以匹配結(jié)點(diǎn)的父節(jié)點(diǎn)的內(nèi)容為對象,根節(jié)點(diǎn)除外（有點(diǎn)不好理解，看看下面例子

19、就明白了） one two jQuery代碼及功能： function jq() var f= $(u).ancestors(); for(var i=0;i $(f).size();i+) alert($(f).eq(i).html();第一個(gè)對象是以的父節(jié)點(diǎn)的內(nèi)容為對象， two 第一個(gè)對象是以的父節(jié)點(diǎn)的父節(jié)點(diǎn)（div）的內(nèi)容為對象，onetwo 一般一個(gè)文檔還有和，依次類推下去。ancestors (expr) 在ancestors（）的基礎(chǔ)上之取符合表達(dá)式的對象如上各例子講var f改為var f= $(u).ancestors(“div”),則只返回一個(gè)對象： onetwo chil

20、dren() 返回匹配對象的子介點(diǎn) one twojQuery代碼及功能： function jq() alert($(#ch).children().html();$(#ch).children()得到對象 two .所以.html()的結(jié)果是”two”children(expr) 返回匹配對象的子介點(diǎn)中符合表達(dá)式的節(jié)點(diǎn) two threejQuery代碼及功能 function jq() alert($(#ch).children(“#sp”).html();$(#ch).children()得到對象twothree .$(#ch).children(“#sp”)過濾得到three par

21、ent () parent (expr)取匹配對象父節(jié)點(diǎn)的。參照children幫助理解contains(str) 返回匹配對象中包含字符串str的對象 This is just a test.So is thisjQuery代碼及功能： function jq() alert($(p).contains(test).html();$(p)得到兩個(gè)對象，而包含字符串”test”只有一個(gè)。所有$(p).contains(test)返回 This is just a test. end() 結(jié)束操作,返回到匹配元素清單上操作前的狀態(tài).filter(expr) filter(exprs) 過濾現(xiàn)實(shí)匹

22、配符合表達(dá)式的對象 exprs為數(shù)組，注意添加“ ” HelloHello AgainAnd AgainjQuery代碼及功能： function jq() alert($(p).filter(.selected).html()$(p)得到三個(gè)對象，$(p).contains(test)只返回class為selected的對象。find(expr) 在匹配的對象中繼續(xù)查找符合表達(dá)式的對象 HelloHello AgainAnd AgainQuery代碼及功能： function jq() alert($(p).find(#a).html()在$(p)對象中查找id為a的對象。is(expr)

23、判斷對象是否符合表達(dá)式,返回boolen值 HelloHello AgainAnd AgainQuery代碼及功能： function jq() alert($(#a).is(p);在$(#a )是否符合jquery表達(dá)式。大家可以用$(#a).is(div); (#a).is(#a)多來測試一下next() next(expr) 返回匹配對象剩余的兄弟節(jié)點(diǎn) HelloHello AgainAnd AgainjQuery代碼及功能 function jq() alert($(p).next().html(); alert($(p).next(.selected).html();$(p).nex

24、t()返回 Hello Again , And Again 兩個(gè)對象$(p).next(.selected)只返回 And Again 一個(gè)對象prev () prev (expr) 參照next理解not(el) not(expr) 從jQuery對象中移出匹配的對象，el為dom元素，expr為jQuery表達(dá)式。 onetwojQueryjQuery代碼及功能： function js() alert($(p).not(document.getElementById(a).html(); alert($(p).not(“#a”).html();$(p)由兩個(gè)對象，排除后的對象為one s

25、iblings () siblings (expr) jquery匹配對象中其它兄弟級別的對象 one twojQueryjQuery代碼及功能： function js() alert($(div).siblings().eq(1).html();$(div).siblings()的結(jié)果實(shí)返回兩個(gè)對象one，jQuery alert($(div).siblings(“a”)返回一個(gè)對象jQuery 其他addClass(class) 為匹配對象添加一個(gè)class樣式removeClass (class) 將第一個(gè)匹配對象的某個(gè)class樣式移出attr (name) 獲取第一個(gè)匹配對象的屬性

26、 jQuery jQuery代碼及功能： function js() alert($(img).attr(src);返回test.jpgattr (prop) 為第一個(gè)匹配對象的設(shè)置屬性，prop為hash對象，用于為某對象批量添加眾多屬性 jQueryjQuery代碼及功能： function js() $(img).attr( src: test.jpg, alt: Test Image ); 運(yùn)行結(jié)果相當(dāng)于attr (key,value) 為第一個(gè)匹配對象的設(shè)置屬性，key為屬性名，value為屬性值 jQueryjQuery代碼及功能 function js() $(img).attr

27、(“src”,”test.jpg”); 運(yùn)行結(jié)果相當(dāng)于removeAttr (name) 將第一個(gè)匹配對象的某個(gè)屬性移出 jQueryjQuery代碼及功能： function js() $(img). removeAttr(alt); 運(yùn)行結(jié)果相當(dāng)于toggleClass (class) 將當(dāng)前對象添加一個(gè)樣式，不是當(dāng)前對象則移出此樣式，返回的是處理后的對象 HelloHello AgainjQuery$(p)的結(jié)果是返回對象 Hello,Hello Again $(p).toggleClass(selected)的結(jié)果是實(shí)返回對象 Hello, Hello Again 三：CSS操作 傳統(tǒng)

28、javascript對css的操作相當(dāng)繁瑣，比如css取它的background語法是 document.getElementById(a).style.background，而jQuery對css更方便的操作，$(#a).background()，$(#a).background(“red”)$(#a)得到j(luò)Query對象 $(#a).background()將取出該對象的background樣式。$(#a).background(“red”)將該對象的background樣式設(shè)為redjQuery提供了以下方法，來操作cssbackground () background (val) co

29、lor() color(val) css(name) css(prop) css(key, value) float() float(val) height() height(val) width() width(val) left() left(val) overflow() overflow(val) position() position(val) top() top(val)這里需要講解一下css(name) css(prop) css(key, value)，其他的看名字都知道什么作用了！ csstestcss(name) 獲取樣式名為name的樣式 $(#a).css(color)

30、 將得到樣式中color值red，(#a).css(background )將得到bluecss(prop) prop是一個(gè)hash對象，用于設(shè)置大量的css樣式$(#b).css( color: red, background: blue );最終效果是test, color: red, background: blue ，hash對象，color為key，red為value，css(key, value) 用于設(shè)置一個(gè)單獨(dú)得css樣式$(#b).css(color,red);最終效果是test 四：JavaScript處理$.browser() 判斷瀏覽器類型，返回boolen值 $(fu

31、nction() if($.browser.msie) alert(這是一個(gè)IE瀏覽器); else if($.browser.opera) alert(這是一個(gè)opera瀏覽器);)當(dāng)頁面載入式判斷瀏覽器類型，可判斷的類型有msie、mozilla、opera、safari$.each(obj, fn) obj為對象或數(shù)組，fn為在obj上依次執(zhí)行的函數(shù)，注意區(qū)分$().each() $.each( 0,1,2, function(i) alert( Item # + i + : + this ); ); 分別將0，1，2為參數(shù)，傳入到function(i)中 $.each( name: J

32、ohn, lang: JS , function(i) alert( Name: + i + , Value: + this ); name: John, lang: JS 為一個(gè)hash對象，依次將hash中每組對象傳入到函數(shù)中$.extend(obj, prop) 用第二個(gè)對象擴(kuò)展第一個(gè)對象 var settings = validate: false, limit: 5, name: foo ;var options = validate: true, name: bar ;$.extend(settings, options);執(zhí)行后settings對象為 validate: true

33、, limit: 5, name: bar 可以用下面函數(shù)來測試 $(function() var settings = validate: false, limit: 5, name: foo ; var options = validate: true, name: bar ; $.extend(settings, options); $.each(settings, function(i) alert( i + = + this ); );)$.grep(array,fn) 通過函數(shù)fn來過濾array，將array中的元素依次傳給fn，fn必須返回一個(gè)boolen，如fn返回true，

34、將被過濾 $(function() var arr= $.grep( 0,1,2,3,4, function(i) return i 2; ); $.each(arr, function(i) alert(i); );)我們可以看待執(zhí)行$.grep后數(shù)組0,1,2,3,4變成0，1$.merge(first, second) 兩個(gè)參數(shù)都是數(shù)組，排出第二個(gè)數(shù)組中與第一個(gè)相同的，再將兩個(gè)數(shù)組合并 $(function() var arr = $.merge( 0,1,2, 2,3,4 ) $.each(arr, function(i) alert(i); );)可以看出arr的結(jié)果為0,1,2,3

35、,4$.trim(str) 移出字符串兩端的空格 $.trim( hello, how are you? )的結(jié)果是hello, how are you? 五：動(dòng)態(tài)效果 在將這部分之前我們先看個(gè)例子，相信做網(wǎng)頁的朋友都遇到n級菜單的情景，但點(diǎn)擊某菜單按鈕時(shí)，如果它的子菜單是顯示的，則隱藏子菜單，如果子菜單隱藏，則顯示出來，傳統(tǒng)的javascript做法是先用getElementById取出子菜單所在容器的id，在判斷該容器的style.display是否等于none，如果等于則設(shè)為block,如果不等于這設(shè)為none，如果在將效果設(shè)置復(fù)雜一點(diǎn)，當(dāng)點(diǎn)擊按鈕時(shí)，不是忽然隱藏和顯示子菜單，而是高度平

36、滑的轉(zhuǎn)變，這時(shí)就要通過setTimeout來設(shè)置子菜單的height了，再復(fù)雜一點(diǎn)透明度也平滑的消失和顯現(xiàn)，這時(shí)顯現(xiàn)下來需要編寫很多代碼，如果js基礎(chǔ)不好的朋友可能只能從別人寫好的代碼拿過來修改了！jQuery實(shí)現(xiàn)上面效果只需要1句話就行，$(#a).toggle(slow),學(xué)完jQuery后還需要抄襲修改別人的代碼嗎？下面我們逐個(gè)介紹jQuery用于效果處理的方法。hide() 隱藏匹配對象 Hello AgainjQuery當(dāng)點(diǎn)擊連接時(shí),id為a的對象的display變?yōu)閚one。show() 顯示匹配對象hide(speed) 以一定的速度隱藏匹配對象，其大?。ㄩL寬）和透明度都逐漸變化

37、到0，speed有3級(slow, normal, fast)，也可以是自定義的速度。show(speed) 以一定的速度顯示匹配對象，其大?。ㄩL寬）和透明度都由0逐漸變化到正常hide(speed, callback) show(speed, callback) 當(dāng)顯示和隱藏變化結(jié)束后執(zhí)行函數(shù)callbacktoggle() toggle(speed) 如果當(dāng)前匹配對象隱藏，則顯示他們，如果當(dāng)前是顯示的，就隱藏，toggle(speed),其大?。ㄩL寬）和透明度都隨之逐漸變化。 jQueryfadeIn(speeds) fadeOut(speeds) 根據(jù)速度調(diào)整透明度來顯示或隱藏匹配對象，

38、注意有別于hide(speed)和show(speed)，fadeIn和fadeOut都只調(diào)整透明度，不調(diào)整大小 jQuery 點(diǎn)擊連接后可以看到圖片逐漸顯示。fadeIn(speed, callback) fadeOut(speed, callback) callback為函數(shù)，先通過調(diào)整透明度來顯示或隱藏匹配對象，當(dāng)調(diào)整結(jié)束后執(zhí)行callback函數(shù) jQuery 點(diǎn)擊連接后可以看到圖片逐漸顯示,顯示完全后彈出對話框fadeTo(speed, opacity, callback) 將匹配對象以speed速度調(diào)整倒透明度opacity，然后執(zhí)行函數(shù)callback。Opacity為最終顯示的

39、透明度(0-1). jQuery 大家可以看一下自己看看效果，如果不用jQuery，編寫原始javascript腳本可能很多代碼！slideDown(speeds) 將匹配對象的高度由0以指定速率平滑的變化到正常！ jQueryslideDown(speeds,callback) 將匹配對象的高度由0變化到正常！變化結(jié)束后執(zhí)行函數(shù)callbackslideUp(slow) slideUp(speed, callback) 匹配對象的高度由正常變化到0slideToggle(slow) 如果匹配對象的高度正常則逐漸變化到0，若為0，則逐漸變化到正常 六：事件處理 hover(Function,

40、Function) 當(dāng)鼠標(biāo)move over時(shí)觸發(fā)第一個(gè)function，當(dāng)鼠標(biāo)move out時(shí)觸發(fā)第二個(gè)function樣式：.redcolor:#FF0000Html代碼： sdfjQuery代碼及效果 $(function() $(#a).hover(function()$(this).addClass(red);, function() $(this).removeClass(red); );)最終效果是當(dāng)鼠標(biāo)移到id為a的層上時(shí)圖層增加一個(gè)red樣式，離開層時(shí)移出red樣式toggle(Function, Function) 當(dāng)匹配元素第一次被點(diǎn)擊時(shí)觸發(fā)第一個(gè)函數(shù)，當(dāng)?shù)诙伪稽c(diǎn)擊時(shí)觸發(fā)第二個(gè)函數(shù)樣式：.redcolor:#FF0000Html代碼： sdfjQuery代碼及效果 $(function() $(#a).