在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。
选择单个元素
2、在Classes前面使用Tags
在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。
总是在一个Class前面加上一个tag名字(记得从一个ID传下来)
注意:在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面加Tags。
3、缓存jQuery对象
养成保存jQuery对象到一个变量上(就像上面的例子)的习惯。例如,不要这样做:
$('#traffic_light input.on).bind('click', function(){...});
取而代之,首现保存jQuery变量到一个本地变量后,再继续你的操作。
var $active_light = $('#traffic_light input.on');
4、更好的利用链
var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...})
.css('border', '3px dashed yellow').css('background-color', 'orange')
.fadeIn('slow');
这样可以让我们写更少的代码,使JavaScript更轻量。
5、使用子查询
6、限制直接对DOM操作
DOM操作的基本做法是在内存中创建DOM结构,然后再更新DOM结构。这不是jQuery最好的做法,但对JavaScript来讲是高效的。直接操作DOM结构性能是低下的。 例如,如果你需要动态创建一列元素,不要这样做:
var top_100_list = [...], // assume this has 100 unique strings
$mylist = $('#mylist'); // jQuery selects our <ul> element
for (var i=0, l=top_100_list.length; i<l; i++){
$mylist.append('<li>' + top_100_list[i] + '</li>');
}
取而代之,我们希望在插入DOM结构之前先在一个字符串里创建一套元素。
代码
var top_100_list = [...], // assume this has 100 unique strings
$mylist = $('#mylist'), // jQuery selects our <ul> element
top_100_li = ""; // This will store our list items
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_li += '<li>' + top_100_list[i] + '</li>';
}
$mylist.html(top_100_li);
7、事件委托(又名:冒泡事件)
除非特别说明,每一个JavaScript事件(如click, mouseover 等)在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次,而且可以计算出是哪一个节点触发了事件,而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如,假如我们要开发 一个包含很多input的大型form,当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的:
$('#myList li).bind('click', function(){
$(this).addClass('clicked'); // do stuff
});
反而,我们应该在父级侦听click事件。
$('#myList).bind('click', function(e){
var target = e.target, // e.target grabs the node that triggered the event.
$target = $(target); // wraps the node in a jQuery object
if (target.nodeName === 'LI') {
$target.addClass('clicked'); // do stuff
}
});
父节点担当着发报机的工作,可以在触发了事件的目标element上做一些工作。如果你发现自己把一个event listener帮定到很多个element上,那么你这种做法是不正确的。