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 animations
14. 合理利用HTML5的Data属性
HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法,可以有效的利用HTML5的属性,来自动得到数据。下面是个例子:
<div id="d1" 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兵种分类展示效果
data()的jQuery文档:data() in the jQuery docs
15. 本地存储和jQuery
本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:
localStorage.someData = "This is going to be saved across page refreshes and browser restarts";
但是对于老的浏览器来说,这个不是个好消息。因为他们不支持。但是我们可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。