$.cssHooks['borderRadius'] = { get: function(elem, computed, extra){ // Depending on the browser, read the value of // -moz-border-radius, -webkit-border-radius or border-radius }, set: function(elem, value){ // Set the appropriate CSS3 property } }; // Use it without worrying which property the browser actually understands: $('#rect').css('borderRadius',5);
更好的在于，人们已经创建了一个支持CSS hooks类库
8. 使用自定义的删除方法
你可能听到过jQuery的删除插件，它能够允许你给你的动画添加特效。唯一的缺点是你的访问者需要加载另外一个javascript文件。幸运的是，你可以简单的从插件拷贝效果，并且添加到jQuery.easing对象中，如下：
$.easing.easeInOutQuad = function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }; // To use it: $('#elem').animate({width:200},'slow','easeInOutQuad');
9. $.proxy()
使用callback方法的缺点之一是当执行类库中的方法后，context被设置到另外一个元素，例如：
<div> <button>Close</button> </div>
执行下面代码：
$('#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，处理属性值，跟踪动画变化等等。
14. 合理利用HTML5的Data属性
HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法，可以有效的利用HTML5的属性，来自动得到数据。下面是个例子：
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'> </div>
为了存取数据你需要调用如下代码：
$("#d1").data("role"); // "page" $("#d1").data("lastValue"); // 43 $("#d1").data("hidden"); // true; $("#d1").data("options").name; // "John";
如果你想看看实际的例子，请参考这篇教程：
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果：https://www.jb51.net/article/85050.htm
15. 本地存储和jQuery
本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:
localStorage.someData = "This is going to be saved across page refreshes and browser restarts";