【文章內(nèi)容簡介】 ) jquery 匹配對象中其它兄弟級別的對 象 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í) 返 回 兩 個 對 象 [pone/p ， a href= onclick=js()jQuery/a ] alert($(div).siblings(“a”)返回一個對象 [a href= onclick=js()jQuery/a ] 其他 addClass(class) 為匹配對象添加一個 class 樣式 removeClass (class) 將第一個匹配對象的某個 class 樣式移出 attr (name) 獲取第一個匹配對象的屬性 img src=/a href= onclick=js()jQuery/a jQuery 代碼及功能： function js(){ alert($(img).attr(src))。 } 返回 attr (prop) 為第一個匹配對象的設(shè)置屬性， prop 為 hash 對象，用于為某對象批量添加眾多屬性 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) 為第一個匹配對象的設(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) 將第 一個匹配對象的某個屬性移出 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)前對象添加一個樣式，不是當(dāng)前對象則移出此樣式，返回的是處理后的對象 pHello/pp class=selectedHello Again/pa href= onclick=js()jQuery/a $(p) 的 結(jié) 果 是 返 回 對 象 [pHello/p,p class=selectedHello Again/p ] $(p).toggleClass(selected) 的 結(jié) 果 是 實(shí) 返 回 對 象 [ p class=selectedHello/p, pHello Again/p ] jQuery 使用手冊 三 ： CSS 操作 傳統(tǒng) javascript 對 css 的操作相當(dāng)繁瑣，比如 div id=a style=background:bluecss/div取它的 background 語法是 (a).，而 jQuery 對 css 更方便的操作，$(a).background()， $(a).background(“red”) $(a)得到 jQuery 對象 [ div id=a … /div ] $(a).background()將取出該對象的 background 樣式。 $(a).background(“red”)將該對象的 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 是一個 hash 對象，用于設(shè)置大量的 css 樣式 $(b).css({ color: red, background: blue })。 最終效果是 p id=b style=background:blue。 color:redtest/p,{ color: red, background: blue }， hash 對象， color為 key， red為 value， css(key, value) 用于設(shè)置一個單獨(dú)得 css 樣式 $(b).css(color,red)。最終效果是 p id=b style=color:redtest/p 四 ： JavaScript 處理 $.browser() 判斷瀏覽器類型，返回 boolen 值 $(function(){ if($.) { alert(這是一個 IE 瀏覽器 )。} else if($.) { alert(這是一個 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: John, lang: JS }, function(i){ alert( Name: + i + , Value: + this )。 { name: John, lang: JS }為一個 hash 對象，依次將 hash 中每組對象傳入到函數(shù)中 $.extend(obj, prop) 用第二個對象擴(kuò)展第一個對象 var settings = { validate: false, limit: 5, name: foo }。 var options = { validate: true, name: bar }。 $.extend(settings, options)。 執(zhí)行后 settings 對象為 { validate: true, 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 必須返回一個 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) 兩個參數(shù)都是數(shù)組，排出第二個數(shù)組中與第一個相同的，再將兩個數(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? 五 ：動態(tài)效果 在將這部分之前我們先看個例子，相信做網(wǎng)頁的朋友都遇到 n 級菜單的情景，但點(diǎn)擊某菜單按鈕時，如果它的子菜單是顯示的，則隱藏子菜單，如果子菜單隱藏，則顯示出來，傳統(tǒng)的javascript 做法是先用 getElementById 取出子菜單所在容器的 id，在判斷該容器的 是否等于 none，如果等于則設(shè)為 block,如果不等于這設(shè)為 none，如果在將效果設(shè)置復(fù)雜一點(diǎn)，當(dāng)點(diǎn)擊按鈕時，不是忽 然隱藏和顯示子菜單，而是高度平滑的轉(zhuǎn)變，這時就要通過 setTimeout 來設(shè)置子菜單的 height 了，再復(fù)雜一點(diǎn)透明度也平滑的消失和顯現(xiàn)，這時顯現(xiàn)下來需要編寫很多代碼，如果 js 基礎(chǔ)不好的朋友可能只能從別人寫好的代碼拿過來修改了！jQuery 實(shí)現(xiàn)上面效果只需要 1 句話就行， $(a).toggle(slow), ,學(xué)完 jQuery 后還需要抄 襲修改別人的代碼嗎？下面我們逐個介紹 jQuery 用于效果處理的方法。 hide() 隱藏匹配對象 p id=aHello Again/pa href= onClick=’ (a).hide()’jQuery/a 當(dāng)點(diǎn)擊連接時 ,id 為 a 的對象的 display 變?yōu)?none。 show() 顯示匹配對象 hide(speed) 以一定的速度隱藏匹配對象，其大?。ㄩL寬）和透明度都逐漸變化到 0， speed有 3 級 (slow, normal, fast)，也可以是 自定義的速度。 show(speed) 以一定的速度顯示匹配對象，其大小（長寬）和透明度都由 0 逐漸變化到正常 hide(speed, callback) show(speed, callback) 當(dāng)顯示和隱藏變化結(jié)束后執(zhí)行函數(shù)callback toggle() toggle(speed) 如果當(dāng)前匹配對象隱藏，則顯示他們，如果當(dāng)前是顯示的，就隱藏， toggle(speed),其大?。ㄩL寬）和透明度都隨之逐漸變化。 img src= style=width:150px/ a href= onClick=39。$(img).toggle(slow)39。jQuery/a fadeIn(speeds) fadeOut(speeds) 根據(jù)速度調(diào)整透明度來顯示或隱藏匹配對象，注意有別于 hide(speed)和 show(speed)， fadeIn 和 fadeOut 都只調(diào)整透明度，不調(diào)整大小 img src= style=display:none/a href= onClick=39。$(img ).fadeIn(slow)39。 jQuery