jQuery中的常用到的三十九个技巧-清一色财经

我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。

1.当document文档就绪时执行JavaScript代码。

我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上***运行。

<scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
//DifferentwaystoachievetheDocumentReadyevent
//WithjQuery
$(document).ready(function(){/*...*/});
//ShortjQuery
$(function(){/*...*/});
//WithoutjQuery(doesn'tworkinolderIEversions)
document.addEventListener('DOMContentLoaded',function(){
//Yourcodegoeshere
});
//TheTrickshot(workseverywhere):
r(function(){
alert('DOMReady!');
})
functionr(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
</script>

2.使用route。

<scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
varroute={
_routes:{},//Therouteswillbestoredhere
add:function(url,action){
this._routes[url]=action;
},
run:function(){
jQuery.each(this._routes,function(pattern){
if(location.href.match(pattern)){
//"this"pointstothefunctiontobeexecuted
this();
}
});
}
}
//Willexecuteonlyonthispage:
route.add('002.html',function(){
alert('Hellothere!')
});
route.add('products.html',function(){
alert("thiswon'tbeexecuted:(")
});
//Youcanevenuseregex-es:
route.add('.*.html',function(){
alert('Thisisusingaregex!')
});
route.run();
</script>

3.使用JavaScript中的AND技巧。

使用&&操作符的特点是如果操作符左边的表达式是false，那么它就不会再判断操作符右边的表达式了。所以：

//Insteadofwritingthis:
if($('#elem').length){
//dosomething
}
//Youcanwritethis:
$('#elem').length&&log("doingsomething");

4. is()方法比你想象的更为强大。

下面举几个例子，我们先写一个id为elem的div。js代码如下：

//First,cachetheelementintoavariable:
varelem=$('#elem');
//Isthisadiv?
elem.is('div')&&log("it'sadiv");
//Doesithavethebigboxclass?
elem.is('.bigbox')&&log("ithasthebigboxclass!");
//Isitvisible?(wearehidingitinthisexample)
elem.is(':not(:visible)')&&log("itishidden!");
//Animating
elem.animate({'width':200},1);
//isitanimated?
elem.is(':animated')&&log("itisanimated!");

其中判断是否为动画我觉得非常不错。

5.判断你的网页一共有多少元素。

通过使用$(“*”).length（）;方法可以判断网页的元素数量。

//Howmanyelementsdoesyourpagehave?
log('Thispagehas'+$('*').length+'elements!');

6.使用length()属性很笨重，下面我们使用exist()方法。

/Oldway
log($('#elem').length==1?"exists!":"doesn'texist!");
//Trickshot:
jQuery.fn.exists=function(){returnthis.length>0;}
log($('#elem').exists()?"exists!":"doesn'texist!");

7.jQuery方法$()实际上是拥有两个参数的，你知道第二个参数的作用吗？

//Selectanelement.Thesecondargumentiscontexttolimitthesearch
//Youcanuseaselector,jQueryobjectordomelement
$('li','#firstList').each(function(){
log($(this).html());
});
log('-----');
//Createanelement.Thesecondargumentisan
//objectwithjQuerymethodstobecalled
vardiv=$('<div>',{
"class":"bigBlue",
"css":{
"background-color":"purple"
},
"width":20,
"height":20,
"animate":{//YoucanuseanyjQuerymethodasaproperty!
"width":200,
"height":50
}
});
div.appendTo('#result');

8.使用jQuery我们可以判断一个链接是否是外部的，并来添加一个icon在非外部链接中，且确定打开方式。

这里用到了hostname属性。

<ulid="links">
<li><ahref="007.html">Theprevioustip</a></li>
<li><ahref="./009.html">Thenexttip</a></li>
<li><ahref="http://www.google.com/">Google</a></li>
</ul>
//Loopthroughallthelinks
$('#linksa').each(function(){
if(this.hostname!=location.hostname){
//Thelinkisexternal
$(this).append('<imgsrc="assets/img/external.png"/>')
.attr('target','_blank');
}
});

9.jQuery中的end()方法可以使你的jQuery链更加高效。

<ulid="meals"><li><ulclass="breakfast"><liclass="eggs">No</li><liclass="toast">No</li><liclass="juice">No</li></ul></li></ul>
//Hereishowitisused:
varbreakfast=$('#meals.breakfast');
breakfast.find('.eggs').text('Yes')
.end()//backtobreakfast
.find('.toast').text('Yes')
.end()
.find('.juice').toggleClass('juicecoffee').text('Yes');
breakfast.find('li').each(function(){
log(this.className+':'+this.textContent)
});

10.也许你希望你的web 应用感觉更像原生的，那么你可以阻止contextmenu默认事件。

<script>
//Preventrightclickingonthispage
$(function(){
$(document).on("contextmenu",function(e){
e.preventDefault();
});
});
</script>

11.一些站点可能会使你的网页在一个bar下面，即我们所看到在下面的网页是iframe标签中的，我们可以这样解决。

//Hereishowitisused:
if(window!=window.top){
window.top.location=window.location;
}
else{
alert('Thispageisnotdisplayedinaframe.Open011.htmltoseeitinaction.');
}

12.你的内联样式表并不是被设置为不可改变的，如下：

//Makethestylesheetvisibleandeditable
$('#regular-style-block').css({'display':'block','white-space':'pre'})
.attr('contentEditable',true);

这样即可改变内联样式了。

13.有时候我们不希望网页的某一部分内容被选择比如复制粘贴这种事情，我们可以这么做：

<pclass="descr">Incertainsituationsyoumightwanttopreventtextonthepagefrombeingselectable.Tryselectingthistextandhitviewsourcetoseehowitisdone.</p>
<script>
//Preventtextfrombeingselected
$(function(){
$('p.descr').attr('unselectable','on')
.css('user-select','none')
.on('selectstart',false);
});
</script>

这样，内容就不能被选择啦。

14.从CDN中引入jQuery，这样的方法可以提高我们网站的性能，并且引入***的版本也是一个不错的主意。

下面会介绍四种不同的方法。

<!--Case1-requestingjQueryfromtheofficialCDN-->
<scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!--Case2-requestingjQueryfromGoogle'sCDN(noticetheprotocol)-->
<!--<scriptsrc="//gapis.geekzu.org/ajax/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<!--Case3-requestingthelatestminor1.8.xversion(onlycachedforanhour)-->
<!--<scriptsrc="//gapis.geekzu.org/ajax/ajax/libs/jquery/1.10/jquery.min.js"></script>-->
<!--Case4-requestingtheabsolutelatestjQueryversion(usewithcaution)-->
<!--<scriptsrc="http://code.jquery.com/jquery.min.js"></script>-->

15.保证最小的DOM操作。

我们知道js操作DOM是非常浪费资源的，我们可以看看下面的例子。

CODE
//Bad
//varelem=$('#elem');
//for(vari=0;i<100;i++){
//elem.append('<li>element'+i+'</li>');
//}
//Good
varelem=$('#elem'),
arr=[];
for(vari=0;i<100;i++){
arr.push('<li>element'+i+'</li>');
}
elem.append(arr.join(''));

16.更方便的分解URL。

也许你会使用正则表达式来解析URL，但这绝对不是一种好的方法，我们可以借用a标签来实现它。

//Youwanttoparsethisaddressintoparts:
varurl='http://tutorialzine.com/books/jquery-trickshots?trick=12#comments';
//Thetrickshot:
vara=$('<a>',{href:url});
log('Hostname:'+a.prop('hostname'));
log('Path:'+a.prop('pathname'));
log('Query:'+a.prop('search'));
log('Protocol:'+a.prop('protocol'));
log('Hash:'+a.prop('hash'));

17.不要害怕使用vanilla.js。

//PrinttheIDsofallLIitems
$('#colorsli').each(function(){
//AccesstheIDdirectly,instead
//ofusingjQuery's$(this).attr('id')
log(this.id);
});

18.***化你的选择器

//Let'strysomebenchmarks!
variterations=10000,i;
timer('Fancy');
for(i=0;i<iterations;i++){
//ThisfallsbacktoaSLOWJavaScriptdomtraversal
$('#peanutButterdiv:first');
}
timer_result('Fancy');
timer('Parent-child');
for(i=0;i<iterations;i++){
//Better,butstillslow
$('#peanutButterdiv');
}
timer_result('Parent-child');
timer('Parent-childbyclass');
for(i=0;i<iterations;i++){
//Somebrowsersareabitfasteronthisone
$('#peanutButter.jellyTime')

19.缓存你的selector。

//Bad:
//$('#pancakesli').eq(0).remove();
//$('#pancakesli').eq(1).remove();
//$('#pancakesli').eq(2).remove();
//Good:
varpancakes=$('#pancakesli');
pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();
//Alternatively:
//pancakes.eq(0).remove().end()
//.eq(1).remove().end()
//.eq(2).remove().end();

20.对于重复的函数只定义一次

如果你追求代码的更高性能，那么当你设置事件监听程序时必须小心，只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。

$(document).ready(function(){
functionshowMenu(){
alert('Showingmenu!');
//Doingsomethingcomplexhere
}
$('#menuButton').click(showMenu);
$('#menuLink').click(showMenu);
});

21.像对待数组一样地对待jQuery对象

由于jQuery对象有index值和长度，所以这意味着我们可以把对象当作普通的数组对待。这样也会有更好地性能。

vararr=$('li'),
iterations=100000;
timer('NativeLoop');
for(varz=0;z<iterations;z++){
varlength=arr.length;
for(vari=0;i<length;i++){
arr[i];
}
}
timer_result('NativeLoop');
timer('jQueryEach');
for(z=0;z<iterations;z++){
arr.each(function(i,val){
this;
});
}
timer_result('jQueryEach');

22.当做复杂的修改时要分离元素。

修改一个dom元素要求网页重绘，这个代价是高昂的，所以如果你想要再提高性能，就可以尝试着当对一个元素进行大量修改时先从页面中分离这个元素，修改完之后再添加到页面。

//Modifyinginplace
varelem=$('#elem');
timer('Inplace');
for(i=0;i&lt;iterations;i++){
elem.width(Math.round(100*Math.random()));
elem.height(Math.round(100*Math.random()));
}
timer_result('Inplace');
varparent=elem.parent();
//Detachingfirst
timer('Detached');
elem.detach();
for(i=0;i&lt;iterations;i++){
elem.width(Math.round(100*Math.random()));
elem.height(Math.round(100*Math.random()));
}
elem.appendTo(parent);
timer_result('Detached');

23.不要一直等待load事件。

我们已经习惯了把我们所有的代码都放在ready的事件处理程序中，但是，如果你的html页面很庞大，decument ready恐怕会被延迟了，所以对于一些我们不希望ready后才可以触发的事件可以放在html的head元素中。

<script>
//jQueryisloadedatthispoint.Wecanuse
//eventdelegationrightawaytobindevents
//evenbefore$(document).ready:
$(document).on('click','#clickMe',function(){
alert('Hitviewsourceandseehowthisismade');
});
$(document).ready(function(){
//Thisiswhereyouwouldusuallybindeventhandlers,
//butasweareusingdelegation,thereisnoneedto.
//$('#clickMe').click(function(){alert('Hey!');});
});
//Note:Youshouldplaceyourscripttagsatthebottomofthepage.
//Ihaveincludedthemintheheadonlytodemonstratethatwecanbind
//eventsbeforedocumentreadyandbeforetheelementsarecreated.
</script>

24.当使用js给多个元素添加样式时更好的做法是创建一个style元素。

我们之前提到过，操作dom是非常慢的，所以当添加多个元素的样式时创建一个style元素并添加到document中是更好的做法。

<ulid="testList">
<li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
</ul>
varstyle=$('<style>');
//Trycommentingoutthisline,orchangethecolor:
style.text('#testListli{color:red;}');
//Placingitbeforetheresultsectionsoitaffectstheelements
style.prependTo('#result');

25.给html元素分配一个名为JS的class。

现代的web apps非常的依赖js，这里的一个技巧就是只有当js可用时才能显示特定的元素。看下面的代码。

$(document).ready(function(){
$('html').addClass('JS');
});
html.JS#message{display:block;}
#message{display:none;}

这样，只有js可用的时候id为message的元素才会显示；如果不支持js，则该元素不会显示。

26.监听不存在的元素上的事件。

jQuery拥有一个先进的事件处理机制，通过on()方法可以监听还不存在的事件。这是因为on方法可以传递一个元素的子元素选择器作为参数。看下面的例子：

<ulid="testList"><li>Old</li><li>Old</li><li>Old</li><li>Old</li></ul>
varlist=$('#testList');
//Bindinganeventonthelist,butlisteningforeventsontheliitems:
list.on('click','li',function(){
$(this).remove();
});
//Thisallowsustocreatelielementsatalatertime,
//whilekeepingthefunctionalityintheeventlistener
list.append('<li>Newitem(clickme!)</li>');

这样，即使li是后创建的，也可以通过on()方法来监听。

27.只使用一次事件监听。

有时，我们只需要绑定只运行一次的事件处理程序。那么one()方法是一个不错的选择，通过它你就可以高枕无忧了。

<buttonid="press">Pressme!</ul>
varpress=$('#press');
//Thereisamethodthatdoesexactlythat,theone():
press.one('click',function(){
alert('Thisalertwillpopuponlyonce');
});
//Whatthismethoddoes,iscallon()behindthescenes,
//witha1asthelastargument:
//press.on('click',null,null,function(){alert('Iamtheoneandonly!');},1);

28.模拟触发事件。

我们可以通过使用trigger模拟触发一个click事件。

<buttonid="press">Pressme!</ul>
varpress=$('#press');
//Justaregulareventlistener:
press.on('click',function(e,how){
how=how||'';
alert('Thebutonwasclicked'+how+'!');
});
//Triggertheclickevent
press.trigger('click');
//Triggeritwithanargument
press.trigger('click',['fast']);

29.使用触摸事件。

使用触摸事件和相关的鼠标事件并没有太多不同，但是你得有一个方便的移动设备来测试会更好。看下面这个例子。

//Definesomevariables
varball=$('&lt;divid="ball"&gt;&lt;/div&gt;').appendTo('body'),
startPosition={},elementPosition={};
//Listenformouseandtouchevents
ball.on('mousedowntouchstart',function(e){
e.preventDefault();
//Normalizingthetoucheventobject
e=(e.originalEvent.touches)?e.originalEvent.touches[0]:e;
//Recordingcurrentpositions
startPosition={x:e.pageX,y:e.pageY};
elementPosition={x:ball.offset().left,y:ball.offset().top};
//Theseeventlistenerswillberemovedlater
ball.on('mousemove.remtouchmove.rem',function(e){
e=(e.originalEvent.touches)?e.originalEvent.touches[0]:e;
ball.css({
top:elementPosition.y+(e.pageY-startPosition.y),
left:elementPosition.x+(e.pageX-startPosition.x),
});
});
});
ball.on('mouseuptouchend',function(){
//Removingtheheavy*movelisteners
ball.off('.rem');
});

30.更好地使用on()/off()方法。

在jQuery1.7版本时对事件处理进行了简化，看看下面的例子吧。

<divid="holder"><buttonid="button1">1</button><buttonid="button2">2</button><buttonid="button3">3</button><buttonid="button4">4</button><buttonid="clear"style="float:right;">Clear</button></div>
//Letscachesomeselectors
varbutton1=$('#button1'),
button2=$('#button2'),
button3=$('#button3'),
button4=$('#button4'),
clear=$('#clear'),
holder=$('#holder');
//Case1:Directeventhandling
button1.on('click',function(){
log('Click');
});
//Case2:Directeventhandlingofmultipleevents
button2.on('mouseentermouseleave',function(){
log('In/Out');
});
//Case3:Datapassing
button3.on('click',Math.round(Math.random()*20),function(e){
//Thiswillprintthesamenumberoverandoveragain,
//astherandomnumberaboveisgeneratedonlyonce:
log('Randomnumber:'+e.data);
});
//Case4:Eventswithanamespace
button4.on('click.temp',function(e){
log('Tempevent!');
});
button2.on('click.temp',function(e){
log('Tempevent!');
});
//Case5:Usingeventdelegation
$('#holder').on('click','#clear',function(){
log.clear();
});
//Case6:Passinganeventmap
vart;//timer
clear.on({
'mousedown':function(){
t=newDate();
},
'mouseup':function(){
if(newDate()-t&gt;1000){
//Thebuttonhasbeenheldpressed
//formorethanasecond.Turnoff
//thetempevents
$('button').off('.temp');
alert('The.tempeventswerecleared!');
}
}
});

31.更快地阻止默认事件行为。

我们知道js中可以使用preventDefault()方法来阻止默认行为，但是jQuery对此提供了更简单的方法。如下：

<ahref="http://google.com/"id="goToGoogle">GoToGoogle</a>$('#goToGoogle').click(false);

32.使用event.result链接多个事件处理程序。

对一个元素绑定多个事件处理程序并不常见，而使用event.result更可以将多个事件处理程序联系起来。看下面的例子。

<buttonid="press">点击</button>
<scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
varpress=$('#press');
press.on('click',function(){
return'Hip';
});
//Thesecondeventlistenerhasaccess
//towhatwasreturnedfromthefirst
press.on('click',function(e){
console.log(e.result+'Hop!');
});
</script>

这样，控制台会输出Hip Hop!

33.创建你自己习惯的事件。

你可以使用on()方法创建自己喜欢的事件名称，然后通过trigger来触发。举例如下：

<buttonid="button1">Jump</button><buttonid="button2">Punch</button><buttonid="button3">Click</button><buttonid="clear"style="float:right;">Clear</button><divid="eventDiv"></div>
<scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
varbutton1=$('#button1'),
button2=$('#button2'),
button3=$('#button3'),
clear=$('#clear'),
div=$('#eventDiv');
div.on({
jump:function(){
alert('Jumped!');
},
punch:function(e,data){
alert('Punched'+data+'!');
},
click:function(){
alert('Simulatedclick!');
}
});
button1.click(function(){
div.trigger('jump');
});
button2.click(function(){
//Passdataalongwiththeevent
div.trigger('punch',['hard']);
});
button3.click(function(){
div.trigger('click');
});
clear.click(function(){
//someclearcode
});
</script>

34.在下载文件旁显示文件大小。

你知道如何在不下载一个文件的情况下通过发送一个ajax请求头得到一个文件的大小吗？使用jQuery就很容易。

<ahref="001.html"class="fetchSize">FirstTrickshot</a><br/>
<ahref="034.html"class="fetchSize">ThisTrickshot</a><br/>
<ahref="assets/img/ball.png"class="fetchSize">Ball.png</a><br/>
//Loopall.fetchSizelinks
$('a.fetchSize').each(function(){
//IssueanAJAXHEADrequestforeachone
varlink=this;
$.ajax({
type:'HEAD',
url:link.href,
complete:function(xhr){
//Appendthefilesizetoeach
$(link).append('('+humanize(xhr.getResponseHeader('Content-Length'))+')');
}
});
});
functionhumanize(size){
varunits=['bytes','KB','MB','GB','TB','PB'];
varord=Math.floor(Math.log(size)/Math.log(1024));
ord=Math.min(Math.max(0,ord),units.length-1);
vars=Math.round((size/Math.pow(1024,ord))*100)/100;
returns+''+units[ord];
}

注意：这个例子如何我们直接使用浏览器是没法得到的，必须使用本地的web服务器打开运行才可以。

35.使用延迟简化你的Ajax请求

延迟(deferreds)是一个强大的工具。jQuery对于每一个Ajax请求都会返回一个deferred对象。deferred.done()方法接受一个或多个参数，所有这些都参数可以是一个单一的函数或一个函数数组。当Deferred（延迟）解决时，doneCallbacks被调用。回调是依照他们添加的顺序执行。一旦deferred.done()返回Deferred（延迟）对象，Deferred（延迟）可以链接其它的延迟对象，包括增加额外的.done()方法。下面这样就会使你的代码更易读：

//Thisisequivalenttopassingacallbackasthe
//secondargument(executedonsuccess):
$.get('assets/misc/1.json').done(function(r){
log(r.message);
});
//Requestingafilethatdoesnotexist.Thiswilltrigger
//thefailureresponse.Tohandleit,youwouldnormallyhaveto
//usethefull$.ajaxmethodandpassitasafailurecallback,
//butwithdeferredsyoucancansimplyusethefailmethod:
$.get('assets/misc/non-existing.json').fail(function(r){
log('Oops!Thesecondajaxrequestwas"'+r.statusText+'"(error'+r.status+')!');
});

36.平行的运行多个Ajax请求。

当我们需要发送多个Ajax请求是，相反于等待一个发送结束再发送下一个，我们可以平行地发送来加速Ajax请求发送。

//Thetrickisinthe$.when()function:
$.when($.get('assets/misc/1.json'),$.get('assets/misc/2.json')).then(function(r1,r2){
log(r1[0].message+""+r2[0].message);
});

37.通过jQuery获得ip

我们不仅可以在电脑上ping到一个网站的ip，也可以通过jQuery得到。

$.get('http://jsonip.com/',function(r){log(r.ip);});
//Forolderbrowsers,whichdon'tsupportCORS
//$.getJSON('http://jsonip.com/?callback=?',function(r){log(r.ip);});

38.使用最简单的ajax请求

jQuery（使用ajax）提供了一个速记的方法来快速下载内容并添加在一个元素中。

<pclass="content"></p><pclass="content"></p>
varcontentDivs=$('.content');
//Fetchthecontentsofatextfile:
contentDivs.eq(0).load('1.txt');
//FetchthecontentsofaHTMLfile,anddisplayaspecificelement:
contentDivs.eq(1).load('1.html#header');

39.序列化对象

jQuery提供了一个方法序列化表单值和一般的对象成为URL编码文本字符串。这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交表单了。

<formaction="">
Firstname:<inputtype="text"name="FirstName"value="Bill"/><br/>
Lastname:<inputtype="text"name="LastName"value="Gates"/><br/>
</form>
//TurnallformfieldsintoaURLfriendlykey/valuestring.
//ThiscanbepassedasargumentofAJAXrequests,orURLs.
$(document).ready(function(){
console.log($("form").serialize());//FirstName=Bill&LastName=Gates
});
//Youcanalsoencodeyourownobjectswiththe$.parammethod:
log($.param({'pet':'cat','name':'snowbell'}));

©本文为清一色官方代发，观点仅代表作者本人，与清一色无关。清一色对文中陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。本文不作为投资理财建议，请读者仅作参考，并请自行承担全部责任。文中部分文字/图片/视频/音频等来源于网络，如侵犯到著作权人的权利，请与我们联系（微信/QQ:1074760229）。转载请注明出处：清一色财经