Jquery执行效率提高的方法

1.选择器性能排行：$("#ID") > $("Tag") > $(".Class") > $("[attribute=value]")

2.链式调用：

$("#gbdiv").hide();

$("#gbdiv").css("color", "#202020");

$("#gbdiv").show();

上述代码使用下面的写法，可提高执行效率

$("#gbdiv").hide();.css("color", "#202020").show();

3.缓存caching

$("#gbdiv").hide();

$("#gbdiv").css("color", "#202020");

$("#gbdiv").show();

上述代码使用下面的写法，可提高执行效率

var gbin1=$("#gbdiv");

gbin1.hide();

gbin1.css("color", "#202020");

gbin1.show();

4.尽量减少在循环语句中的DOM操作

var data = ["Saab","Volvo","BMW"];

$.each(data, function(i, item){

  var newitem='<div>' + item + '</div>';

  $("#gbcontainer").append(newitem);

});

上述代码使用下面的写法，可提高执行效率

var data = ["Saab","Volvo","BMW"];

var tmp = "";

$.each(data, function(i, item){

    tmp +='<div>' + item + '</div>';

});

$("#gbcontainer").append(tmp);

5.事件代理

在jQuery1.7中提供了一个新的方式on()，这个方法帮助你将整个事件监听封转到一个便利方法中，这里有个例子：

$('#gbin1').find('div').click(function() {

    $(this).toggleClass('gbin1');

});

这个方法很简单，找到指定ID的div，并且添加或者删除class=gbin1 。

如果你在#gbin1中有1000个div的话，你将绑定1000个事件。这将带来很负面的性能影响，使用.on方法，你可以重构如下，同样帮助你有效的优化性能：

$('#gbin1').on('click','div',function() {

    $(this).toggleClass('gbin1');

});