50個必備的實用jQuery代碼段

50個必備的實用jQuery代碼段(1)本文會給你們展示 50個jquery代碼片段，這些代碼能夠給你的 javascript項目提供幫助。其中的一些代碼段是從 jQuery1.4.2才開始支持的做法， 另一些則是真正有用的函數(shù)或方法，他們能夠幫助你又快又好地把事情完成。 這些都是我盡量記住的有著最佳性能的代碼段，因此如果你發(fā)現(xiàn)你任何可以做得更好的地方的話，歡迎把你的版本粘貼在評論中 !我希望你在這一文章中能找到有幫助的東西。.如何創(chuàng)建嵌套的過濾器：//允許你減少集合中的匹配元素的過濾器，//只剩下那些與給定的選擇器匹配的部分。在這種情況下，. //查詢刪除了任何沒口 ：not)有( ：has). //包含class為“selected”］.selected］的子節(jié)點。.filter(":not(:has(.selected))").如何重用元素搜索varallItems=$("div.item");varkeepList=$("div#container1div.item");//現(xiàn)在你可以繼續(xù)使用這些 jQuery對象來工作了。例如，//基于復(fù)選框裁剪 “keeplist”，復(fù)選框的名稱//符合<DIV>classnames:$(formToLookAt+"input:checked").each(function(){keepList=keepList.filter("."+$(this).attr("name"));});</DIV>.任何使用has()來檢查某個元素是否包含某個類或是元素：//jQuery1.4.*］含了對這一 has方法的支持。該方法找出//某個元素是否包含了其他另一個元素類或是其他任何的//你正在查找并要在其之上進行操作的東東。$("input").has(".email").addClass("email_icon");.如何使用jQuery來切換樣式表//找出你希望切換的媒體類型(media-type),然后把href設(shè)置成新的樣式表。$('link[media='screen']').attr('href','Alternative.css');.如何限制選擇范圍(基于優(yōu)化目的)：//盡可能使用標(biāo)簽名來作為類名的前綴，//這樣jQuery就不需要花費更多的時間來搜索//你想要的元素。還要記住的一點是，//針對于你的頁面上的元素的操作越具體化，//就越能降低執(zhí)行和搜索的時間。varin_stock=$('#shopping_cart_itemsinput.is_in_stock);<ulid="shopping_cart_items"><li><inputtype="radio"value="Item-X"name="item"class="is_in_stock"/>ItemX</li><li><inputtype="radio"value="Item-Y"name="item"class="3-5_days"/>ItemY</li><li><inputtype="radio"value="Item-Z"name="item"class="unknown"/>ItemZ</li></ul>.如何正確地使用ToggleClass：//切換(toggle)類允許你根據(jù)某個類的//是否存在來添加或是刪除該類。//這種情況下有些開發(fā)者使用：a.hasClass('blueButton')?a.removeClass('blueButton'):a.addClass('blueButton');//toggleClass允許你使用下面的語句來很容易地做到這一點a.toggleClass('blueButton');.如何設(shè)置IE特有的功能：if($.browser.msie){//InternetExplorer就是個虐待狂}.如何使用jQuery來代替一個元素：1.$('#thatdiv').replaceWith('fnuh');.如何驗證某個元素是否為空：if($('#keks').html()){TOC\o"1-5"\h\z//什么都沒有找到 ;}.如何從一個未排序的集合中找出某個元素的索引號$("ul>li").click(function(){varindex=$(this).prevAll().length;});50個必備的實用jQuery代碼段(2)2011-08-1513:29瘋狂小強我要評論(5)字號：T|T收藏口本文會給你們展示 50個jquery代碼片段，這些代碼能夠給你的 Javascript項目提供幫助。這些都是我盡量記住的有著最佳性能的代碼段，我希望你在這一文章中能找到有幫助的東西。AD：2013大數(shù)據(jù)全球技術(shù)峰會低價搶票中.如何把函數(shù)綁定到事件上：$('#foo').bind('click',function(){alert('Userclickedon"foo."');});.如何追加或是添加html到元素中：$('#lal').append('sometext');.在創(chuàng)建元素時，如何使用對象字面量(literal)來定義屬性vare=$("",{href:"#",class:"a-classanother-class",title:"..."});如何使用多個屬性來進行過濾//在使用許多相類似的有著不同類型的input元素時，//這種基于精確度的方法很有用varelements=$('#someidinput[type=sometype][value=somevalue]).get();15.如何使用jQuery來預(yù)加載圖像：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');如何為任何與選擇器相匹配的元素設(shè)置事件處理程序：$('button.someClass').live('click',someFunction);//注意，在jQuery1.4.2中，delegate和undelegate選項//被引入代替live，因為它們提供了更好的上下文支持//例如，就table來說，以前你會用//.live()$("table").each(function(){$("td",this).live("hover",function(){$(this).toggleClass("hover");});});//現(xiàn)在用$("table").delegate("td","hover",function(){$(this).toggleClass("hover");});17.如何找到一個已經(jīng)被選中的option元素:1.$('#someElement').find('option:selected');如何隱藏一個包含了某個值文本的元素：$("p.value:contains('thetextvalue')).hide();如果自動滾動到頁面中的某區(qū)域jQuery.fn.autoscroll=function(selector){$('html,body').animate({scrollTop:$(selector).offset().top},TOC\o"1-5"\h\z500};}//然后像這樣來滾動到你希望去到的 class/area上。$('.area_name').autoscroll();如何檢測各種瀏覽器：.檢測Safari(if($.browser.safari)),.檢測IE6及之后版本 (if($.browser.msie&&$.browser.version>6)),.檢測IE6及之前版本 (if($.browser.msie&&$.browser.version<=6)),.檢測FireFox2及之后版本(if($.browser.mozilla&&$.browser.version>='1.8'))50□□□□□□jQuery代碼段(3)2011-08-1513:29瘋狂小強我要評論(5)字號：T|T本文會給你們展示 50個jquery代碼片段， 這些代碼能夠給你的 Javascript項目提供幫助。這些都是我盡量記住的有著最佳性能的代碼段，我希望你在這一文章中能找到有幫助的東西。AD：2013大數(shù)據(jù)全球技術(shù)峰會低價搶票中如何替換串中的詞varel=$('#id');el.html(el.html().replace(/word/ig,''));如何禁用右鍵單擊上下文菜單：$(document).bind('contextmenu',function(e){returnfalse;});如何定義一個定制的選擇器$.expr[':'].mycustomselector=function(element,index,meta,stack){// element-一個DOM元素// index-棧中的當(dāng)前循環(huán)索引// meta-有關(guān)選擇器的元數(shù)據(jù)// stack-要循環(huán)的所有元素的棧// 如果包含了當(dāng)前元素就返回true// 如果不包含當(dāng)前元素就返回false};// 定制選擇器的用法：$('.someClasses:test').doSomething();如何檢查某個元素是否存在if($('#someDiv').length){//萬歲?。?！它存在……}如何使用jQuery來檢測右鍵和左鍵的鼠標(biāo)單擊兩種情況：$("#someelement").live('click',function(e){if((!$.browser.msie&&e.button==0)||($.browser.msie&&e.button==1)){alert("LeftMouseButtonClicked");}elseif(e.button==2){alert("RightMouseButtonClicked");}});26.如何顯示或是刪除input域中的默認(rèn)值//這段代碼展示了在用戶未輸入值時，//如何在文本類型的input域中保留//一個默認(rèn)值wap_val=[];$(".swap").each(function(i){wap_val[i]=$(this).val();$(this).focusin(function(){if($(this).val()==swap_val[i]){$(this).val("");TOC\o"1-5"\h\z}}).focusout(function(){if($.trim($(this).val())==""){$(this).val(swap_val[i]);}});});.如何在一段時間之后自動隱藏或關(guān)閉元素(支持1.4版本)：//這是1.3.2中我們使用setTimeout來實現(xiàn)的方式setTimeout(function(){$('.mydiv').hide('blind',{},500)},5000);//而這是在1.4中可以使用delay()這一功能來實現(xiàn)的方式(這很像是休眠)$(".mydiv").delay(5000).hide('blind',{},500);.如何把已創(chuàng)建的元素動態(tài)地添加到DOM中：varnewDiv=$('');newDiv.attr('id','myNewDiv').appendTo('body');.如何限制"Text-Area”域中的字符的個數(shù)：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"){//ApplythestandardmaxLength7.this.maxLength=max;7.}elseif(type=="textarea"){this.onkeypress=function(e){varob=e||event;varkeyCode=ob.keyCode;varhasSelection=document.selection?document.selection.createRange().text.length>0:this.selectionStart!=this.selectionEnd;14.return!(this.value.length>=max&&(keyCode>50|14.|keyCode==32||keyCode==0||keyCode==13)&&!ob.ctrlKey&&ob.altKey&&!hasSelection);TOC\o"1-5"\h\z};this.onkeyup=function(){if(this.value.length>max){this.value=this.value.substring(0,max);}};}});};//用法$('#mytextarea').maxLength(500);30.如何為函數(shù)創(chuàng)建一個基本的測試//把測試單獨放在模塊中module("ModuleB");test("someothertest",function(){//指明測試內(nèi)部預(yù)期有多少要運行的斷言expect(2);//一個比較斷言，相當(dāng)于 JUnit的assertEqualsequals(true, false,"failing test");equals(true, true,"passing test");});50□□□□□□jQuery代碼段(4)2011-08-1513:29瘋狂小強我要評論(5)字號：T|T本文會給你們展示 50個jquery代碼片段，這些代碼能夠給你的 Javascript項目提供幫助。這些都是我盡量記住的有著最佳性能的代碼段，我希望你在這一文章中能找到有幫助的東西。AD：2013大數(shù)據(jù)全球技術(shù)峰會低價搶票中.如何在jQuery中克隆一個元素：varcloned=$('#somediv').clone();.在jQuery中如何測試某個元素是否可見if($(element).is(':visible')=='true'){//該元素是可見的}.如何把一個元素放在屏幕的中心位置：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;}//這樣來使用上面的函數(shù)：$(element).center();.如何把有著某個特定名稱的所有元素的值都放到一個數(shù)組中：vararrInputValues=newArray();$("input[name='table[]']").each(function(){arrInputValues.push($(this).val());});.如何從元素中除去HTML(function($){$.fn.stripHtml=function(){varregexp=/<("[八"]*"|'。]*'|?！?gt;])*>/gi;this.each(function(){$(this).html($(this).html().replace(regexp,”"));});return$(this);}})(jQuery);//用法：$('p').stripHtml();.如何使用closest來取得父元素：$('#searchBox').closest('div');.如何使用Firebug和Firefox來記錄jQuery事件日志://允許鏈?zhǔn)饺罩居涗?/用法：$('#someDiv').hide().log('divhidden').addClass('someClass');jQuery.log=jQuery.fn.log=function(msg){if(console){console.log("%s:%o",msg,this);}returnthis;};.如何強制在彈出窗口中打開鏈接：jQuery('a.popup').live('click',function(){newwindow=window.open($(this).attr('href'),'','height=200,width=150');TOC\o"1-5"\h\zif(window.focus) {newwindow.focus();}returnfalse;});.如何強制在新的選項卡中打開鏈接：jQuery('a.newTab').live('click',function(){newwindow=window.open($(this).href);jQuery(this).target="_blank";returnfalse;});3. 3. });5. 5. }).在jQuery中如何使用.siblings。來選擇同輩元素//不這樣做$('#navli').click(function(){$('#navli').removeClass('active');$(this).addClass('active');});//替代做法是$('#navli').click(function(){$(this).addClass('active').siblings().removeClass('active');});50□□□□□□jQuery代碼段(5)2011-08-1513:29瘋狂小強我要評論(5)字號：T|T收藏本文會給你們展示 50個jquery代碼片段， 這些代碼能夠給你的 Javascript項目提供幫助。這些都是我盡量記住的有著最佳性能的代碼段，我希望你在這一文章中能找到有幫助的東西。AD：2013大數(shù)據(jù)全球技術(shù)峰會低價搶票中.如何切換頁面上的所有復(fù)選框：vartog=false;//或者為true，如果它們在加載時為被選中狀態(tài)的話$('a').click(function(){$("input[type=checkbox]").attr("checked",!tog);tog=!tog;});.如何基于一些輸入文本來過濾一個元素列表：//如果元素的值和輸入的文本相匹配的話//該元素將被返回$('.someClass').filter(function(){return$(this).attr('value')==$('input#someId').val();.如何獲得鼠標(biāo)墊光標(biāo)位置x和y$(document).ready(function(){$(document).mousemove(function(e){$(’#XY’).html(”XAxis:”+e.pageX+”|YAxis”+e.pageY);});});.如何把整個的列表元素(ListElement,LI)變成可點擊的$("ulli").click(function(){window.location=$(this).find("a").attr("href");returnfalse;});<ul><li><ahref="#">Link1</a></li><li><ahref="#">Link2</a></li><li><ahref="#">Link3</a></li><li><ahref="#">Link4</a></li></ul>.如何使用jQuery來解析XML(基本的例子)：functionparseXml(xml){//找到每個Tutorial并打印出author$(xml).find("Tutorial").each(