[转]整理jquery使用好习惯

1.选择器Selector的使用
1）使用id定位性能最好

 

1.$("#id")

2)使用标签名定位，性能其次

 

1.$("p")，$("div")，$("input")

3）使用.class方法对于IE8或者更早版本来说性能很差

 

1.$(".class")

4）属性定位性能极差

 

1.$("[attribute=value]")


2.$(":hidden")

因此组合使用提高性能，减少对dom遍历

 

1.$("#gbdiv").find(":hidden")

2.链式调用

1）坏习惯

 

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


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

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

2）好习惯

 

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


2.  .css("color", "#202020")


3.  .show()

好处在于你不用多次调用$("#gbdiv")，当然，如果你非要这样写，建议你考虑使用缓存方式

3.缓存

 

1.var
gbin1=$("#gbdiv");

2.gbin1.hide();


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


4.gbin1.show();

4.循环语句

1）坏习惯

 

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


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


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

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


5.});

以上代码中，我们将每一个新添加的tag都作为一个节点添加到容器ID中，实际上jQuery操作节点的成本也不低，更好的方式是尽可能的减少DOM操作

2）好习惯

 

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


2.var
tmp = ''; 


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


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


5.});


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

3）对于字符串特长的，字符串相加在IE6会有性能问题，那就如下

 

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


2.var
tmp = []; 

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


4.    tmp.push('<div>' + item + '</div>')


5.});


6.$("#gbcontainer").append(tmp.join('\n'));  

5.事件代理

假如gbin1里有1000个div,添加click事件
1）坏习惯

 

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

2.    ......

3.});

你将绑定1000个事件

2）好习惯

 

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

2.    ......

3.});

使用.on方法，帮助你有效的优化性能：