值得开发人员关注的jQuery开发技巧和心得具体有哪些

这期内容当中小编将会给大家带来有关值得开发人员关注的jQuery开发技巧和心得具体有哪些，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

我们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的。

1. 尽量使用最新版本的jQuery类库

jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag，何乐而不为呢？

我们也可以使用免费的CDN服务，例如， Google来存放jQuery类库。

$('#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(); */

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 animations

14. 合理利用HTML5的Data属性

HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法，可以有效的利用HTML5的属性，来自动得到数据。下面是个例子：

为了存取数据你需要调用如下代码：

$("#d1").data("role");// "page" $("#d1").data("lastValue");// 43 $("#d1").data("hidden");// true; $("#d1").data("options").name;// "John";

data()的jQuery文档：data() in the jQuery docs

15. 本地存储和jQuery

本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:

// Check if "key" exists in the storage var value = $.jStorage.get("key"); if(!value){ // if not - load the data from the server value = load_data_from_server(); // and save it $.jStorage.set("key",value); } // Use value

但是对于老的浏览器来说，这个不是个好消息。因为他们不支持。但是我们可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。

以上就上有关15个值得开发人员关注的jQuery开发技巧和心得的全部内容，全面介绍编程技术、操作系统、数据库、web前端技术等内容。

上述就是小编为大家分享的值得开发人员关注的jQuery开发技巧和心得具体有哪些了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。