胡斌-JQUERY實用大全

本文翻譯自：CatsWhoCode(后期大量翻譯：TheWebsiteisverygood)1.平滑滾動到頁面頂部我們以一個熱門，實用的代碼片段開始：下面的4行jquery代碼，頁面訪問者通過點擊id為[#top]，滑動到頁面的頂部；$("a[href='#top']").click(function(){$("html,body").animate({scrollTop:0},"slow");returnfalse;});2.克隆表格的表頭到表格底部為了使自己的表格可讀性更強，將表格的表頭克隆到表格底部是個不錯的注意。下面就是這個實用的代碼片段。var$tfoot=$('<tfoot></tfoot>');$($('thead').clone(true,true).children().get().reverse()).each(function(){$tfoot.append($(this));});$tfoot.insertAfter('tablethead');3.加載外部內(nèi)容你需要添加外部內(nèi)容到div標簽么？如果使用jquery，這就變得很簡單，具體實例如下：$("#content").load("somefile.html",function(response,status,xhr){//errorhandlingif(status=="error"){$("#content").html("Anerroroccured:"+xhr.status+""+xhr.statusText);}});4.相同高度的標簽縱列當你的網(wǎng)站是用縱列來顯示的內(nèi)容是，如果所有的模塊列都是等高度的將會更好看，更整潔。下面的代碼將會，將為所有類為.col的div標簽自適應(yīng)為（所有縱列高度最高）的等高模塊：varmaxheight=0;$("div.col").each(function(){if($(this).height()>maxheight){maxheight=$(this).height();}});$("div.col").height(maxheight);5.表格的條紋（斑馬條紋）在表格上展示數(shù)據(jù)時，顏色交替無疑會增加可讀性；下面這段代碼，將為兩行中間的的一行自動加上CSS類（css類自己定義）：$(document).ready(function(){$("tabletr:even").addClass('stripe');});6.頁面局部刷新如果你需要刷新頁面的一部分，下面會有一定的幫助，只需要3行代碼。在這個例子中，#refreshdiv每10秒自動刷新：setInterval(function(){$("#refresh").load(location.href+"#refresh>*","");},10000);//millisecondstowaitPreloadimagesjQuery輕松預載圖像背景中的游客不會永遠等待時，他們將要顯示的圖像。此代碼可以使用，更新圖像列表只需8行：$.preloadImages=function(){for(vari=0;i<arguments.length;i++){$("<img/>").attr("src",arguments[i]);}}$(document).ready(function(){$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");});7.在新標簽/窗口打開鏈接target=”blank”屬性允許你鏈接在新窗口打開的力量。當打開一個新窗口或標簽的外部鏈接是相關(guān)，同域的鏈接一定要在同一個窗口中打開。

此代碼檢測，如果一個鏈接是外部的，如果是，增加了一個目標target=”blank”的屬性給它。$('a').each(function(){vara=newRegExp('/'+window.location.host+'/');if(!a.test(this.href)){$(this).click(function(event){event.preventDefault();event.stopPropagation();window.open(this.href,'_blank');});}});8.使用jQuery讓div滿寬度/高度這個方便的代碼允許你根據(jù)視圖窗口創(chuàng)建一個全屏寬度/高度的div。代碼也處理窗口大小調(diào)整。對模態(tài)對話框或彈出窗口來說不錯。//globalvarsvarwinWidth=$(window).width();varwinHeight=$(window).height();//setinitialdivheight/width$('div').css({'width':winWidth,'height':winHeight,});//makesuredivstaysfullwidth/heightonresize$(window).resize(function(){$('div').css({'width':winWidth,'height':winHeight,});});9.檢驗密碼強度當你讓用戶定義的密碼時，這是表示密碼一般是多么強大的好東西。這就是下面代碼要做的事:

首先，假設(shè)HTML是：<inputtype="password"name="pass"id="pass"/><spanid="passstrength"></span>這里是相應(yīng)的jQuery代碼。輸入的密碼將被評估使用正則表達式和一個消息將被返回給用戶，讓他知道如果他選擇的密碼強，中，弱，或過短。$('#pass').keyup(function(e){varstrongRegex=newRegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$","g");varmediumRegex=newRegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$","g");varenoughRegex=newRegExp("(?=.{6,}).*","g");if(false==enoughRegex.test($(this).val())){$('#passstrength').html('MoreCharacters');}elseif(strongRegex.test($(this).val())){$('#passstrength').className='ok';$('#passstrength').html('Strong!');}elseif(mediumRegex.test($(this).val())){$('#passstrength').className='alert';$('#passstrength').html('Medium!');}else{$('#passstrength').className='error';$('#passstrength').html('Weak!');}returntrue;});10.使用jQuery調(diào)整圖像大小盡管你應(yīng)該調(diào)整您的圖像在服務(wù)器端（使用PHP和GD）。使用jQuery調(diào)整圖像也非常有用。下面的代碼將詮釋怎么用。$(window).bind("load",function(){ //IMAGERESIZE $('#product_cat_listimg').each(function(){ varmaxWidth=120; varmaxHeight=120; varratio=0; varwidth=$(this).width(); varheight=$(this).height(); if(width>maxWidth){ ratio=maxWidth/width; $(this).css("width",maxWidth); $(this).css("height",height*ratio); height=height*ratio; } varwidth=$(this).width(); varheight=$(this).height(); if(height>maxHeight){ ratio=maxHeight/height; $(this).css("height",maxHeight); $(this).css("width",width*ratio); width=width*ratio; } }); //$("#contentpageimg").show(); //IMAGERESIZE});11.頁面滾動自動加載內(nèi)容一些網(wǎng)站如Twitter通過滾動加載內(nèi)容。這意味著一個頁面所有的內(nèi)容是通過你向下滾動來實現(xiàn)動態(tài)加載的。

這里將介紹怎么做的，你可以復制到自己網(wǎng)站看看效果：varloading=false;$(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading==false){ loading=true; $('#loadingbar').css("display","block"); $.get("load.php?start="+$('#loaded_max').val(),function(loaded){ $('body').append(loaded); $('#loaded_max').val(parseInt($('#loaded_max').val())+50); $('#loadingbar').css("display","none"); loading=false; }); } }});$(document).ready(function(){ $('#loaded_max').val(50);});12.檢查圖片是否已加載這段代碼是我使用圖片時經(jīng)常用到的，它是了解一個圖片是否加載完畢最好的方式：varimgsrc='img/image1.png';$('<img/>').load(function(){alert('imageloaded');}).error(function(){alert('errorloadingimage');}).attr('src',imgsrc);13.列表按字母順序排列在某些場景，按照字母順序來排列一個長長的列表將非常有用，這段代碼可以將任何列表按元字母順序排序：$(function(){$.fn.sortList=function(){varmylist=$(this);varlistitems=$('li',mylist).get();listitems.sort(function(a,b){varcompA=$(a).text().toUpperCase();varcompB=$(b).text().toUpperCase();return(compA<compB)?-1:1;});$.each(listitems,function(i,itm){mylist.append(itm);});}$("ul#demoOne").sortList();});14.主要用到兩個屬性：$(window).scroll();//監(jiān)聽頁面滾動$(this).scrollTop()；//代表獲取滾動條的刻度15.下面為我的監(jiān)聽代碼：$(window).scroll(function(){ vars_top=Number($(this).scrollTop());//獲取滾動條，滾動刻度 //varc_top=Number($('.cdnstat_nav').offset().top); if(s_top>=137){ $('.cdnstat_nav').addClass("affix");//添加屬性，讓他固定 $('.cdnstat_nav').css("top",10); }else{ $('.cdnstat_nav').removeClass("affix");//刪除屬性，讓他釋放 }})效果非常不錯。。。最近需要掉一個接口，我的項目，通過js獲取同事項目接口的數(shù)據(jù)；

請看大屏幕，問題出現(xiàn)了，js跨域會被同源策略給弄掉，何為跨域，就是我是一個服務(wù)器，別人是一個服務(wù)器，這時到網(wǎng)上找到一個解決方案jsonp；

就是帶src標簽的都可以跨域取東西，如img可以取到其他網(wǎng)頁其他圖像，還有l(wèi)ink，還有script，所以就這樣了：

我使用的是jquery，代碼貼出，天王蓋地虎有圖有真相：varremoteurl='/index.php/data/get?cdncallback=?';$.get(remoteurl,obj.param,obj.func,'json');remoteurl：地址；obj.param：為參數(shù)，你需要傳的參；obj.func：為函數(shù)，自己隨便定義的；‘json’：為json格式；?cdncallback=?：注意需要在地址結(jié)尾加上這句；

這才是真正需要做的，cdncallback可以隨便取名，=？中的？代表funciton，這里是obj.func;

由于有的服務(wù)器不支持jsonp，所以最好需要去提供接口那兒，讓接口開發(fā)者加上下面這句：echo$_GET['cdncallback'].'('.json.')';總結(jié)下：這是正常的json調(diào)用，不支持跨域：客戶端：varremoteurl='/index.jsp';$.get(remoteurl,obj.param,obj.func,'json');服務(wù)器：

echojson;修改后，支持跨域：客戶端：varremoteurl='/index.php/data/get?cdncallback=?';$.get(remoteurl,obj.param,obj.func,'json');服務(wù)器：echo$_GET['cdncallback'].'('.json.')';接下來解釋下原因：瀏覽器中js的函數(shù)會被解析成對應(yīng)規(guī)則的命名方式如：

functiontest(){};解析成：jquery246541313245;

所以利用jsonp傳送函數(shù)的參數(shù)過去cdncallback=jquery246541313245；

接口返回結(jié)果為jquery246541313245（data）；

你的瀏覽器在解析回來就是test（data）；

然后你就可以用data了；最近研究了下許愿墻的功能，還不錯，貼出來分享下。

許愿墻的幾個功能點：

1、設(shè)置隨機背景；

2、設(shè)置隨機位置；

3、支持拖拽；就這么簡單，下面的代碼可以直接用，為了方便，沒有為卡片設(shè)置背景，都是隨機分配背景色，以下的代碼段，完全勝任，剛剛說的三點；<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><scripttype="text/javascript"src="/clin-public/jquery-1.9.1.min.js"></script><styletype="text/css">#wishmaindiv{cursor:pointer;position:absolute;width:220px;height:150px;border:1pxsolid#999;}.wish{left:100px;top:100px;background:#fc9;}</style></head><body><divid="wishmain"><divclass="wish">1</div><divclass="wish">2</div><divclass="wish">3</div><divclass="wish">4</div><divclass="wish">5</div><divclass="wish">5</div></div><scripttype="text/javascript">varobj;//對象varobj1;//對象varmx;//鼠標位置varmy;varox;//對象位置varoy;varsx=$(document).width();//系統(tǒng)寬度varsy=$(document).height();//鼠標點擊監(jiān)聽每個wishmian下面的div$("#wishmaindiv").mousedown(function(e){ obj=$(this); mx=e.pageX;my=e.pageY;//鼠標第一次點擊獲取坐標 ox=parseInt(obj.css("left"));//對象的坐標 oy=parseInt(obj.css("top"));});//鼠標移動監(jiān)聽$(document).mousemove(function(e){ if(!obj)return;//表示選中了對象 varcx=e.pageX-mx+ox; varcy=e.pageY-my+oy; obj.css("z-index",getz());//顯示在最前面 obj.css({"top":cy+"px","left":cx+"px"});})//鼠標抬起監(jiān)聽$(document).mouseup(function(){ obj=null;//釋放對象});//獲取當前最前面的值functiongetz(){ varmax=0; vartmp=0; $("#wishmaindiv").each(function(){ tmp=parseInt($(this).css("z-index")); if(max<tmp){max=tmp;} }); returnmax+1;}/*****************下面自己設(shè)置*******************///設(shè)置許愿條背景隨機functionsetback(){ vararr=newArray('#7E7DD4','#A0D581','#E2BBA7','#E3ABC4','#CAB3E6'); returnarr[parseInt(Math.random()*5)];}//設(shè)置許愿條開始隨機位置functionsetpos(){ $("#wishmaindiv").each(function(){ varrx=parseInt(Math.random()*(sx-$(this).width())); varry=parseInt(Math.random()*(sy-$(this).height())); $(this).css("background",setback()); $(this).css({"top":ry+"px","left":rx+"px"}); });}setpos();</script></body></html>使用JS實現(xiàn)網(wǎng)頁的預加載，比如圖片的呈現(xiàn)、web相冊，預加載后別人查看圖片不會重新緩沖，從而增強用戶體驗。達到秒殺的境界。使用到的技術(shù)很簡單，主要就是image的onload屬性；簡單說幾個步驟：1、獲取圖片路徑2、預加載圖片直接代碼介紹：//預加載functionimgpreload(){ varimgattr=window.location.href+'img/';//圖片存在文件這個下面 $(".setbg").each(function(){ varinfo=$(this).children('img').attr('src');//具體的圖片名稱 varimg=newImage(); img.src=imgattr+info;//圖片的完整路徑 img.onload=function(){};//圖片預加載 });}imgpreload();//執(zhí)行預加載函數(shù);JS在web客戶端保存cookie信息這里介紹在瀏覽器客戶端保存cookie信息，下次瀏覽的時候可以獲取相應(yīng)信息，比如淘寶聯(lián)盟根據(jù)這個cookie信息來判斷是哪個網(wǎng)站引來的流量，然后給對應(yīng)網(wǎng)站分賬；以及根據(jù)用戶瀏覽歷史比較商品等；自己可以再web客戶端留下具體信息，方便控制，簡單如記住用戶名，上次瀏覽時間，用戶上次保存信息等等；cookie是瀏覽器提供的一種機制，javascript可以調(diào)用document對象的cookie屬性，并不是js的性質(zhì)；cookie是存儲在硬盤的，以域名為鍵名，下次打開該域名網(wǎng)站便可啟用該cookie；cookie機制將信息存儲于用戶硬盤，可作為全局變量，是它最大的優(yōu)點。

我這里用到它主要是使用它存儲天氣預報地區(qū)信息，不用每次用戶設(shè)置后，重新打開網(wǎng)頁都要重新設(shè)置地區(qū)；

說說js怎么使用cookie，最后將給出實例：1、介紹cookie；

document.cookie//document的一個屬性；2、為cookie賦值；

cookie賦值是多個值使用分號‘;‘分割；document.cookie=‘key:info;key:info’;//賦值多個屬性使用';'分割；3、設(shè)置cookie超時；

expires//屬性設(shè)置cookie過期時間；放在cookie設(shè)置最后如下；

以下設(shè)置cookie在365天后超時；vardate=newDate();date.setTime(date.getTime()+365*24*3600*1000);document.cookie=‘key:info;key:info;expires=’+date.toGMTString();4、刪除cookie；

刪除cookie只需要設(shè)置cookie超時，過期就行了；vardate=newDate();date.setTime(date.getTime()-10000);//當前時間往前減一點，就過期了；document.cookie=objName+"=a;expires="+date.toGMTString();//設(shè)置時間過期；5、cookie使用實例

博主右上角的天氣預報有個城市設(shè)置里面就用到了，cookie保存用戶上次設(shè)置的城市；作為一個實例給出js操作cookie增刪改查；代碼如下：//獲取所有cookiefunctiongetAllCookie(){ varallstr=document.cookie; returnallstr;}//獲取指定cookiefunctiongetOneCookie(objName){ vararrStr=document.cookie.split(";"); for(vari=0;i<arrStr.length;i++){ vartemp=arrStr[i].split("="); if(temp[0]==objName){ returnunescape(temp[1]); } }}//添加cookief