写出高性能的JQuery

一个糟糕的Jquery可能会影响到整个页面的渲染更或是请求耗时很长，这样的网页展示，我想是用户不愿意看到的。

1.取消没必要的频繁的获取Jquery对象，这个在Java编程里我想一样：

[javascript]  view plain  copy

1. // 糟糕  
2. h = $('#element').height();  
3. $('#element').css('height',h-20);  
4. // 建议  
5. $element = $('#element');  
6. h = $element.height();  
7. $element.css('height',h-20);  

2.用局部变量代理从JQuery对象中获取属性

[javascript]  view plain  copy

1. // 糟糕  
2. $element = $('#element');  
3. h = $element.height();  
4. $element.css('height',h-20);  
5. // 建议var   
6. $element = $('#element');  
7. var h = $element.height();  
8. $element.css('height',h-20);   

3.通过绑定事件来代替直接用事件：

[javascript]  view plain  copy

1. // 糟糕  
2. $first.click(function(){  
3.     $first.css('border','1px solid red');  
4.     $first.css('color','blue');  
5. });  
6.    
7. $first.hover(function(){  
8.     $first.css('border','1px solid red');  
9. })  
10.    
11. // 建议  
12. $first.on('click',function(){  
13.     $first.css('border','1px solid red');  
14.     $first.css('color','blue');  
15. })  
16.    
17. $first.on('hover',function(){  
18.     $first.css('border','1px solid red');  
19. })  

4.合并重复的函数操作：

[javascript]  view plain  copy

1. 合并函数：  
2. // 糟糕  
3.    
4. $first.click(function(){  
5.     $first.css('border','1px solid red');  
6.     $first.css('color','blue');  
7. });  
8.    
9. // 建议  
10.    
11. $first.on('click',function(){  
12.     $first.css({  
13.         'border':'1px solid red',  
14.         'color':'blue'  
15.     });  
16. });  

5.使用链接

[javascript]  view plain  copy

1. // 糟糕  
2. $second.html(value);  
3. $second.on('click',function(){  
4.     alert('hello everybody');  
5. });  
6. $second.fadeIn('slow');  
7. $second.animate({height:'120px'},500);  
8. // 建议  
9. $second.html(value);  
10. $second.on('click',function(){  
11.     alert('hello everybody');  
12. }).fadeIn('slow').animate({height:'120px'},500);  

6.基于5做一些代码格式优化，增加可读性

[javascript]  view plain  copy

1. // 糟糕  
2. $second.html(value);  
3. $second.on('click',function(){  
4.     alert('hello everybody');  
5. }).fadeIn('slow').animate({height:'120px'},500);  
6. // 建议  
7. $second.html(value);  
8. $second  
9.     .on('click',function(){ alert('hello everybody');})  
10.     .fadeIn('slow')  
11.     .animate({height:'120px'},500);  
12.       

7.避免使用一些容易出错的形式：

[javascript]  view plain  copy

1. <a href="#"/> # 这里指的是返回页面top，虽然没有深究，但是在项目中真心踩过坑。  
2. 尽量使用<a href="javascript:;">，当然也有喜好用<a href="javascript:void(0);">//javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。  

8.对于一些常见问题的解释:

[javascript]  view plain  copy

1. //一下操作并不是按钮失效，因为onclick="return false"只能阻止a标签href属性中的网址（或代码）执行,可以理解成让一个a标签的页面跳转失败  
2. $("#id").on("click",function(){return false;});  

一个糟糕的Jquery可能会影响到整个页面的渲染更或是请求耗时很长，这样的网页展示，我想是用户不愿意看到的。

1.取消没必要的频繁的获取Jquery对象，这个在Java编程里我想一样：

[javascript]  view plain  copy

1. // 糟糕  
2. h = $('#element').height();  
3. $('#element').css('height',h-20);  
4. // 建议  
5. $element = $('#element');  
6. h = $element.height();  
7. $element.css('height',h-20);  

2.用局部变量代理从JQuery对象中获取属性

[javascript]  view plain  copy

1. // 糟糕  
2. $element = $('#element');  
3. h = $element.height();  
4. $element.css('height',h-20);  
5. // 建议var   
6. $element = $('#element');  
7. var h = $element.height();  
8. $element.css('height',h-20);   

3.通过绑定事件来代替直接用事件：

[javascript]  view plain  copy

1. // 糟糕  
2. $first.click(function(){  
3.     $first.css('border','1px solid red');  
4.     $first.css('color','blue');  
5. });  
6.    
7. $first.hover(function(){  
8.     $first.css('border','1px solid red');  
9. })  
10.    
11. // 建议  
12. $first.on('click',function(){  
13.     $first.css('border','1px solid red');  
14.     $first.css('color','blue');  
15. })  
16.    
17. $first.on('hover',function(){  
18.     $first.css('border','1px solid red');  
19. })  

4.合并重复的函数操作：

[javascript]  view plain  copy

1. 合并函数：  
2. // 糟糕  
3.    
4. $first.click(function(){  
5.     $first.css('border','1px solid red');  
6.     $first.css('color','blue');  
7. });  
8.    
9. // 建议  
10.    
11. $first.on('click',function(){  
12.     $first.css({  
13.         'border':'1px solid red',  
14.         'color':'blue'  
15.     });  
16. });  

5.使用链接

[javascript]  view plain  copy

1. // 糟糕  
2. $second.html(value);  
3. $second.on('click',function(){  
4.     alert('hello everybody');  
5. });  
6. $second.fadeIn('slow');  
7. $second.animate({height:'120px'},500);  
8. // 建议  
9. $second.html(value);  
10. $second.on('click',function(){  
11.     alert('hello everybody');  
12. }).fadeIn('slow').animate({height:'120px'},500);  

6.基于5做一些代码格式优化，增加可读性

[javascript]  view plain  copy

1. // 糟糕  
2. $second.html(value);  
3. $second.on('click',function(){  
4.     alert('hello everybody');  
5. }).fadeIn('slow').animate({height:'120px'},500);  
6. // 建议  
7. $second.html(value);  
8. $second  
9.     .on('click',function(){ alert('hello everybody');})  
10.     .fadeIn('slow')  
11.     .animate({height:'120px'},500);  
12.       

7.避免使用一些容易出错的形式：

[javascript]  view plain  copy

1. <a href="#"/> # 这里指的是返回页面top，虽然没有深究，但是在项目中真心踩过坑。  
2. 尽量使用<a href="javascript:;">，当然也有喜好用<a href="javascript:void(0);">//javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。  

8.对于一些常见问题的解释:

[javascript]  view plain  copy

1. //一下操作并不是按钮失效，因为onclick="return false"只能阻止a标签href属性中的网址（或代码）执行,可以理解成让一个a标签的页面跳转失败  
2. $("#id").on("click",function(){return false;});