这期内容当中小编将会给大家带来有关值得开发人员关注的jQuery开发技巧和心得具体有哪些，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
我们将介绍15个让你的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.。
一个非常简单的道理，约复杂的页面，加载的速度越慢。你可以使用下面代码检查一下你的页面内容：
console.log( $('*').length );
以上代码返回的数值越小，网页加载速度越快。你可以考虑通过删除无用多余的元素来优化你的代码
如果你要花一定得时间去开发一段jQuery代码，那么你可以考虑将代码变成插件。这将能够帮助你重用代码，并且能够有效的帮助你组织代码。创建一个插件代码如下：
(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);
你可以在这里阅读更多开发教程。
如果你开发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();
*/
链式的动画效果是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
HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法，可以有效的利用HTML5的属性，来自动得到数据。下面是个例子：
<p id="d1" data-role="page" data-last-value="43" data-hidden="true"
data-options='{"name":"John"}'>
</p>
为了存取数据你需要调用如下代码：
$("#d1").data("role");// "page"
$("#d1").data("lastValue");// 43
$("#d1").data("hidden");// true;
$("#d1").data("options").name;// "John";
data()的jQuery文档：data() in the jQuery docs
本地存储是一个超级简单的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开发技巧和心得具体有哪些了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
