1. 从Google Code加载jQuery
Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽,能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是,如果用户访问那些发布在Google Code上的站点后它会被缓存下来。
这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本,而这些很容易做到,引入:
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
2. 使用备忘单
不仅仅是jQuery,很多编程语言也有类似的备忘单,在一张A4的纸上就可以很容易看到每个函数的用法。幸运的是已经有好心的家伙把jQuery的备忘单做得很完善了:
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/
3. 整合所有的脚本并缩减它们
不错,这是JavaScript的一个常见技巧。可是一个使用了jQuery的大项目可能使用了很多相关的jQuery插件(本站就使用了easing,localScroll,lightbox,preload),因此它通常是适用的。浏览器不能同时加载JS脚本(大多数情况下),这意味着如果你同一时间加载很多脚本的话,将减缓页面的加载速度。因此,如果每个页面都要加载这些脚本,你应该考虑在发布之前将这些脚本整合成一个稍大的JS脚本。一些jQuery插件已经最小化了,但是你应该打包你的JS脚本和那些没有缩减过的脚本,这仅需要几秒的时间就可以完成。
就个人而言,我推荐Packer by Dean Edwards
4. 使用Firebug出色的控制台日志工具
如果你还没有安装Firebug,那么你真的应该把它装上。除了许多其它有用的特性(比如允许你检查http传输情况、发现你的CSS问题),它也有极好的日志命令,允许你很容易调试JS脚本。
这里有Firebug所有特性的详细说明。
我最喜欢的特性有”console.info“,通过它你可以把信息和变量值输出到控制台上,而不必使用alert;”console.time”则允许你在一组代码上设置定时器,从而计算出JS脚本运行所花费的时间。这一切都很容易做到:
6. 最小化DOM操作
我们通过减少对DOM的插入操作可以让上面的代码运行得更快。DOM的插入操作(像.append(),.prepend(),.after(),.wrap())是相当耗时的,执行这些操作会拖慢程序的运行。
我们所要做的就是使用字符串拼接来构造一个list项并用一个函数往列表里添加这些项,比如.html()。请看下面的例子:
9. 给选择器提供上下文
默认情况下,当你使用类似$('.myDiv')的选择器时将在整个DOM文档查找元素,这有很大的代价。
当执行选择操作时,jQuery函数可以指定第二个参数:jQuery( expression, context )通过给选择器提供一个上下文,那就会在这个context中进行元素查找,而不必在整个DOM文档中查找元素。
为了解释这个,我们采用前面的第一段代码。它创建一个有1000项内容的UL,每项都有一个单独的class。
然后遍历之每次选择一项。你应该记得通过class选择所有的1000项item需要耗时5秒多。
11. 学会正确使用效果
在我刚开始使用jQuery的时候,就很喜欢这一点:它可以很容易使用预定义好的各种动画效果,像slideDown()和fadeIn()之类的。由于jQuery提供的animate()方法十分易用和强大,我们很容易深入使用它。事实上,在jQuery源代码中不少方法就是通过animate()函数来实现效果的。
12. 了解事件代理
与之前相比,jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性,然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。最好的解释方法就是使用实例:
16. 精简你的HTML并在页面加载后修改它
这个标题可能没有多大意思,但是这个技巧可能理顺你的代码、减小代码体积和页面的下载时间、有助优化你的搜索引擎。请看下面的例子:
22. 如何检查元素是否存在
你不必检查元素是否在页面上存在就可以使用它,因为如果没有在DOM中找到合适的元素,jQuery什么也不会做。可是当我们需要检查元素是否被选择了,或是有多少项被选择了,你可以使用length属性:
25. ready事件的简写
一个小技巧但是通过使用$(document).ready()的简写,你可以少输入几个字符。
取代: