一些應該熟記于心的jQuery函數(shù)和技巧

1、現(xiàn)在使用jquery 的網(wǎng)站數(shù)不勝數(shù)，它能夠成為成最為知名的javascript框架，肯定存在著某種原因。 作為開發(fā)者， 我們必須更深入地思考問題，應該能夠使用每一種我們想要了解的語言和框架所具有最高級技巧。關于 jquery 更多內(nèi)容，歡迎訪問：jquery 從入門到精通高級選擇器（selector）在 jquery 中，我們可以使用各種各樣的選擇器，這使得選擇器的使用變得非常精確。51cto也曾經(jīng)和讀者分享過jquery 選擇器深入分析：避免不必要的調(diào)用，下面我們來一步一步地講解這些選擇器并看看在其他語境中如何使用這些選擇器。基于屬性的選擇器在 html中，幾乎所有元素都具有屬性，比如：1

2、.2.上面兩個hmtl元素中包含了九個屬性。利用jquery ，我們可以根據(jù)元素的屬性和屬性值來對元素進行選擇。一起看看以下例子中的選擇器：3.$(document).ready(function() 4.5. /alltheimageswhosewidthis600px 6.7. $(imgwidth=600 ).click(function() 8.9. alert(youvejustselectedanimagewhosewidthis600px); 10.11. ); 12.13. /alltheimageshavingawidthdifferentto600px 14.15. $(i

3、mgwidth!=600).click(function() 16.17. alert(youvejustselectedanimagewhosewidthisnot600px); 18.19. ); 20.21. /alltheinputswhosenameendswithemail 22.23. $(inputname$=email).focus(function() 24.25. alert(thisinputhasanamewhichendswithemail.); 26.27. ); 28.29.); 在官方文檔中， 我們可以看到許多選擇器與上例中的選擇器非常類似。但關鍵點是一樣的，

4、屬性和屬性值。多重選擇器如果你開放的是一個較為大型的網(wǎng)站，選擇器的使用會變得困難。有時為了讓代碼變得更為簡單， 最好將它們分割為兩個或三個選擇器。實際上這是非常簡單和基礎的知識，不過非常有用，我們應該把這些知識熟記于心。30.$(document).ready(function() 31.32. /alltheimageswhosewidthis600pxorheightis400px 33.34. $(imgwidth=600 ,imgheight=400 ).click(function() 35.36. alert(selectedanimagewhosewidthis600pxorhe

5、ightis400px); 37.38. ); 39.40. /allpelementswithclassorange_text,divsandimages. 41.42. $(p.orange_text,div,img).hover(function() 43.44. alert(selectedapelementwithclassorange_text,adivoranimage.);45.46. ); 47.48./wecanalsocombinetheattributesselectors 49.50. /allthejpgimageswithanaltattribute(thealt

6、svaluedoesntmatter) 51.52. $(imgaltsrc$=.jpg).click(function() 53.54. alert(youselectedajpgimagewiththealtattribute.); 55.56. ); 57.58.); widget 組件選擇器除了插件的選擇器之前，還有一些基于元素某些屬性或位置的選擇器。下面讓我們看看這些更為重要的選擇器：1.$(document).ready(function() 2.3. /allthehiddenimagesareshown 4.5. $(img:hidden).show(); 6.7./thefi

7、rstpisgoingtobeorange 8.9. $(p:first).css(color,orange); 10.11. /inputwithtypepassword 12.13. /thisis$(inputtype =password) 14.15. $(input:password).focus(function() 16.17. alert(thisisapassword!); 18.19. ); 20.21./divswithparagraph 22.23. $(div:has(p).css(color,green); 24.25./wecanalsocombinethem.w

8、ith() 26.27. /allnotdisabledcheckboxes 28.29. $(input:checkbox(:not(:disabled).hover(function() 30.31. alert(thischeckboxisworking.); 32.33. ); 34.35. ); 如上例所示， 可供使用的選擇器是多種多樣的，并且它們之前不是互相獨立的，所以我們可以將這些選擇器組合起來進行使用，如上例中的選擇器。理解網(wǎng)站的結(jié)構(gòu)網(wǎng)絡的結(jié)構(gòu)可能看起來非常復雜，但事實上并非如此，如果我們想要使用某些選擇器以及作用于網(wǎng)絡結(jié)構(gòu)之上的方法。我們可以將網(wǎng)站視為一個顛倒的樹，樹根在頂部

9、， 而其他元素從根部延伸出來。查看下面的代碼，試著想象一棵樹，樹根是body 標簽。36.37. .38.39.40.41.42.43.44. createanaccount!45.46.47.48.personalinformation49.50.51.52.53.54.55.56.message 57.58.59.60.61.62.63.64. footermessage65.66.67.68.69.以上示例代碼的樹形圖如下：很簡單，是不是？從現(xiàn)在開始我們可以將html 或 xhtml 看做一棵樹，不過我們想做的是程序員，這些植物學的理論有什么用處？答案就在下一個要點之中。對樹進行選擇和轉(zhuǎn)

10、換選擇就想樹一樣，網(wǎng)站結(jié)構(gòu)中葉存在子與父。在jquery 中，我們可以利用這一結(jié)構(gòu)。假設我們擁有相同的html ，但是現(xiàn)在我們想要選擇名為“main”的div 中的 p 元素，但是不想對任何有關p 元素的東西造成變化。我們有三種可能的方案，如下：1.$(#wrapper).children(#main).children(p).css(color,orange); 2.$(#wrapper).children().children(p).css(color,orange); 3.$(#main).children(p).css(color,orange); 利用 children方法可以選擇樹

11、中位于其他元素下的某個元素。如果我們傳遞給它一個選擇器，該方法將僅選擇我們需要的元素，如果不是這樣， 父元素的所有子元素都將被選中。讓我們看看第一個和第二個選擇器直接的區(qū)別。唯一的不同之處在于：第二個選擇器中我們什么也沒有指定，所有每一個子元素都會被選中。 此處的關鍵在于： 在上圖中wrapper 這個 div 元素下除 main 之外并沒有其他子元素，所以我們得到的結(jié)果是一樣的。添加元素現(xiàn)在我們在樹中添加元素。這個元素可以是段落、div 元素、表格等等，假設我們想要添加一個列表，如下：4.5.6.dog7.8.cat 9.10.frog 11.12.只是一些字符串，所以我們可以在javasc

12、ript代碼中這樣寫：13.var list= n14.15. + dog n 16.17. + cat n 18.19. + frog n 20.21. ; 現(xiàn)在我們要在html 中某個地方添加字符串。比如，在之前我們選擇的p 元素之后。最后我們可以輸入完整的代碼，如下所示：22.$(document).ready(function() 23.24. var list= n25.26. + dogn 27.28. + cat n 29.30. + frog n 31.32. ; 33.34.$(#wrapper).children(#main).append(list); 35.36.);

13、字面上我們將字符串附加到html中的 ，結(jié)果是這個列表顯示在p 元素之后。移除元素移除元素并不難，當我們談到對樹進行轉(zhuǎn)換時，在這一過程一定會涉及元素的移除。下面我們來移除之前選擇的那個段落（注意我們可以再次使用選擇器）。37.$(#wrapper).children(#main).children(p).remove(); 38.在這一代碼中，位于選中元素之中的所有元素都將被移除，所以必須十分小心。如果div 下有一個列表，當我們移除該div 時， div 和列表都會被移除。表面之下jquery 類似只露出一角的冰山，在水面之下還有更多內(nèi)容。這一小結(jié)中，我們將向你展示某些表面之下的內(nèi)容。綁定（

14、 bind）綁定是一種方法，利用它，我們可以將一個事件（鼠標點擊、懸置等等）與一個方法連接起來。這有點類似：當用戶單擊此處時，調(diào)用該方法。聽起來很熟悉，對嗎？沒錯，我們經(jīng)常這樣做?？纯匆韵率纠?9.$(document).ready(function() 40.41. $(#id).click(function() 42.43. alert(thatclickwasamazing!); 44.45. ); 46.47.); 上文中 click()方法在以下代碼相對于wrapper ：48.$(document).ready(function() 49.50. $(#id).bind(clic

15、k, function () 51.52. alert(thatclickwasamazing!); 53.54. ); 55.56.); 此外，使用unbind() 方法可以解除事件與元素的連接。定義你自己的jquery 方法目前我們看到了一些方法，如click、bind 、hover 等等，但是我們?nèi)绾味x自己的方法？如何使用 $(selector ).mymethod() 這樣的語句調(diào)用這些方法？以下代碼提供了這些問題的解決方案。定義一個方法，顯示一個元素的值。1./thenamewillbealertval 2.jquery.fn.alertval= function() 3.4. v

16、ar element=$(this0); /thatsourelement 5.6. if (element.val() 7.8. alert(element.val(); /thatsourelementsvalue 9.10.; 11./thisisthewaywecanuseit 12.$(selector).alertval(); 回調(diào)（ callback）是常用的解決方案使用回調(diào)，我們可以在其他方法完成時執(zhí)行某個方法。你可以將回調(diào)方法看做對別人說：但你做完時，給我電話，因為我要做我的那份工作。不過現(xiàn)在的問題是：如何使用回調(diào)？13.$(document).ready(function() 14.15.mycallback= function() 16.17. alert(imacallbackalert.); 18.19. 20.21./whenthegetfinishesthenmycallbackisexecuted 22.23. $.get(myhtmlpage.html,mycallback); 24.25.); 注意：如果該函數(shù)包含參數(shù)，我們必須使用以下方式：26.$(document).ready(function() 27.28. $.get(myhtmlpage.html,function() 29.30