2021-05-12 14:32:11
50個必備的實用jQuery程式碼段
2019-12-13 00:58:56
初學jQuery的同學們必備的50個必備的實用jQuery程式碼段
1
如何建立巢狀的過濾器：
2
如何重用元素搜尋：
3
任何使用has()來檢查某個元素是否包含某個類或是元素：
4
如何使用jQuery來切換樣式表//找出你希望切換的媒體型別（media-type），然後把href設定成新的樣式表。 $('link[media='screen']').attr('href', 'Alternative.css');5
如何限制選擇範圍（基於優化目的）： //盡可能使用標籤名來作為類名的字首， //這樣jQuery就不需要花費更多的時間來搜尋 //你想要的元素。還要記住的一點是， //針對於你的頁面上的元素的操作越具體化， //就越能降低執行和搜尋的時間。 varin_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="r6
如何正確地使用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()) { //什麼都沒有找到; }10
如何從一個未排序的集合中找出某個元素的索引號 $("ul > li").click(function() { varindex = $(this).prevAll().length; });11
如何把函數系結到事件上： $('#foo').bind('click', function() { alert('User clicked on "foo."'); });12
如何追加或是新增html到元素中： $('#lal').append('sometext');13
在建立元素時，如何使用物件字面量（literal）來定義屬性 vare = $("", { href: "#", class: "a-class another-class", title: "..."});14
如何使用多個屬性來進行過濾 //在使用許多相類似的有著不同型別的input元素時， //這種基於精確度的方法很有用 varelements = $('#someid input[type=sometype][value=somevalue]').get();15
如何使用jQuery來預載入影象： jQuery.preloadImages = function() { for(vari = 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"17
如何找到一個已經被選中的option元素： $('#someElement').find('option:selected');18
如何隱藏一個包含了某個值文字的元素： $("p.value:contains('thetextvalue')").hide();19
如果自動捲動到頁面中的某區域 jQuery.fn.autoscroll = function(selector) { $('html,body').animate( {scrollTop: $(selector).offset().top}, 500 }; } //然後像這樣來捲動到你希望去到的class/area上。 $('.area_name').autoscroll();20
如何檢測各種瀏覽器： 檢測Safari (if( $.browser.safari)), 檢測IE6及之後版本 (if($.browser.msie && $.browser.version > 6 )), 檢測IE6及之前版本 (if($.browser.msie && $.browser.version <= 6 )), 檢測FireFox 2及之後版本 (if($.browser.mozilla && $.browser.version >= '1.8'))21
如何替換串中的詞 varel = $('#id'); el.html(el.html().replace(/word/ig, ''));22
如何禁用右鍵單擊上下文選單： $(document).bind('contextmenu',function(e){ returnfalse; });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"); } elseif(e.button == 2) { alert("Right Mouse Button Clicked"); } });26
如何顯示或是刪除input域中的預設值 //這段程式碼展示了在使用者未輸入值時， //如何在文字型別的input域中保留 //一個預設值 wap_val = []; $(".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中： varnewDiv = $(''); newDiv.attr('id','myNewDiv').appendTo('body');29
如何限制「Text-Area」域中的字元的個數： jQuery.fn.maxLength = function(max){ this.each(function(){ vartype = this.tagName.toLowerCase(); varinputType = this.type? this.type.toLowerCase() : null; if(type == "input"&& inputType == "text"|| inputType == "password"){ //Apply the standard maxLength this.maxLength = max; } elseif(t30
如何為函數建立一個基本的測試 //把測試單獨放在模組中 module("Module B"); test("some other test", function() { //指明測試內部預期有多少要執行的斷言 expect(2); //一個比較斷言，相當於JUnit的assertEquals equals( true, false, "failing test"); equals( true, true, "passing test"); });31
如何在jQuery中克隆一個元素： varcloned = $('#somediv').clone();32
在jQuery中如何測試某個元素是否可見 if($(element).is(':visible') == 'true') { //該元素是可見的 }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'); returnthis; } //這樣來使用上面的函數： $(element).center();34
如何把有著某個特定名稱的所有元素的值都放到一個陣列中：vararrInputValues = newArray(); $("input[name='table[]']").each(function(){ arrInputValues.push($(this).val()); });35
如何從元素中除去HTML (function($) { $.fn.stripHtml = function() { varregexp = /<("[^"]*"|'[^']*'|[^'">])*>/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); } returnthis; };38
如何強制在彈出視窗中開啟連結： jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if(window.focus) { newwindow.focus(); } returnfalse; });39
如何強制在新的索引標籤中開啟連結： jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href); jQuery(this).target = "_blank"; returnfalse; });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
如何切換頁面上的所有核取方塊： vartog = 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"); returnfalse; }); <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul>45
如何使用jQuery來解析XML（基本的例子）： functionparseXml(xml) { //找到每個Tutorial並列印出author $(xml).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); }); }46
如何檢查影象是否已經被完全載入進來 $('#theImage').attr('src', 'image.jpg').load(function() { alert('This Image Has Been Loaded'); });47
如何使用jQuery來為事件指定名稱空間： //事件可以這樣系結名稱空間 $('input').bind('blur.validation', function(e){ // ... }); //data方法也接受名稱空間 $('input').data('validation.isValid', true);48
如何檢查cookie是否啟用 vardt = newDate(); dt.setSeconds(dt.getSeconds() + 60); document.cookie = "cookietest=1; expires="+ dt.toGMTString(); varcookiesEnabled = document.cookie.indexOf("cookietest=") != -1; if(!cookiesEnabled) { //沒有啟用cookie }49
如何讓cookie過期： vardate = newDate(); date.setTime(date.getTime() + (x * 60 * 1000)); $.cookie('example', 'foo', { expires: date });50
如何使用一個可點選的連結來替換頁面中任何的URL $.fn.replaceUrl = function() { varregexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,'<a href="$1">$1</a>‘) ); }); return$(this); } //用法 $('p').replaceUrl();相關文章