在这篇文章中，南宁达内科技java培训小编将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的，希望大家能够喜欢！1. 尽量使用最新版本的jQuery类库 jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag，何乐而不为呢？ 我们也可以使用免费的CDN服务，例如， Google来存放jQuery类库。2. 使用简单的选择器直到最近，返回DOM元素的方式都是解析选择器字符串，javascript循环和内建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三种方式的整合使用。但是现代浏览器都开始支持querySelectorAll()，这个方法能够理解CSS查询器，而且能带来显著的性能提升。 然而，我们应该避免使用复杂的选择器返回元素。更不用说很多用户使用老版本的浏览器，强迫jQuery去处理DOM树。这个方式非常慢。$('li[data-selected="true"] a') // Fancy, but slow$('li.selected a') // Better$('#elem') // Best 选择id是最快速的方式。如果你需要使用class名称， 那么你最好带上tag名称，这样会更快些。特别是在老浏览器和移动设备上。 访问DOM是javascript应用最慢的方式 ，因此尽量少使用。使用变量去保存选择器，这样会使用cache来保存。性能更好。var buttons = $('#navigation a.button'); // Some prefer prefixing their jQuery variables with $:var $buttons = $('#navigation a.button'); 另外一个值得做的是jQuery给了你很多的额外便利选择器 ，例如，:visible，:hidden，:animated还有其它，这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用 querySelectorAll()方法。为了弥补这个问题，你需要先选择元素，再过滤，如下：$('a.button:animated'); // Does not use querySelectorAll()$('a.button').filter(':animated'); // Uses it3. 数组方式使用jQuery对象 运行选择器的结果是一个jQuery对象。然而，jQuery类库让你感觉你正在使用一个定义了index和长度的数组。// Selecting all the navigation buttons:var buttons = $('#navigation a.button');// We can loop though the collection:for(var i=0;i
执行下面代码：$('#panel').fadeIn(function(){// this points to #panel$('#panel button').click(function(){ // this points to the button $(this).fadeOut();});});你将遇到问题，button会消失，不是panel。使用$.proxy方法，你可以这样书写代码：$('#panel').fadeIn(function(){// Using $.proxy to bind this:$('#panel button').click($.proxy(function(){ // this points to #panel $(this).fadeOut();},this));});这样才正确的执行。$.proxy方法接受两个参数，你最初的方法，还有context。这里阅读更多$.proxy in the docs.。10. 判断页面是否太过复杂 一个非常简单的道理，约复杂的页面，加载的速度越慢。你可以使用下面代码检查一下你的页面内容：console.log( $('*').length );以上代码返回的数值越小，网页加载速度越快。你可以考虑通过删除无用多余的元素来优化你的代码11. 将你的代码转化成jQuery插件如果你要花一定得时间去开发一段jQuery代码，那么你可以考虑将代码变成插件。这将能够帮助你重用代码，并且能够有效的帮助你组织代码。创建一个插件代码如下：(function($){$.fn.yourPluginName = function(){ // Your code goes here return this;};})(jQuery);你可以在这里阅读更多开发教程。12. 设置全局AJAX为缺省 如果你开发ajax程序的话，你肯定需要有”加载中“之类的显示告知用户，ajax正在进行，我们可以使用如下代码统一管理，如下：// ajaxSetup is useful for setting general defaults:$.ajaxSetup({ url : '/ajax/', dataType : 'json'});$.ajaxStart(function(){ showIndicator(); disableButtons();});$.ajaxComplete(function(){ hideIndicator(); enableButtons();});/* // Additional methods you can use: $.ajaxStop(); $.ajaxError(); $.ajaxSuccess(); $.ajaxSend();*/详细你可以查看这篇文章: * 如何快速创建一个AJAX的"加载"的图片效果 * 5个在线Ajax“加载中”旋转图标生成器工具13. 在动画中使用delay()方法 链式的动画效果是jQuery的强大之处。但是有一个忽略了的细节就是你可以在动画之间加上delays，如下：// This is wrong:$('#elem').animate({width:200},function(){ setTimeout(function(){ $('#elem').animate({marginTop:100}); },2000);});// Do it like this:$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});jQuery动画帮了我们大忙，否则我们得自己处理一堆的细节，设置timtout，处理属性值，跟踪动画变化等等。大家可以参考这个文章：jQuery animations14. 合理利用HTML5的Data属性HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法，可以有效的利用HTML5的属性，来自动得到数据。下面是个例子：为了存取数据你需要调用如下代码：$("#d1").data("role"); // "page"$("#d1").data("lastValue"); // 43$("#d1").data("hidden"); // true;$("#d1").data("options").name; // "John";如果你想看看实际的例子，请参考这篇教程：使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果data()的jQuery文档：data() in the jQuery docs15. 本地存储和jQuery 本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:localStorage.someData = "This is going to be saved across page refreshes and browser restarts";但是对于老的浏览器来说，这个不是个好消息。因为他们不支持。但是我们可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。多语言展示
当前在线：1914今日阅读：176今日分享：34