15个值得开发人员关注的jQuery开发技巧和心得

1、15个值得开发人员关注的jQuery开发技巧和心得很多jQuery开发人员可能不知道开发技巧，下面笔者总结了15个值得开发人员关注的jQuery开发技巧和心得，供大家学习和参考，希望对开发人员有所帮助： 1. 尽量使用最新版本的jQuery类库jQuerry项目目中使用用了大量量的创新新。最好好的方法法来提高高性能就就是使用用最新版版本的jjQueery。每每一个新新的版本本都包含含了优化化的buug修复复。对我我们来说说唯一要要干的就就是修改改tagg，何乐乐而不为为呢？我们也可以以使用免免费的CCDN服服务，例例如， Goooglee来存放放jQuueryy类库。 2. 使用用简单的的选择

2、器器直到最近，返返回DOOM元素素的方式式都是解解析选择择器字符符串，jjavaascrriptt循环和和内建的的javvasccrippt AAPI例例如，ggetEElemmenttbyIId()，geetEllemeentssByTTagNNamee()，ggetEElemmenttsByyClaassNNamee()三三种方式式的整合合使用。但但是现代代浏览器器都开始始支持qquerrySeelecctorrAlll()，这这个方法法能够理理解CSSS查询询器，而而且能带带来显著著的性能能提升。然而，我们们应该避避免使用用复杂的的选择器器返回元元素。更更不用说说很多用用户使用用老版本本

3、的浏览览器，强强迫jQQuerry去处处理DOOM树。这这个方式式非常慢慢。$(liidaata-sellectted=trrue aa) / Fanncy, buut ssloww $(lii.seelecctedd a) / BBettter $(#eelemm) / Besst 选择id是是最快速速的方式式。如果果你需要要使用cclasss名称称， 那那么你最最好带上上tagg名称，这这样会更更快些。特特别是在在老浏览览器和移移动设备备上。访问DOMM是jaavasscriipt应应用最慢慢的方式式 ，因因此尽量量少使用用。使用用变量去去保存选选择器，这这样会使使用caachee来保存存

4、。性能能更好。var bbutttonss = $(#naaviggatiion a.bbuttton); / Somme ppreffer preefixxingg thheirr jQQuerry vvariiablles witth $: vvar $buuttoons = $(#navvigaatioon aa.buuttoon); 另外一个值值得做的的是jQQuerry给了了你很多多的额外外便利选选择器 ，例如如，:vvisiiblee，:hhiddden，:aniimatted还还有其它它，这些些不是合合法的CCSS33选择器器。结果果是你使使用这些些类库就就不能有有效地利利用qu

5、ueryySellecttorAAll()方法法。为了了弥补这这个问题题，你需需要先选选择元素素，再过过滤，如如下：$(a.butttonn:annimaatedd); / Dooes nott usse qquerrySeelecctorrAlll() $(a.butttonn).fillterr(:aniimatted); / Usees iit 3. 数组组方式使使用jQQuerry对象象运行选择器器的结果果是一个个jQuueryy对象。然然而，jjQueery类类库让你你感觉你你正在使使用一个个定义了了inddex和和长度的的数组。/ Seelecctinng aall thee na

6、aviggatiion butttonns: varr buuttoons = $(#navvigaatioon aa.buuttoon); / WWe ccan looop tthouugh thee coolleectiion: foor(vvar i=;ibbutttonss.leengtth;ii+) consoole.logg(buuttoonsi); / AA DOOM eelemmentt, nnot a jjQueery objjectt / We cann evven sliice it: vaar ffirsstFoour = bbutttonss.sllicee(,44)

7、; 如果性能是是你关注注的，那那么使用用简单ffor或或者whhilee循环来来处理，而而不是$.eaach()，这这样能使使你的代代码更快快。检查长度也也是一个个检查你你的coolleectiion是是否含有有元素的的方式。if(buuttoons) / TThiss iss allwayys ttruee / Doo soometthinng iff(buuttoons.lenngthh) / Truue oonlyy iff buuttoons conntaiins eleemennts / Doo soometthinng 4. 选择择器属性性jQuerry提供供了一个个属性，这这个属

8、性性显示了了用来做做链式的的选择器器。$(#cconttainner li:firrst-chiild).sseleectoor / #conntaiinerr lii:fiirstt-chhildd $(#cconttainner li).ffiltter(:ffirsst-cchilld).seelecctorr / #cconttainner li.fillterr(:ffirsst-cchilld) 虽然上面的的例子针针对同样样的元素素，选择择器则完完全不一一样。第第二个实实际上是是非法的的，你不不可以使使用它来来创建一一个对象象。只能能用来显显示fiilteer方法法是用来来缩小cc

9、olllecttionn。5. 创建建一个空空的jQQuerry对象象创建一个新新的jQQuerry空间间能极大大的减小小开销。有有时候，你你可能需需要创建建一个空空的对象象，然后后使用aadd()方法法添加对对象。var cconttainner = $(); contaaineer.aadd(anootheer_eelemmentt); 这也是quuickkEacch方法法的基础础，你可可以使用用这种更更快的方方式而非非eacch()。6. 选择择一个随随机元素素上面我提到到过，jjQueery添添加它自自己的选选择器过过滤。除除了类库库，你可可以添加加自己的的过滤器器。只需需要添加加一个

10、新新的方法法到$.exppr:对象。一一个非常常棒的使使用方式式是Waaldeek MMasttykaarz的的博客中中提到的的：创建建一个用用来返回回随机元元素的选选择器。你你可以修修改下面面代码：(funcctioon($) var rranddom = ; $.exppr:.raandoom = fuuncttionn(a, i, m, r) if (ii = ) randoom = Maath.flooor(Matth.rranddom() * r.lenngthh); returrn ii = raandoom; ; )(jQQuerry); / Thhis is howw yoou

11、 uuse it: $(lii:raandoom).adddCllasss(ggloww); 7. 使用用CSSS HoookssCSS hhookks AAPI是是提供开开发人员员得到和和设置特特定的CCSS数数值的方方法。使使用它，你你可以隐隐藏浏览览器特定定的执行行并且使使用一个个统一的的界面来来存取特特定的属属性。$.csssHoooksboordeerRaadiuus = get: funnctiion(eleem, commputted, exxtraa) / Deepenndinng oon tthe broowseer, reaad tthe vallue of / -mmoz

12、-borrderr-raadiuus, -weebkiit-bbordder-raddiuss orr boordeer-rradiius , set: funnctiion(eleem, vallue) / Seet tthe appproppriaate CSSS3 pproppertty ; / Usee itt wiithoout worrryiing whiich prooperrty thee brrowsser acttuallly unddersstannds: $(#rrectt).csss(bbordderRRadiius,5); 更好的在于于，人们们已经创创建了一一个支持

13、持CSSS hoookss类库8. 使用用自定义义的缓动动方法你可能听到到过jQQuerry的缓缓动插件件，它能能够允许许你给你你的动画画添加特特效。唯唯一的缺缺点是你你的访问问者需要要加载另另外一个个javvasccrippt文件件。幸运运的是，你你可以简简单的从从插件拷拷贝效果果，并且且添加到到jQuueryy.eaasinng对象象中，如如下：$.eassingg.eaaseIInOuutQuuad = ffuncctioon (x, t, b, c, d) if (t/=d/22) 1) reeturrn cc/2*t*tt + b; returrn -c/22 * (-t)*(tt-

14、2) - 1) + bb; ; / Too usse iit: $(#eelemm).aniimatte(widdth:2000,sloow,eaaseIInOuutQuuad); 9. $.prooxy()使用calllbaack方方法的缺缺点之一一是当执执行类库库中的方方法后，cconttextt被设置置到另外外一个元元素，例例如： Cloose 执行下面代代码：$(#ppaneel).faadeIIn(ffuncctioon() / tthiss poointts tto #pannel $(#ppaneel bbuttton).cclicck(ffuncctioon() / tthis

15、s poointts tto tthe butttonn $(thiis).faddeOuut(); ); ); 你将遇到问问题，bbuttton会会消失，不不是paanell。使用用$.pproxxy方法法，你可可以这样样书写代代码：$(#ppaneel).faadeIIn(ffuncctioon() / Ussingg $.prooxy to binnd tthiss: $(#ppaneel bbuttton).cclicck($.prroxyy(fuuncttionn() / thhis poiintss too #ppaneel $(thiis).faddeOuut(); ,thiis

16、); ); 这样才正确确的执行行。$.prooxy方方法接受受两个参参数，你你最初的的方法，还还有coonteext。这这里阅读读更多$.prroxyy inn thhe ddocss.。10. 判判断页面面是否太太过复杂杂一个非常简简单的道道理，约约复杂的的页面，加加载的速速度越慢慢。你可可以使用用下面代代码检查查一下你你的页面面内容：consoole.logg( $(*).lenngthh ); 以上代码返返回的数数值越小小，网页页加载速速度越快快。你可可以考虑虑通过删删除无用用多余的的元素来来优化你你的代码码11. 将将你的代代码转化化成jQQuerry插件件如果你要花花一定得得时间去去

17、开发一一段jQQuerry代码码，那么么你可以以考虑将将代码变变成插件件。这将将能够帮帮助你重重用代码码，并且且能够有有效的帮帮助你组组织代码码。创建建一个插插件代码码如下：(funcctioon($) $.fn.youurPllugiinNaame = ffuncctioon() / Yoour codde ggoess heere returrn tthiss; ; )(jQQuerry); 你可以在这这里阅读读更多开开发教程程。12. 设设置全局局AJAAX为缺缺省如果你开发发ajaax程序序的话，你你肯定需需要有”加加载中“之之类的显显示告知知用户，aajaxx正在进进行，我我们可以以

18、使用如如下代码码统一管管理，如如下：/ ajjaxSSetuup iis uusefful forr seettiing genneraal ddefaaultts: $.ajaaxSeetupp( url : /ajaax/, dataTTypee : jsson ); $.ajaaxSttartt(fuuncttionn() showIIndiicattor(); disabbleBButttonss(); ); $.ajaaxCoomplletee(fuuncttionn() hideIIndiicattor(); enablleBuuttoons(); ); /* / Addditti

19、onnal metthodds yyou cann usse: $.ajaaxSttop(); $.ajaaxErrrorr(); $.ajaaxSuucceess(); $.ajaaxSeend(); */ 13. 在在动画中中使用ddelaay()方法链式的动画画效果是是jQuueryy的强大大之处。但但是有一一个忽略略了的细细节就是是你可以以在动画画之间加加上deelayys，如如下：/ Thhis is wroong: $(#eelemm).aniimatte(widdth:2000,ffuncctioon() setTiimeoout(funnctiion() $(#eelemm).

20、aniimatte(marrginnTopp:1000); ,20000); ); / Doo itt liike thiis: $(#eelemm).aniimatte(widdth:2000).dellay(20000).aniimatte(marrginnTopp:1000); jQuerry动画画帮了我我们大忙忙，否则则我们得得自己处处理一堆堆的细节节，设置置timmtouut，处处理属性性值，跟跟踪动画画变化等等等。大家可以参参考这个个文章：jQuueryy annimaatioons14. 合合理利用用HTMML5的的Datta属性性HTML55的daata属属性可以以帮助我我们插入入数据。特特别合适适前后端端的数据据交换。jjQueery近近来发布布的daata()方法法，可以以有效的的利用HHTMLL5的属属性，来来自动得得到数据据。下面面是个例例子： 为了存取数数据你需需要调用用如下代代码：$(#dd1).daata(roole); / paage $(#dd1).daata(laastVValuue); / 443 $(#dd1).daa