50個(gè)實(shí)用的jquery案例

1、1. 如何創(chuàng)建嵌套的過(guò)濾器：1. /允許你減少集合中的匹配元素的過(guò)濾器，  2. /只剩下那些與給定的選擇器匹配的部分。在這種情況下，  3. /查詢(xún)刪除了任何沒(méi)（:not）有（:has）  4. /包含class為“selected”（.selected）的子節(jié)點(diǎn)。  5. .filter(":not(:has(.selected)") 2. 如何重用元素搜索1. var allItems = $("div.item");  2. var keepLis

2、t = $("div#container1 div.item");  3. /現(xiàn)在你可以繼續(xù)使用這些jQuery對(duì)象來(lái)工作了。例如，  4. /基于復(fù)選框裁剪“keep list”，復(fù)選框的名稱(chēng)  5. /符合  6. < DIV >class names:  7. $(formToLookAt + " input:checked").each(function()   8.

3、     keepList = keepList.filter("." + $(this).attr("name");  9. );  10. < /DIV> 3. 任何使用has()來(lái)檢查某個(gè)元素是否包含某個(gè)類(lèi)或是元素：1. /jQuery 1.4.*包含了對(duì)這一has方法的支持。該方法找出  2. /某個(gè)元素是否包含了其他另一個(gè)元素類(lèi)或是其他任何的  3. /你正在查找并要在其之上進(jìn)行操作的

4、東東。  4. $("input").has(".email").addClass("email_icon"); 4. 如何使用jQuery來(lái)切換樣式表1. /找出你希望切換的媒體類(lèi)型（media-type），然后把href設(shè)置成新的樣式表。  2. $('linkmedia='screen'').attr('href', 'Alternative.css'); 5. 如何限制選擇范圍（基于優(yōu)化目的）：1. /盡可能使用標(biāo)

5、簽名來(lái)作為類(lèi)名的前綴，  2. /這樣jQuery就不需要花費(fèi)更多的時(shí)間來(lái)搜索  3. /你想要的元素。還要記住的一點(diǎn)是，  4. /針對(duì)于你的頁(yè)面上的元素的操作越具體化，  5. /就越能降低執(zhí)行和搜索的時(shí)間。  6. var in_stock = $('#shopping_cart_items input.is_in_stock'); <ul id="shopping_cart_items"><li><input type=&

6、quot;radio" value="Item-X" name="item" class="is_in_stock" /> Item X</li><li><input type="radio" value="Item-Y" name="item" class="3-5_days" /> Item Y</li><li><input type="radio"

7、value="Item-Z" name="item" class="unknown" /> Item Z</li></ul>6. 如何正確地使用ToggleClass：1. /切換（toggle）類(lèi)允許你根據(jù)某個(gè)類(lèi)的  2. /是否存在來(lái)添加或是刪除該類(lèi)。  3. /這種情況下有些開(kāi)發(fā)者使用：  4. a.hasClass('blueButton') ? a.removeClass('blueButton') :&

8、#160;a.addClass('blueButton');  5. /toggleClass允許你使用下面的語(yǔ)句來(lái)很容易地做到這一點(diǎn)  6. a.toggleClass('blueButton'); 7. 如何設(shè)置IE特有的功能：1. if ($.browser.msie)   2. / Internet Explorer就是個(gè)虐待狂  3.  8. 如何使用jQuery來(lái)代替一個(gè)元素：1. $('#thatdiv').replaceWith(&

9、#39;fnuh'); 9. 如何驗(yàn)證某個(gè)元素是否為空：1. if ($('#keks').html()   2. /什么都沒(méi)有找到;  3.  10. 如何從一個(gè)未排序的集合中找出某個(gè)元素的索引號(hào)1. $("ul > li").click(function ()   2.     var index = $(this).prevAll().length;  

10、;3. );11. 如何把函數(shù)綁定到事件上：1. $('#foo').bind('click', function()   2.     alert('User clicked on "foo."');  3. ); 12. 如何追加或是添加html到元素中：1. $('#lal').append('sometext'); 13. 在創(chuàng)建元素時(shí)，如何使用對(duì)象字面量（l

11、iteral）來(lái)定義屬性1. var e = $("",  href: "#", class: "a-class another-class", title: "." ); 14. 如何使用多個(gè)屬性來(lái)進(jìn)行過(guò)濾1. /在使用許多相類(lèi)似的有著不同類(lèi)型的input元素時(shí)，  2. /這種基于精確度的方法很有用  3. var elements =

12、0;$('#someid inputtype=sometypevalue=somevalue').get(); 15. 如何使用jQuery來(lái)預(yù)加載圖像：1. jQuery.preloadImages = function()   2.     for(var i = 0; i < arguments.length; i+)   3.     &

13、#160;   $("<img />").attr('src', argumentsi);  4.       5. ;  6. /用法  7. $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 16. 如何為任何與選擇器相匹配的元素設(shè)置事件處理程

14、序：1. $('button.someClass').live('click', someFunction);  2. /注意，在jQuery 1.4.2中，delegate和undelegate選項(xiàng)  3. /被引入代替live，因?yàn)樗鼈兲峁┝烁玫纳舷挛闹С? 4. /例如，就table來(lái)說(shuō)，以前你會(huì)用  5. /.live()  6. $("table").each(function()  7.     $("

15、;td", this).live("hover", function()  8.         $(this).toggleClass("hover");  9.     );  10. );  11. /現(xiàn)在用  12. $("table").delegate("td", "hover"

16、;, function()  13.     $(this).toggleClass("hover");  14. ); 17. 如何找到一個(gè)已經(jīng)被選中的option元素：1. $('#someElement').find('option:selected'); 18. 如何隱藏一個(gè)包含了某個(gè)值文本的元素：1. $("p.value:contains('thetextvalue')").hide(); 19.

17、 如果自動(dòng)滾動(dòng)到頁(yè)面中的某區(qū)域1. jQuery.fn.autoscroll = function(selector)   2.     $('html,body').animate(  3.         scrollTop: $(selector).offset().top,  4.         500

18、  5.       6.  7. /然后像這樣來(lái)滾動(dòng)到你希望去到的class/area上。  8. $('.area_name').autoscroll(); 20. 如何檢測(cè)各種瀏覽器：1. 檢測(cè)Safari (if( $.browser.safari),  2. 檢測(cè)IE6及之后版本 (if ($.browser.msie && $.browser.version > 6&

19、#160;),  3. 檢測(cè)IE6及之前版本 (if ($.browser.msie && $.browser.version <= 6 ),  4. 檢測(cè)FireFox 2及之后版本 (if ($.browser.mozilla && $.browser.version >= '1.8' ) 21. 如何替換串中的詞1. var el 

20、= $('#id');  2.     el.html(el.html().replace(/word/ig, ''); 22. 如何禁用右鍵單擊上下文菜單：1. $(document).bind('contextmenu',function(e)  2.     return false;  3. ); 23. 如何定義一個(gè)定制的選擇器1. $.expr':'.mycus

21、tomselector = function(element, index, meta, stack)  2. / element- 一個(gè)DOM元素  3. / index  棧中的當(dāng)前循環(huán)索引  4. / meta  有關(guān)選擇器的元數(shù)據(jù)  5. / stack  要循環(huán)的所有元素的棧  6. / 如果包含了當(dāng)前元素就返回true  7. / 如果不包含當(dāng)前

22、元素就返回false   8. / 定制選擇器的用法：  9. $('.someClasses:test').doSomething(); 24. 如何檢查某個(gè)元素是否存在1. if ($('#someDiv').length)   2. /萬(wàn)歲！它存在  3.  25. 如何使用jQuery來(lái)檢測(cè)右鍵和左鍵的鼠標(biāo)單擊兩種情況：1. $("#someelement").live('click', function(e)

23、   2.     if( (!$.browser.msie && e.button = 0) | ($.browser.msie && e.button = 1) )   3.         alert("Left Mouse Button C

24、licked");  4.      else if(e.button = 2)   5.         alert("Right Mouse Button Clicked");  6.       7. ); 26. 如何顯示或是刪除input域中的默認(rèn)值1. /這段代碼展示

25、了在用戶(hù)未輸入值時(shí)，  2. /如何在文本類(lèi)型的input域中保留  3. /一個(gè)默認(rèn)值  4. wap_val =   5. $(".swap").each(function(i)  6.     wap_vali = $(this).val();  7.     $(this).focusin(function()  8.      

26、   if ($(this).val() = swap_vali)   9.             $(this).val("");  10.           11.     ).focusout(function()  1

27、2.         if ($.trim($(this).val() = "")   13.             $(this).val(swap_vali);  14.           15.   

28、  );  16. ); 27. 如何在一段時(shí)間之后自動(dòng)隱藏或關(guān)閉元素（支持1.4版本）：1. /這是1.3.2中我們使用setTimeout來(lái)實(shí)現(xiàn)的方式  2. setTimeout(function()   3.   $('.mydiv').hide('blind', , 500)  4. , 5000);  5. /而這是在1.4中可以使用delay()這一功能來(lái)實(shí)現(xiàn)的方式（這很像是休眠）  6. $(&qu

29、ot;.mydiv").delay(5000).hide('blind', , 500); 28. 如何把已創(chuàng)建的元素動(dòng)態(tài)地添加到DOM中：1. var newDiv = $('');  2.     newDiv.attr('id','myNewDiv').appendTo('body'); 29. 如何限制“Text-Area”域中的字符的個(gè)數(shù)：1. jQuery.fn.maxLen

30、gth = function(max)  2.     this.each(function()  3.         var type = this.tagName.toLowerCase();  4.         var inputType = this.type? t

31、his.type.toLowerCase() : null;  5.         if(type = "input" && inputType = "text" | inputType = "password")  6.       

32、60;     /Apply the standard maxLength  7.             this.maxLength = max;  8.           9.        

33、 else if(type = "textarea")  10.             this.onkeypress = function(e)  11.                 var ob

34、60;= e | event;  12.                 var keyCode = ob.keyCode;  13.                 var hasSele

35、ction = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;  14.                 return !(this.value.

36、length >= max && (keyCode > 50 | keyCode = 32 | keyCode = 0 | keyCode = 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);  15.  &#

37、160;            16.             this.onkeyup = function()  17.                 if(this.val

38、ue.length > max)  18.                     this.value = this.value.substring(0,max);  19.              

39、     20.               21.           22.     );  23. ;  24. /用法  25. $('#mytextarea').maxLength(500); 30. 如何為函數(shù)創(chuàng)建一個(gè)基本的測(cè)試1.

40、 /把測(cè)試單獨(dú)放在模塊中  2. module("Module B");  3. test("some other test", function()   4.     /指明測(cè)試內(nèi)部預(yù)期有多少要運(yùn)行的斷言  5.     expect(2);  6.     /一個(gè)比較斷言，相當(dāng)于JUnit的assertEquals  7.

41、    equals( true, false, "failing test" );  8.     equals( true, true, "passing test" );  9. ); 31. 如何在jQuery中克隆一個(gè)元素：1. var cloned = $('#somediv').clone

42、(); 32. 在jQuery中如何測(cè)試某個(gè)元素是否可見(jiàn)1. if($(element).is(':visible') = 'true')   2.     /該元素是可見(jiàn)的  3.  33. 如何把一個(gè)元素放在屏幕的中心位置：1. jQuery.fn.center = function ()   2.     this.css('position'

43、,'absolute');  3.     this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');  4.     this.css('left', ( $(window).width() -&

44、#160;this.width() ) / 2+$(window).scrollLeft() + 'px');  5.     return this;  6.  7. /這樣來(lái)使用上面的函數(shù)：  8. $(element).center(); 34. 如何把有著某個(gè)特定名稱(chēng)的所有元素的值都放到一個(gè)數(shù)組中：1. var arrInputValues = new Array();  

45、2. $("inputname='table'").each(function()  3.     arrInputValues.push($(this).val();  4. ); 35. 如何從元素中除去HTML1. (function($)   2.     $.fn.stripHtml = function()   3.      &

46、#160;  var regexp = /<(""*"|''*'|'">)*>/gi;  4.         this.each(function()   5.             $(this).html( $(

47、this).html().replace(regexp,”") );  6.         );  7.         return $(this);  8.       9. )(jQuery);  10. /用法：  11. $('p').stripHtml(); 36. 如

48、何使用closest來(lái)取得父元素：1. $('#searchBox').closest('div'); 37. 如何使用Firebug和Firefox來(lái)記錄jQuery事件日志：1. / 允許鏈?zhǔn)饺罩居涗? 2. / 用法：  3. $('#someDiv').hide().log('div hidden').addClass('someClass');  4. jQuery.log = jQuery.fn.log 

49、= function (msg)   5.     if (console)  6.         console.log("%s: %o", msg, this);  7.       8.     return this;  9. ; 

50、;38. 如何強(qiáng)制在彈出窗口中打開(kāi)鏈接：1. jQuery('a.popup').live('click', function()  2.     newwindow=window.open($(this).attr('href'),'','height=200,width=150');  3.     if (window.focus)   4.   &#

51、160;     newwindow.focus();  5.       6.     return false;  7. ); 39. 如何強(qiáng)制在新的選項(xiàng)卡中打開(kāi)鏈接：1. jQuery('a.newTab').live('click', function()  2.     newwindow=window.open($

52、(this).href);  3.     jQuery(this).target = "_blank"  4.     return false;  5. ); 40. 在jQuery中如何使用.siblings()來(lái)選擇同輩元素1. / 不這樣做  2. $('#nav li').click(function()  3.     

53、;$('#nav li').removeClass('active');  4.     $(this).addClass('active');  5. );  6. /替代做法是  7. $('#nav li').click(function()  8.     $(this).addClass('active').siblings().removeClass(&#

54、39;active');  9. ); 41. 如何切換頁(yè)面上的所有復(fù)選框：1. var tog = false;  2. / 或者為true，如果它們?cè)诩虞d時(shí)為被選中狀態(tài)的話  3. $('a').click(function()   4.     $("inputtype=checkbox").attr("checked",!tog);  5.    

55、; tog = !tog;  6. ); 42. 如何基于一些輸入文本來(lái)過(guò)濾一個(gè)元素列表：1. /如果元素的值和輸入的文本相匹配的話  2. /該元素將被返回  3. $('.someClass').filter(function()   4.     return $(this).attr('value') = $('input#someId').val();  5. )

56、60;43. 如何獲得鼠標(biāo)墊光標(biāo)位置x和y1. $(document).ready(function()   2.     $(document).mousemove(function(e)  3.         $(#XY).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e

57、.pageY);  4.     );  5. ); 44. 如何把整個(gè)的列表元素（List Element，LI）變成可點(diǎn)擊的1. $("ul li").click(function()  2.   window.location=$(this).find("a").attr("href");  3.   return false;  4. ); 1. <ul

58、>  2. <li><a href="#">Link 1</a></li>  3. <li><a href="#">Link 2</a></li>  4. <li><a href="#">Link 3</a></li>  5. <li><a href="

59、;#">Link 4</a></li>  6. </ul> 45. 如何使用jQuery來(lái)解析XML（基本的例子）：1. function parseXml(xml)   2.     /找到每個(gè)Tutorial并打印出author  3.     $(xml).find("Tutorial").each(function()   4.         $("#output").appe