【正文】 前： img src=/ img src=/ a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ alert($(img).length)。a39。下面我們來(lái)講 jQuery 提供的眾多jQuery 方法，方便大家快速對(duì) DOM 對(duì)象進(jìn)行操作 herf() herf(val) 說(shuō)明：對(duì) jQuery 對(duì)象屬性 herf 的操作。 $(test).href()。 } 執(zhí)行后相當(dāng)于： a href= id=test onClick=jq()jQuery/abHello/b after(elem) after(elems) 將指定對(duì)象 elem 或?qū)ο蠼M elems 插入到在匹配元素后 p id=testafter/pa href= onClick=jq()jQuery/ a jQuery 代碼及功能 function jq(){ $(a).after($(test))。 } 執(zhí)行后相當(dāng)于 a href= onClick=jq()jQuerybHello/b/a 同理還有 append(elem) append(elems) before(html) before(elem) before(elems)請(qǐng)執(zhí)行參照 append 和 after的方來(lái)測(cè)試、理解！ appendTo(expr) 與 append(elem)相反 p id=testafter/pa href= onClick=jq()jQuery/ a jQuery 代碼及功能 function jq(){ $(a). appendTo ($(test))。 } 復(fù)制 $(test)然后插入到 a后 ,執(zhí)行后相當(dāng)于 p id=testafter/pa href= onClick=jq()jQuery/ap id=testafter/p empty() 刪除匹配對(duì)象的所有子節(jié)點(diǎn) div id=test spanspan/span pafter/p /div a href= onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ $(test).empty()。wrap39。 } 執(zhí)行后相當(dāng)于 div class=39。pTest Paragraph./p/div wrap(elem) 將匹配對(duì)象包含在給出的對(duì)象內(nèi) pTest Paragraph./pdiv id=content/div a href= onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ $(p).wrap( (39。) )。 for(var i=0。i++){ alert($(f).eq(i).html())。 add(el) 在匹配對(duì)象的基礎(chǔ)上在附加指定的 dom 元素。 add(els) 在匹配對(duì)象的基礎(chǔ)上在附加指定的一組對(duì)象， els 是一個(gè)數(shù)組 。i $(f).size()。} } 注意 els 是一個(gè)數(shù)組，這里的 [ ]不能漏掉。 for(var i=0。i++){ alert($(f).eq(i).html())。 ancestors (expr) 在 ancestors（）的基礎(chǔ)上之取符合表達(dá)式的對(duì)象 如上各例子講 var f 改為 var f= $(u).ancestors(“div”),則只返回一個(gè)對(duì)象： [ pone/pspanutwo/u/span ] children() 返回匹配對(duì)象的子介點(diǎn) pone/p div id=ch spantwo/span /div jQuery 代碼及功能： function jq(){ alert($(ch).children().html())。 } $(ch).children()得到對(duì)象 [spantwo/spanspan id=spthree/span ]. $(ch).children(“sp”)過(guò)濾得到 [span id=spthree/span ] parent () parent (expr)取匹配對(duì)象父節(jié)點(diǎn)的。 } $(p)得到兩個(gè)對(duì)象，而包含字符串 ”test”只 有一個(gè)。 find(expr) 在匹配的對(duì)象中繼續(xù)查找符合表達(dá)式的對(duì)象 pHello/pp id=aHello Again/pp class=selectedAnd Again/p Query 代碼及功能： function jq(){ alert($(p).find(a).html()) } 在 $(p)對(duì)象中查找 id 為 a 的對(duì)象。 } 在 $(a )是否符合 jquery 表達(dá)式。 (a).is(a)多來(lái)測(cè)試一下 next() next(expr) 返回匹配對(duì)象剩余的兄弟節(jié)點(diǎn) pHello/pp id=aHello Again/pp class=selectedAnd Again/p jQuery 代碼及功能 function jq(){ alert($(p).next().html())。 } $(p).next() 返回 [ p id=aHello Again/p , p class=selectedAnd Again/p ]兩個(gè)對(duì)象 $(p).next(.selected)只返回 [p class=selectedAnd Again/p ]一個(gè)對(duì)象 prev () prev (expr) 參照 next 理解 not(el) not(expr) 從 jQuery 對(duì)象中移出匹配的對(duì)象， el 為 dom 元素， expr 為jQuery 表達(dá)式。 alert($(p).not(“a”).html())。 } $(div).siblings() 的 結(jié) 果 實(shí) 返 回 兩 個(gè) 對(duì) 象 [pone/p ， a href= onclick=js()jQuery/a ] alert($(div).siblings(“a”)返回一個(gè)對(duì)象 [a href= onclick=js()jQuery/a ] 其他 addClass(class) 為匹配對(duì)象添加一個(gè) class 樣式 removeClass (class) 將第一個(gè)匹配對(duì)象的某個(gè) class 樣式移出 attr (name) 獲取第一個(gè)匹配對(duì)象的屬性 img src=/a href= onclick=js()jQuery/a jQuery 代碼及功能： function js(){ alert($(img).attr(src))。 } 運(yùn)行結(jié)果相當(dāng)于 img src= alt=Test Image/ attr (key,value) 為第一個(gè)匹配對(duì)象的設(shè)置屬性， key 為屬性名， value 為屬性值 img/a href= onclick=js()jQuery/a jQuery 代碼及功能 function js(){ $(img).attr(“src”,””)。 } 運(yùn)行結(jié)果相當(dāng)于 img / toggleClass (class) 將當(dāng)前對(duì)象添加一個(gè)樣式，不是當(dāng)前對(duì)象則移出此樣式，返回的是處理后的對(duì)象 pHello/pp class=selectedHello Again/pa href= onclick=js()jQuery/a $(p) 的 結(jié) 果 是 返 回 對(duì) 象 [pHello/p,p class=selectedHello Again/p ] $(p).toggleClass(selected) 的 結(jié) 果 是 實(shí) 返 回 對(duì) 象 [ p class=selectedHello/p, pHello Again/p ] jQuery 使用手冊(cè) 三 ： CSS 操作 傳統(tǒng) javascript 對(duì) css 的操作相當(dāng)繁瑣，比如 div id=a style=background:bluecss/div取它的 background 語(yǔ)法是 (a).，而 jQuery 對(duì) css 更方便的操作，$(a).background()， $(a).background(“red”) $(a)得到 jQuery 對(duì)象 [ div id=a … /div ] $(a).background()將取出該對(duì)象的 background 樣式。 color:redcss/divP id=btest/P css(name) 獲取樣式名為 name 的樣式 $(a).css(color) 將得到樣式中 color 值 red， (a).css(background )將得到 blue css(prop) prop 是一個(gè) hash 對(duì)象，用于設(shè)置大量的 css 樣式 $(b).css({ color: red, background: blue })。 color:redtest/p,{ color: red, background: blue }， hash 對(duì)象， color為 key， red為 value， css(key, value) 用于設(shè)置一個(gè)單獨(dú)得 css 樣式 $(b).css(color,red)。} else if($.) { alert(這是一個(gè) opera 瀏覽器 )。 })。 { name: John, lang: JS }為一個(gè) hash 對(duì)象，依次將 hash 中每組對(duì)象傳入到函數(shù)中 $.extend(obj, prop) 用第二個(gè)對(duì)象擴(kuò)展第一個(gè)對(duì)象 var settings = { validate: false, limit: 5, name: foo }。 $.extend(settings, options)。 var options = { validate: true, name: bar }。 $.each(settings, function(i){ alert( i + = + this )。 }) $.grep(array,fn) 通過(guò)函數(shù) fn 來(lái)過(guò)濾 array，將 array 中的元素依次傳給 fn， fn 必須返回一個(gè) boolen，如 fn 返回 true，將被過(guò)濾 $(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,4] $.trim(str) 移出字符串兩端的空格 $.trim( hello, how are you? )的結(jié)果是 hello, how are you? 五 ：動(dòng)態(tài)效果 在將這部分之前我們先看個(gè)例子，相信做網(wǎng)頁(yè)的朋友都遇到 n 級(jí)菜單的情景，但點(diǎn)擊某菜單按鈕時(shí)，如果它的子菜單是顯示的，則隱藏子菜單，如果子菜單隱藏，則顯示出來(lái)，傳統(tǒng)的javascript 做法是先用 getElementById 取出子菜單所在容器的 id，在判斷該容器的 是否等于 none，如果等于則設(shè)為 block,如果不等于這設(shè)為 none，如果在將效果設(shè)置復(fù)雜一點(diǎn)，當(dāng)點(diǎn)擊按鈕時(shí)，不是忽 然隱藏和顯示子菜單，而是高度平滑的轉(zhuǎn)變，這時(shí)就要通過(guò) setTimeout 來(lái)設(shè)置子菜單的 height 了，再?gòu)?fù)雜一點(diǎn)透明度也平滑