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")