jQuery性能优化与技巧

1.使用最新版本的jquery库

     jQuery新版本会对旧版本进行优化和Bug修复。但是使用时要测试一下，可能有些代码改了。

2.使用合适的选择器

$(“#id”)：使用id来定位DOM元素是最佳提高性能的方式。因为jQuery是直接调用document.getElementById()。如果id找不到可以添加find()来缩小范围(

$('#id').find('div').css(xxx=xxxx)

)。所以最好先从id来着元素。

$('p')、$('div')：这是第二选择。因为jQuery直接调用document.getElementByTagName()。

$('.class')：ie9以上是使用document.getElementByClassName().ie8及其以下使用dom搜索方式实现会影响性能。有选择性的使用

$("[attribute=value]")：大多数都是使用搜索方式来实现。尽量避免。

$(":hidden")：需要搜索每一个元素来定位选择器。要使用最好先定位父元素

性能从上往下降低。

3.缓存对象

$('#id').find('div').css(xxx);
$('#id').find('div').hide();
$('#id').find('div').show();
改为
var $a = $('#id').find('div');
$a.css(xxxx);
$a.show();
$a.hide()

因为每一个选择器都会创建jQuery对象。不要让相同的选择器在代码里出现多次。

4.循环时的DOM操作

var a=[...];
var $b = $('#abc');
for(int i=0;i<a.length;i++){
      $b.append("<li>hello,a[i]</li>");
}
改为
var a=[...];
var b = "";
for(int i=0;i<a.length;i++){
    b+="<li>hello,"+a[i]+"</li>";
}
$("#abc").html(b);

5.数组方式使用jQuery对象

      在性能方面建议使用for或while来处理，不要使用$.each();

6.事件代理

$("#table td").bind("click",function(){...})//绑定了所有的td
改为
$("#table").bind("click",function(event){
     $(event.target).css();//只绑定了触发事件的元素
})

7.把重用的代码定义为插件

(function($){
    $.fn.pluginName = function(){
          //code
     }
})(jQuery);

8.使用join()来拼接字符串

       创建一个数组，把字符串传进去，然后调用  数组名.join('')来拼接字符串。会比+好一点。

9.合理一用html5的Data属性

<div id="id"  data-url=""  data-option="{'name':'jack'}" data-last-value=""/>
var $a = $("#id");
$a.data("url");
$a.data("option").name;
$a.data("lastValue");

10尽量使用原生的javaScript方法

$("#abc").is(":checked");
$("#abc").get(0).checked;
$(this).css("color":"red");
this.style.color="red";
$("<p></p>")
$(document.createElement("p"))

jQuery技巧

1.禁用页面右键菜单

$(function(){
   $(document).bind("contextmenu",function(e){return false;});
});

2.输入框文字获取和失去焦点

function F(input){
    var defaultValue = input.val();
	input.focus(function(){
	    if($.trim(input.val())==defaultValue){
		    input.val("");
		}
	}).blur(function(){
	    if($.trim(input.val())==''){
		   input.val(defaultValue);
		}
	});
}

3.获取选择的下拉框

$("#xxx option:selected")