歡迎您光臨本站 註冊首頁

50個必備的實用jQuery代碼段

←手機掃碼閱讀     火星人 @ 2014-03-12 , reply:0
  

本文會給你們展示50個jquery代碼片段,這些代碼能夠給你的javascript項目提供幫助。其中的一些代碼段是從jQuery1.4.2才開始支持的做法,另一些則是真正有用的函數或方法,他們能夠幫助你又快又好地把事情完成。這些都是我盡量記住的有著最佳性能的代碼段,因此如果你發現你任何可以做得更好的地方的話,歡迎把你的版本粘貼在評論中!我希望你在這一文章中能找到有幫助的東西。

1. 如何創建嵌套的過濾器:

  1. //允許你減少集合中的匹配元素的過濾器,  
  2. //只剩下那些與給定的選擇器匹配的部分。在這種情況下,  
  3. //查詢刪除了任何沒(:not)有(:has)  
  4. //包含class為「selected」(.selected)的子節點。  
  5. .filter(":not(:has(.selected))"

2. 如何重用元素搜索

  1. var allItems = $("div.item");  
  2. var keepList = $("div#container1 div.item");  
  3. //現在你可以繼續使用這些jQuery對象來工作了。例如,  
  4. //基於複選框裁剪「keep list」,複選框的名稱  
  5. //符合  
  6. < DIV >class names:  
  7. $(formToLookAt + " input:checked").each(function() {  
  8.     keepList = keepList.filter("." + $(this).attr("name"));  
  9. });  
  10. < /DIV> 

3. 任何使用has()來檢查某個元素是否包含某個類或是元素:

  1. //jQuery 1.4.*包含了對這一has方法的支持。該方法找出  
  2. //某個元素是否包含了其他另一個元素類或是其他任何的  
  3. //你正在查找並要在其之上進行操作的東東。  
  4. $("input").has(".email").addClass("email_icon"); 

4. 如何使用jQuery來切換樣式表

  1. //找出你希望切換的媒體類型(media-type),然後把href設置成新的樣式表。  
  2. $('link[media='screen']').attr('href''Alternative.css'); 

5. 如何限制選擇範圍(基於優化目的):

  1. //儘可能使用標籤名來作為類名的前綴,  
  2. //這樣jQuery就不需要花費更多的時間來搜索  
  3. //你想要的元素。還要記住的一點是,  
  4. //針對於你的頁面上的元素的操作越具體化,  
  5. //就越能降低執行和搜索的時間。  
  6. var in_stock = $('#shopping_cart_items input.is_in_stock'); 

    • Item X

    • Item Y

    • Item Z

6. 如何正確地使用ToggleClass:

  1. //切換(toggle)類允許你根據某個類的  
  2. //是否存在來添加或是刪除該類。  
  3. //這種情況下有些開發者使用:  
  4. a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');  
  5. //toggleClass允許你使用下面的語句來很容易地做到這一點  
  6. a.toggleClass('blueButton'); 

7. 如何設置IE特有的功能:

  1. if ($.browser.msie) {  
  2. // Internet Explorer就是個虐待狂  

8. 如何使用jQuery來代替一個元素:

  1. $('#thatdiv').replaceWith('fnuh'); 

9. 如何驗證某個元素是否為空:

  1. if ($('#keks').html()) {  
  2. //什麼都沒有找到;  

10. 如何從一個未排序的集合中找出某個元素的索引號

  1. $("ul > li").click(function () {  
  2.     var index = $(this).prevAll().length;  
  3. }); 

11. 如何把函數綁定到事件上:

  1. $('#foo').bind('click'function() {  
  2.     alert('User clicked on "foo."');  
  3. }); 

12. 如何追加或是添加html到元素中:

  1. $('#lal').append('sometext'); 

13. 在創建元素時,如何使用對象字面量(literal)來定義屬性

  1. var e = $("", { href: "#"class"a-class another-class", title: "..." }); 

14. 如何使用多個屬性來進行過濾

  1. //在使用許多相類似的有著不同類型的input元素時,  
  2. //這種基於精確度的方法很有用  
  3. var elements = $('#someid input[type=sometype][value=somevalue]').get(); 

15. 如何使用jQuery來預載入圖像:

  1. jQuery.preloadImages = function() {  
  2.     for(var i = 0; i < arguments.length; i++) {  
  3.         $("").attr('src', arguments[i]);  
  4.     }  
  5. };  
  6. //用法  
  7. $.preloadImages('image1.gif''/path/to/image2.png''some/image3.jpg'); 

16. 如何為任何與選擇器相匹配的元素設置事件處理程序:

  1. $('button.someClass').live('click', someFunction);  
  2. //注意,在jQuery 1.4.2中,delegate和undelegate選項  
  3. //被引入代替live,因為它們提供了更好的上下文支持  
  4. //例如,就table來說,以前你會用  
  5. //.live()  
  6. $("table").each(function(){  
  7.     $("td"this).live("hover"function(){  
  8.         $(this).toggleClass("hover");  
  9.     });  
  10. });  
  11. //現在用  
  12. $("table").delegate("td""hover"function(){  
  13.     $(this).toggleClass("hover");  
  14. }); 

17. 如何找到一個已經被選中的option元素:

  1. $('#someElement').find('option:selected'); 

18. 如何隱藏一個包含了某個值文本的元素:

  1. $("p.value:contains('thetextvalue')").hide(); 

19. 如果自動滾動到頁面中的某區域

  1. jQuery.fn.autoscroll = function(selector) {  
  2.     $('html,body').animate(  
  3.         {scrollTop: $(selector).offset().top},  
  4.         500  
  5.     };  
  6. }  
  7. //然後像這樣來滾動到你希望去到的class/area上。  
  8. $('.area_name').autoscroll(); 

20. 如何檢測各種瀏覽器:

  1. 檢測Safari (if( $.browser.safari)),  
  2. 檢測IE6及之後版本 (if ($.browser.msie && $.browser.version > 6 )),  
  3. 檢測IE6及之前版本 (if ($.browser.msie && $.browser.version <= 6 )),  
  4. 檢測FireFox 2及之後版本 (if ($.browser.mozilla && $.browser.version >= '1.8' )) 

21. 如何替換串中的詞

  1. var el = $('#id');  
  2.     el.html(el.html().replace(/word/ig, '')); 

22. 如何禁用右鍵單擊上下文菜單:

  1. $(document).bind('contextmenu',function(e){  
  2.     return false;  
  3. }); 

23. 如何定義一個定製的選擇器

  1. $.expr[':'].mycustomselector = function(element, index, meta, stack){  
  2. // element- 一個DOM元素  
  3. // index ? 棧中的當前循環索引  
  4. // meta ? 有關選擇器的元數據  
  5. // stack ? 要循環的所有元素的棧  
  6. // 如果包含了當前元素就返回true  
  7. // 如果不包含當前元素就返回false };  
  8. // 定製選擇器的用法:  
  9. $('.someClasses:test').doSomething(); 

24. 如何檢查某個元素是否存在

  1. if ($('#someDiv').length) {  
  2. //萬歲!!!它存在……  

25. 如何使用jQuery來檢測右鍵和左鍵的滑鼠單擊兩種情況:

  1. $("#someelement").live('click'function(e) {  
  2.     if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {  
  3.         alert("Left Mouse Button Clicked");  
  4.     } else if(e.button == 2) {  
  5.         alert("Right Mouse Button Clicked");  
  6.     }  
  7. }); 

26. 如何顯示或是刪除input域中的默認值

  1. //這段代碼展示了在用戶未輸入值時,  
  2. //如何在文本類型的input域中保留  
  3. //一個默認值  
  4. wap_val = [];  
  5. $(".swap").each(function(i){  
  6.     wap_val[i] = $(this).val();  
  7.     $(this).focusin(function(){  
  8.         if ($(this).val() == swap_val[i]) {  
  9.             $(this).val("");  
  10.         }  
  11.     }).focusout(function(){  
  12.         if ($.trim($(this).val()) == "") {  
  13.             $(this).val(swap_val[i]);  
  14.         }  
  15.     });  
  16. }); 

27. 如何在一段時間之後自動隱藏或關閉元素(支持1.4版本):

  1. //這是1.3.2中我們使用setTimeout來實現的方式  
  2. setTimeout(function() {  
  3.   $('.mydiv').hide('blind', {}, 500)  
  4. }, 5000);  
  5. //而這是在1.4中可以使用delay()這一功能來實現的方式(這很像是休眠)  
  6. $(".mydiv").delay(5000).hide('blind', {}, 500); 

28. 如何把已創建的元素動態地添加到DOM中:

  1. var newDiv = $('');  
  2.     newDiv.attr('id','myNewDiv').appendTo('body'); 

29. 如何限制「Text-Area」域中的字元的個數:

  1. jQuery.fn.maxLength = function(max){  
  2.     this.each(function(){  
  3.         var type = this.tagName.toLowerCase();  
  4.         var inputType = this.type? this.type.toLowerCase() : null;  
  5.         if(type == "input" && inputType == "text" || inputType == "password"){  
  6.             //Apply the standard maxLength  
  7.             this.maxLength = max;  
  8.         }  
  9.         else if(type == "textarea"){  
  10.             this.onkeypress = function(e){  
  11.                 var ob = e || event;  
  12.                 var keyCode = ob.keyCode;  
  13.                 var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;  
  14.                 return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);  
  15.             };  
  16.             this.onkeyup = function(){  
  17.                 if(this.value.length > max){  
  18.                     this.value = this.value.substring(0,max);  
  19.                 }  
  20.             };  
  21.         }  
  22.     });  
  23. };  
  24. //用法  
  25. $('#mytextarea').maxLength(500); 

30. 如何為函數創建一個基本的測試

  1. //把測試單獨放在模塊中  
  2. module("Module B");  
  3. test("some other test"function() {  
  4.     //指明測試內部預期有多少要運行的斷言  
  5.     expect(2);  
  6.     //一個比較斷言,相當於JUnit的assertEquals  
  7.     equals( truefalse"failing test" );  
  8.     equals( truetrue"passing test" );  
  9. }); 

31. 如何在jQuery中克隆一個元素:

  1. var cloned = $('#somediv').clone(); 

32. 在jQuery中如何測試某個元素是否可見

  1. if($(element).is(':visible') == 'true') {  
  2.     //該元素是可見的  

33. 如何把一個元素放在屏幕的中心位置:

  1. jQuery.fn.center = function () {  
  2.     this.css('position','absolute');  
  3.     this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');  
  4.     this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');  
  5.     return this;  
  6. }  
  7. //這樣來使用上面的函數:  
  8. $(element).center(); 

34. 如何把有著某個特定名稱的所有元素的值都放到一個數組中:

  1. var arrInputValues = new Array();  
  2. $("input[name='table[]']").each(function(){  
  3.     arrInputValues.push($(this).val());  
  4. }); 

35. 如何從元素中除去HTML

  1. (function($) {  
  2.     $.fn.stripHtml = function() {  
  3.         var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;  
  4.         

好文,頂一下
(0)
0%
文章真差,踩一下
(0)
0%
------分隔線----------------------------
  • 上一篇:Ant入門教程
  • 下一篇:體驗TinyXML讀寫XML文件數據
  • 我要評論!
  • 收藏
  • 挑錯
  • 推薦
  • 列印


把開源帶在你的身邊-精美linux小紀念品
文章分類
    新聞動態 企鵝看世界 軟體更新資訊 新手入門 資料庫類 系統安全 系統管理 網路管理 使用經驗 編程開發 企業應用 硬體相關 Unix家族 觀點評論 人物介紹 技術前沿 專題 開源生活 開源美圖 英文資料 Eden團隊出品 開源軟體庫
軟體導航
  • 發行版類 內核相關 伺服器類 模擬模擬 文件管理
  • 系統安全 多媒體類 硬體工具 編程開發 網路熱門
  • 雜類工具 網路工具 圖形圖像 閱讀編輯 書籍資料
  • 遊戲軟體 辦公軟體 數據備份 中文相關 系統管理
  • 科學計算 資料庫類 XWin系統
論壇導航
  • 初級應用-> 新手入門 | 伺服器應用 | 中文化 | 軟體使用交流 | 硬體驅動 | 圖片秀 | 茶館
  • 高級應用->資料庫 | 系統安全 | 嵌入式應用|
  • 編程開發-> C/C++(STL/boost) | 內核 | RAD|Perl/PHP/Python | JAVA/XML | Shell
  • 發行版-> Redhat和Fedora | Debian | Gentoo | Slackware/Suse | Mandrake/Mandriva
  • Unix ->FreeBSD | Solaris | 其他Unix討論
論壇精華
一周熱點

[火星人 ] 50個必備的實用jQuery代碼段已經有609次圍觀

http://coctec.com/docs/program/show-post-71451.html