1. 从Google Code加载jQuery[b]
[/b]Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它
[b]节省了你服务器上的带宽[/b],能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是,如果用户访问那些发布在Google Code上的站点后它会被
[b]缓存下来。[/b]
这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本,而这些很容易做到,引入:
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
"></script>
2. 使用备忘单[b]
[/b]不仅仅是jQuery,很多编程语言也有类似的备忘单,在一张A4的纸上就可以很容易看到每个函数的用法。幸运的是已经有好心的家伙把jQuery的备忘单做得很完善了:
[url=http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/]
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/[/url]
[url=http://colorcharge.com/jquery/]
http://colorcharge.com/jquery/[/url]
3. 整合所有的脚本并缩减它们[b]
[/b]不错,这是JavaScript的一个常见技巧。可是一个使用了jQuery的大项目可能使用了很多相关的jQuery插件(本站就使用了easing,localScroll,lightbox,preload),因此它通常是适用的。浏览器不能同时加载JS脚本(大多数情况下),这意味着如果你同一时间加载很多脚本的话,将减缓页面的加载速度。因此,如果每个页面都要加载这些脚本,你应该考虑在发布之前将这些脚本整合成一个稍大的JS脚本。一些jQuery插件已经最小化了,但是你应该打包你的JS脚本和那些没有缩减过的脚本,这仅需要几秒的时间就可以完成。
就个人而言,我推荐[url=http://dean.edwards.name/packer/]
Packer by Dean Edwards[/url]
4. 使用Firebug出色的控制台日志工具[b]
[/b]如果你还没有安装Firebug,那么你真的应该把它装上。除了许多其它有用的特性(比如允许你检查http传输情况、发现你的CSS问题),它也有极好的日志命令,允许你很容易调试JS脚本。
这里有Firebug所有[url=http://getfirebug.com/console.html]
特性的详细说明[/url]。
我最喜欢的特性有”[url=http://console.info/]
console.info[/url]“,通过它你可以把信息和变量值输出到控制台上,而不必使用alert;”console.time”则允许你在一组代码上设置定时器,从而计算出JS脚本运行所花费的时间。这一切都很容易做到:
[url=http://plugins.jquery.com/project/color]colors and background colors[/url]
12. 了解事件代理[b]
[/b]与之前相比,jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性,然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。最好的解释方法就是使用实例:
[url=http://docs.jquery.com/Internals]jQuery internals[/url]
[b]15. 写你自己的选择器
[/b]jQuery有许多内置的选择器用以通过ID、class、标签、属性以及其他元素进行选择操作。然而当你需要基于其它一些内容进行元素选择而jQuery却没有提供该选择器时,你能做什么呢?
嗯,一个解决方案可能是从一开始就给元素添加上classes,从而利用这些classes进行元素的选择操作。然而这被证明很难对jQuery扩展出新的选择器。
最好的解释方法就是使用实例:
[url=http://docs.jquery.com/Utilities]http://docs.jquery.com/Utilities[/url]
尤其,提供一些常见的数组函数的浏览器支持是一个补丁。jQuery提供了迭代、过滤、克隆、合并和从数组中去除重复项的方法。
其他常用的函数包括得到下拉框中的选择项。用传统的JavaScript方法,你就必须使用getElementById得到<select>元素,然后通过遍历它的子元素找出被选中的元素。而jQuery提供了相当容易使用的方法:
[url=http://www.learningjquery.com/2008/10/1-awesome-way-to-avoid-the-not-so-excellent-flash-of-amazing-unstyled-content]他的所有文章[/url]。
[b]24. 返回'false'以防止默认行为
[/b]这是很明显的,也可能不是。如果你有这样的习惯:
[url=#]
然后添加上如下的事件处理:
$('popup').click(function(){
// Launch popup code
});
你在长页面使用上述方法时,它可能可以正常工作。有些时候你会注意到在点击链接后锚点会跳转到页面上部。
所有你要做的就是阻止它的默认行为,或者实际上你可以把”return false;”添加到任何事件的默认行为上。像这样:
$('popup').click(function(){
// Launch popup code
return false;
});
25. ready事件的简写[b]
[/b]一个小技巧但是通过使用$(document).ready()的简写,你可以少输入几个字符。
取代:
$(document).ready(function (){
// your code
});
你可以简写成:
$(function (){
// your code
});
微信版

扫一扫进微信版
返回顶部