改善你的jQuery的25个步骤 千倍级效率提升

时间:2021-05-18

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:///Utilities
尤其,提供一些常见的数组函数的浏览器支持是一个补丁。jQuery提供了迭代、过滤、克隆、合并和从数组中去除重复项的方法。
其他常用的函数包括得到下拉框中的选择项。用传统的JavaScript方法,你就必须使用getElementById得到<select>元素,然后通过遍历它的子元素找出被选中的元素。而jQuery提供了相当容易使用的方法:
复制代码 代码如下:$('#selectList').val();
花时间浏览官方网站上的jQuery文档与一些不常用的方法上是很值得的。
19. 使用noConflict重命名jQuery对象
大多数JavaScript框架都使用$符号作为缩写,当在同一个页面使用多个JS框架时,页面很容易发生冲突。幸运的是有一个简单的方法。noConflict()函数交回$的控制权并允许你设置成自己的变量名:
复制代码 代码如下:
$('#selectList').val();

20. 如何得知图片已加载完毕
这也一个没有很好文档说明的问题(至少在我查找时没看到),但是在创建照片库、旋转灯笼效果等方面,它是相当常见的需求。而这在jQuery中很容易实现。
所有你要做的就是在IMG上使用.load()方法,在其中添加一个回调函数。下面的例子改变了一个图片src的属性同事附加上一个简单的load函数:
复制代码 代码如下:
$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});

你应该可以发现一旦图片加载完毕就会弹出一个alert。
21. 总是使用最新版本
jQuery仍在不断的更新,它的作者John Resig一直在寻找提高jQuery性能的方法。jQuery当前的版本是1.3.2,John已经宣称他正在写一个新的选择器引擎Sizzle,这可能会显著的提高选择器性能(在Firefox中提升了4倍),因此我们应当保持最新版本。

22. 如何检查元素是否存在
你不必检查元素是否在页面上存在就可以使用它,因为如果没有在DOM中找到合适的元素,jQuery什么也不会做。可是当我们需要检查元素是否被选择了,或是有多少项被选择了,你可以使用length属性:
复制代码 代码如下:
if ($('#myDiv).length) {
// your code
}

简单之极。
23. 给你的HTML属性增加JS类
我是从Karl Swedberg那学到这个技巧,过去学习jQuery时一直在看他的书。
他最近在我以前的文章留下了对该用法的评论,基本原则如下示之。
首先,在jQuery加载之后你可以使用方法将”JS”类添加到HTML标签中:
复制代码 代码如下:$('HTML').addClass('JS');
因为这仅仅发生在javascript有效的时候,如果用户打开JavaScript开关,那么你可以使用它给元素添加上CSS风格:
复制代码 代码如下:.JS #myDiv{display:none;}

因此,这意味着在JavaScript打开时我们可以隐藏内容,然后在需要时使用jQuery显示这些内容(比如在用户点击时收缩或展开内容),同时在关闭JavaScript(以及搜索Spiders)时会看到所有内容。我将在晚些时候使用这个技巧。
可以在这里看到他的所有文章。
24. 返回'false'以防止默认行为
这是很明显的,也可能不是。如果你有这样的习惯:
复制代码 代码如下:
<a href="#" class="popup">Click me!</a>
然后添加上如下的事件处理:
复制代码 代码如下:
$('popup').click(function(){
// Launch popup code
});


你在长页面使用上述方法时,它可能可以正常工作。有些时候你会注意到在点击链接后锚点会跳转到页面上部。
所有你要做的就是阻止它的默认行为,或者实际上你可以把”return false;”添加到任何事件的默认行为上。像这样:
复制代码 代码如下:
$('popup').click(function(){
// Launch popup code
return false;
});

25. ready事件的简写
一个小技巧但是通过使用$(document).ready()的简写,你可以少输入几个字符。
取代:
复制代码 代码如下:
$(document).ready(function (){
// your code
});
你可以简写成:
复制代码 代码如下:
$(function (){
// your code
});

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章