写出高性能的JQuery

标签：jquery

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

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

// 糟糕
h = $('#element').height();
$('#element').css('height',h-20);
// 建议
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// 糟糕
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 建议var 
$element = $('#element');
var h = $element.height();
$element.css('height',h-20); 

// 糟糕
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});
 
$first.hover(function(){
    $first.css('border','1px solid red');
})
 
// 建议
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})
 
$first.on('hover',function(){
    $first.css('border','1px solid red');
})

合并函数：
// 糟糕
 
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});
 
// 建议
 
$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

// 糟糕
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
// 建议
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

// 糟糕
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);
// 建议
$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);
	

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

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

写出高性能的JQuery

标签：jquery

原文地址：http://blog.csdn.net/barnetthe/article/details/47664465