【文章內(nèi)容簡(jiǎn)介】 ) jquery 匹配對(duì)象中其它兄弟級(jí)別的對(duì) 象 pone/p div p id=atwo/p /div a href= onclick=js()jQuery/a jQuery 代碼及功能： function js(){ alert($(div).siblings().eq(1).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))。 } 返回 attr (prop) 為第一個(gè)匹配對(duì)象的設(shè)置屬性， prop 為 hash 對(duì)象，用于為某對(duì)象批量添加眾多屬性 img/a href= onclick=js()jQuery/a jQuery 代碼及功能： function js(){ $(img).attr({ src: , alt: Test Image })。 } 運(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 src=/ removeAttr (name) 將第 一個(gè)匹配對(duì)象的某個(gè)屬性移出 img alt=test/a href= onclick=js()jQuery/a jQuery 代碼及功能： function js(){ $(img). removeAttr(alt)。 } 運(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 樣式。 $(a).background(“red”)將該對(duì)象的 background 樣式設(shè)為 red jQuery 提供了以下方法，來操作 css background () background (val) color() 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)，其他的看名字都知道什么作用了！ div id=a style=background:blue。 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 })。 最終效果是 p id=b style=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)。最終效果是 p id=b style=color:redtest/p 四 ： JavaScript 處理 $.browser() 判斷瀏覽器類型，返回 boolen 值 $(function(){ if($.) { alert(這是一個(gè) IE 瀏覽器 )。} else if($.) { alert(這是一個(gè) opera 瀏覽器 )。} }) 當(dāng)頁(yè)面載入式判斷瀏覽器類型，可判斷的類型有 msie、 mozilla、 opera、 safari $.each(obj, fn) obj為對(duì)象或數(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: John, lang: JS }, function(i){ alert( Name: + i + , Value: + this )。 { 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 }。 var options = { validate: true, name: bar }。 $.extend(settings, options)。 執(zhí)行后 settings 對(duì)象為 { validate: true, limit: 5, name: bar } 可以用下面函數(shù)來測(cè)試 $(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，將被過濾 $(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í)，如果它的子菜單是顯示的，則隱藏子菜單，如果子菜單隱藏，則顯示出來，傳統(tǒng)的javascript 做法是先用 getElementById 取出子菜單所在容器的 id，在判斷該容器的 是否等于 none，如果等于則設(shè)為 block,如果不等于這設(shè)為 none，如果在將效果設(shè)置復(fù)雜一點(diǎn)，當(dāng)點(diǎn)擊按鈕時(shí)，不是忽 然隱藏和顯示子菜單，而是高度平滑的轉(zhuǎn)變，這時(shí)就要通過 setTimeout 來設(shè)置子菜單的 height 了，再?gòu)?fù)雜一點(diǎn)透明度也平滑的消失和顯現(xiàn)，這時(shí)顯現(xiàn)下來需要編寫很多代碼，如果 js 基礎(chǔ)不好的朋友可能只能從別人寫好的代碼拿過來修改了！jQuery 實(shí)現(xiàn)上面效果只需要 1 句話就行， $(a).toggle(slow), ,學(xué)完 jQuery 后還需要抄 襲修改別人的代碼嗎？下面我們逐個(gè)介紹 jQuery 用于效果處理的方法。 hide() 隱藏匹配對(duì)象 p id=aHello Again/pa href= onClick=’ (a).hide()’jQuery/a 當(dāng)點(diǎn)擊連接時(shí) ,id 為 a 的對(duì)象的 display 變?yōu)?none。 show() 顯示匹配對(duì)象 hide(speed) 以一定的速度隱藏匹配對(duì)象，其大?。ㄩL(zhǎng)寬）和透明度都逐漸變化到 0， speed有 3 級(jí) (slow, normal, fast)，也可以是 自定義的速度。 show(speed) 以一定的速度顯示匹配對(duì)象，其大?。ㄩL(zhǎng)寬）和透明度都由 0 逐漸變化到正常 hide(speed, callback) show(speed, callback) 當(dāng)顯示和隱藏變化結(jié)束后執(zhí)行函數(shù)callback toggle() toggle(speed) 如果當(dāng)前匹配對(duì)象隱藏，則顯示他們，如果當(dāng)前是顯示的，就隱藏， toggle(speed),其大小（長(zhǎng)寬）和透明度都隨之逐漸變化。 img src= style=width:150px/ a href= onClick=39。$(img).toggle(slow)39。jQuery/a fadeIn(speeds) fadeOut(speeds) 根據(jù)速度調(diào)整透明度來顯示或隱藏匹配對(duì)象，注意有別于 hide(speed)和 show(speed)， fadeIn 和 fadeOut 都只調(diào)整透明度，不調(diào)整大小 img src= style=display:none/a href= onClick=39。$(img ).fadeIn(slow)39。 jQuery