這些年、我收集的JQuery代碼

来源:http://www.cnblogs.com/androidshouce/archive/2016/06/11/5574712.html
-Advertisement-
Play Games

1. 如何創建嵌套的過濾器 //允許你減少集合中的匹配元素的過濾器， //只剩下那些與給定的選擇器匹配的部分。在這種情況下， //查詢刪除了任何沒（:not）有（:has） //包含class為“selected”（.selected）的子節點。 .filter(":not(:has(.select ...


 

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

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

2. 如何重用元素搜索

var allItems = $("div.item"); var keepList = $("div#container1 div.item" 
); 
//現在你可以繼續使用這些jQuery對象來工作了。例如， 
        //基於覆選框裁剪“keep list”，覆選框的名稱 
        //符合
<DIV> 
class names:
$(formToLookAt + " input:checked").each(function () { keepList = keepList.filter("." + $(this).attr( 
"name"));
    });
</DIV>

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

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

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

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

5. 如何限制選擇範圍（基於優化目的）

       //儘可能使用標簽名來作為類名的首碼，  
       //這樣jQuery就不需要花費更多的時間來搜索  
       //你想要的元素。還要記住的一點是，  
       //針對於你的頁面上的元素的操作越具體化，  
       //就越能降低執行和搜索的時間。
var in_stock = $('#shopping_cart_items input.is_in_stock');<ul id="shopping_cart_items"> <li><input type="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" value="Item-Z" name="item" class="unknown" />Item Z</li> </ul>

6. 如何正確地使用ToggleClass

        //切換（toggle）類允許你根據某個類的  
        //是否存在來添加或是刪除該類。  
        //這種情況下有些開發者使用：
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton' 
);

        //toggleClass允許你使用下麵的語句來很容易地做到這一點

    a.toggleClass('blueButton');

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

    if ($.browser.msie) {
       // Internet Explorer其實不那麼好用

    }

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

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

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

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

    }

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

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




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


 $('#foo').bind('click', function () { alert('User clicked on "foo."'

);
    });




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


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





13. 在創建元素時，如何使用對象字面量（literal）來定義屬性


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


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




       //在使用許多相類似的有著不同類型的input元素時，  
       //這種基於精確度的方法很有用

var elements = $('#someid input[type=sometype][value=somevalue]').get();


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


 jQuery.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $("<img />").attr('src'

, arguments[i]);
        }
    };

        //用法 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');


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


 $('button.someClass').live('click'

, someFunction);


//註意，在jQuery 1.4.2中，delegate和undelegate選項 //被引入代替live，因為它們提供了更好的上下文支持 //例如，就table來說，以前你會用 //.live() $("table").each(function () { $("td", this).live("hover", function () { $(this).toggleClass("hover"

);
        });
    });


//現在用 $("table").delegate("td", "hover", function () { $(this).toggleClass("hover"

);
    });




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


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


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


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


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




    jQuery.fn.autoscroll = function (selector) { 


        $('html,body').animate( { scrollTop: $(this ).offset().top },
        500
        );
    }


       //然後像這樣來滾動到你希望去到的class/area上。 


   $('.area_name').autoscroll(); 




20. 如何檢測各種瀏覽器




    if( $.browser.safari) //檢測Safari 


    if ($.browser.msie && $.browser.version > 6 ) //檢測IE6及之後版本 


    if ($.browser.msie && $.browser.version <= 6 ) //檢測IE6及之前版本 


    if ($.browser.mozilla && $.browser.version >= '1.8' ) //檢測FireFox 2及之後版本




21. 如何替換串中的詞


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


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




    $(document).bind('contextmenu', function (e) { 


         return false ;
    });




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


    $.expr[':'].mycustomselector = function

(element, index, meta, stack){  
    

// element- 一個DOM元素 // index – 棧中的當前迴圈索引 // meta – 有關選擇器的元數據 // stack – 要迴圈的所有元素的棧 // 如果包含了當前元素就返回true // 如果不包含當前元素就返回false }; // 定製選擇器的用法： $('.someClasses:test').doSomething(); 





































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




    if ($('#someDiv' ).length) {
      //你妹，終於找到了 


    }




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


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

);
        }
    });






26. 如何顯示或是刪除input域中的預設值




       //這段代碼展示了在用戶未輸入值時，  
       //如何在文本類型的input域中保留  
       //一個預設值  


 $(".swap").each(function (i) { wap_val[i] = $(this).val(); $(this).focusin(function () { if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function () { if ($.trim($(this).val()) == "") { $(this

).val(swap_val[i]);
            }
        });
    });




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




       //這是1.3.2中我們使用setTimeout來實現的方式 

 setTimeout(function () { $('.mydiv').hide('blind'

, {}, 500)
    }, 5000);
    

//而這是在1.4中可以使用delay()這一功能來實現的方式（這很像是休眠） $(".mydiv").delay(5000).hide('blind', {}, 500);


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




   var newDiv = $(''); 


       newDiv.attr('id', 'myNewDiv').appendTo('body');




29. 如何限制“Text-Area”域中的字元的個數


 jQuery.fn.maxLength = function (max) { this.each(function () { var type = this.tagName.toLowerCase(); var inputType = this.type ? this.type.toLowerCase() : null; if (type == "input" && inputType == "text" || inputType == "password"

) {


this.maxLength = max; } else if (type == "textarea") { this.onkeypress = function (e) { var ob = e || event; var keyCode = ob.keyCode; var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd; return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); }; this.onkeyup = function () { if (this.value.length > max) { this.value = this

.value.substring(0, max);
                    }
                };
            }
        });
    };

        //用法 $('#mytextarea').maxLength(500);


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


//把測試單獨放在模塊中 module("Module B"); test("some other test", function 

() {
        //指明測試內部預期有多少要運行的斷言 
        expect(2);
        

//一個比較斷言，相當於JUnit的assertEquals equals(true, false, "failing test"); equals(true, true, "passing test"

);
    });






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


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


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




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


    }




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




 

    jQuery.fn.center = function () {
        this.css('position', 'absolute');
        this.css('top', ($(window).height() - this.height()) 
                        / +$(window).scrollTop() + 'px');
        this.css('left', ($(window).width() - this.width()) 
                         / 2 + $(window).scrollLeft() + 'px');
        return this

;
    }

       //這樣來使用上面的函數： $(element).center();


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




    var arrInputValues = new Array(); 


    $("input[name='table[]']").each(function () { 


       arrInputValues.push($(this ).val());
    });




35. 如何從元素中除去HTML




 

    (function ($) {
        $.fn.stripHtml = function () {
            var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
            this.each(function () {
                $(this).html($(this).html().replace(regexp, ""));
            });
            return $(this

);
        }
    })(jQuery);

        //用法： $('p').stripHtml();


36. 如何使用closest來取得父元素


    $('#searchBox').closest('div');


37. 如何使用Firebug和Firefox來記錄jQuery事件日誌




// 允許鏈式日誌記錄 
       // 用法：

$('#someDiv').hide().log('div hidden').addClass('someClass'); jQuery.log = jQuery.fn.log = function (msg) { if (console) { console.log("%s: %o", msg, this); } return this

;
    };




38. 如何強制在彈出視窗中打開鏈接


 jQuery('a.popup').live('click', function () { newwindow = window.open($(this).attr('href'), '', 'height=200,width=150'); if (window.focus) { newwindow.focus(); } return false

;
    });




39. 如何強制在新的選項卡中打開鏈接


 jQuery('a.newTab').live('click', function () { newwindow = window.open($(this).href); jQuery(this).target = "_blank"; return false

;
    });




40. 在jQuery中如何使用.siblings()來選擇同輩元素




        // 不這樣做 


 

    $('#nav li').click(function () {
        $('#nav li').removeClass('active');
        $(this).addClass('active'

);
    });


        //替代做法是 

 $('#nav li').click(function () { $(this).addClass('active').siblings().removeClass('active'

);
    });




41. 如何切換頁面上的所有覆選框




    var tog = false ;
    // 或者為true，如果它們在載入時為被選中狀態的話 

    $('a').click(function () {
        $("input[type=checkbox]").attr("checked"

, !tog);
        tog = !tog;
    });




42. 如何基於一些輸入文本來過濾一個元素列表




       //如果元素的值和輸入的文本相匹配的話  
       //該元素將被返回

 $('.someClass').filter(function () { return $(this).attr('value') == $('input#someId'

).val();
    })




43. 如何獲得滑鼠墊游標位置x和y


 $(document).ready(function () { $(document).mousemove(function (e) { $('#XY').html("X Axis : " + e.pageX + " | Y Axis " 

+ e.pageY);
        });
    });





44. 如何把整個的列表元素（List Element，LI）變成可點擊的


 $("ul li").click(function () { window.location = $(this).find("a").attr("href"); return false

;
    });

<ul> <li><a href="#">Link 1</
              
	   




	

	
您的分享是我們最大的動力!




			 	

	
	

    


-Advertisement-
Play Games
     


	


    

    

    




	       	  

              
更多相關文章  

              

                   
    


				
  • 
				
    
			    	
    
				    	敏捷軟體開發（4）--- TEMPLATE METHOD & STRATEGY 模式
			    	
    
					
    1.TEMPLATE METHOD 泛型，也就是這個模式，是可以基於泛型的。 我們往往會有一些演算法，比如排序演算法。它的演算法部分，我可以把它放在一個基類裡面，這樣具體類型的比較可以放在子類裡面。 看如下冒泡排序演算法： 先看int的排序： 只要實現了比較和交換2個介面，就可以了。 在看看基於泛型的子類： ...
    
				
    
		    
  • 
				
    
			    	
    
				    	初見微服務之服務註冊與發現
			    	
    
					
    1.什麼是服務註冊與發現 微服務將傳統的"巨石"應用拆分成一個一個的組件應用，每個組件應用提供特定的服務，可以是一個，也可以是多個，並且組件所含服務應該是可以動態擴展的，隨著時間推移、系統進化，可任意拆分、合併。 組件化應用和顆粒化的服務，遍佈在系統的各個角落，由不同的項目成員進行維護，微服務的核心... ...
    
				
    
		    
  • 
				
    
			    	
    
				    	CQRS FAQ (翻譯)
			    	
    
					
    我從接觸ddd到學習cqrs有6年多了, 其中也遇到了不少疑問, 也向很多的前輩牛人請教得到了很多寶貴的意見和建議. 偶爾的機會看到國外有個站點專門羅列了ddd, cqrs和事件溯源的常見問題. 其中很多也是我一路過來都曾遇到過的. 這是原站地址http://www.cqrs.nu/Faq. 在EN ...
    
				
    
		    
  • 
				
    
			    	
    
				    	第一次寫jquery插件，來個countdown計時器吧
			    	
    
					
    之前同學做個購物商城秒殺活動需要計時器的功能，在用jquery提供的countdown插件時，一直報錯，貌似還需要依賴除jquery之外的其他插件，搞了半天也沒搞成功，就叫我幫忙寫個。然而我並沒有寫過插件，不過剛好趁這次端午好好地鍛煉一把吧，順便在這兒存個代碼，自己的思路不好，大神們請不要見笑哈.. ...
    
				
    
		    
  • 
				
    
			    	
    
				    	bootstrap 教程分享
			    	
    
					
    Bootstrap 教程 Bootstrap 簡介 Bootstrap 環境安裝 Bootstrap CSS 概覽 Bootstrap 網格系統 Bootstrap 排版 Bootstrap 代碼 Bootstrap 表格 Bootstrap 表單 Bootstrap 按鈕 Bootstrap 圖片 ...
    
				
    
		    
  • 
				
    
			    	
    
				    	Unity3D 5.x 簡單實例 - 腳本編寫
			    	
    
					
    1，Vector3 類型變數存儲向量坐標值 Vector3.forward Vector3(0,0,1) Vector3.up Vector3(0,1,0) Vector3.right Vector3(1,0,0) Vector3.zero Vector3(0,0,0) Vector3.one Ve ...
    
				
    
		    
  • 
				
    
			    	
    
				    	CSS的Display屬性可能的值
			    	
    
					
    none 此元素不會被顯示。 block 此元素將顯示為塊級元素，此元素前後會帶有換行符。 inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。 inline-block 行內塊元素。（CSS2.1 新增的值） list-item 此元素會作為列表顯示。 run-in 此元素會根據上下 ...
    
				
    
		    
  • 
				
    
			    	
    
				    	jQuery 3.0正式發佈
			    	
    
					
    jQuery 基金會剛剛發佈了該 JavaScript 框架的 3.0 版本，並且首次拋棄了對老舊的 IE 瀏覽器的支持。jQuery 3.0 的工作始於 2014 年 10 月，其最初目標是在 2.0 版本之上進行完善，並和遙遠的 1.0 版代碼說再見——因為要相容 IE 的緣故，其已經臃腫不堪。 ...
    
				
    
		    
    • 
				 
		  
  
                  

              

          



		
        

        
        

            
 







    
一周排行

    

         
    

 
    -Advertisement-
    Play Games
    	   
	
  • 
			        	
    
			    	        
    
				    	        移動開發（一）：使用.NET MAUI開發第一個安卓APP
			            	
    
				        	
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        wpf ToggleButton選中效果和一個登錄界面
			            	
    
				        	
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        彈幕樹洞項目功能新增篇
			            	
    
				        	
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        第27篇 sqlserver2022詳細安裝步驟
			            	
    
				        	
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        .NET 開源高性能 MQTT 類庫
			            	
    
				        	
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
			            	
    
				        	
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
			            	
    
				        	
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
			            	
    
				        	
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
			            	
    
				        	
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        第28篇 如何.net中實現高效可靠數據同步api
			            	
    
				        	
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
    
			         	
    
		            
    • 										 





		        	
                 	
                 			        

    





    
所有分類