jquery选择器优化

说明

1.Dom元素选择器优化

ID

tag（标签名）

getElementsById()

getElementsByTagName()

1. 尽量使用ID代替Class；

<!-- 使用ID -->
<div id="myDiv"></div>

<!-- 使用Class -->
<div class="myDiv"></div>

2. 能确定tag类型的，在Class前使用标签；

<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<!--
对于上面的div，使用$("div.myDiv")效率要高于$(".myDiv")，因为前者先用效率较高的getElementsByTagName("div")进行了元素筛选。
因为：
$("div.myDiv")是在所有的div中找className为myDiv的元素；
$(".myDiv")是在所有的元素中找className为myDiv的元素；
-->

3. 给选择器一个上下文；

<div id="wrapper">
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
</div>

<!--
$('.myDiv' , $("#wrapper"))
或
$('#wrapper .myDiv')
都是不错的选择
-->

2.DOM元素操作

1. 缓存需要重复使用的jquery对象；

//低效：每次使用时都要重新使用选择器筛选，建议不要使用。
function bad(){
$("#traffic_light input.on").bind("click", function(){ ... });
$("#traffic_light input.on").css("border", "1px dashed yellow");
$("#traffic_light input.on").css("background-color", "orange");
$("#traffic_light input.on").fadeIn("slow");
}

//较好：将需要重复操作的jquery对象用变量缓存起来，一次筛选，多次操作。
function good(){
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ ... });
$active_light.css("border", "1px dashed yellow");
$active_light.css("background-color", "orange");
$active_light.fadeIn("slow");
}
//改进：在缓存重复操作的jquery对象的同时，使用了链式操作加以改善。
function better(){
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ ... })
.css("border", "1px dashed yellow")
.css("background-color", "orange")
.fadeIn("slow");
}

2. 缓存全局变量jquery对象；

// 在全局范围定义一个对象 (例如: window对象)
window.$my = { head : $("head"), traffic_light : $("#traffic_light"), traffic_button : $("#traffic_button") };

function do_something(){
// 现在你可以引用存储的结果并操作它们
var script = document.createElement("script");
$my.head.append(script);
// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
$my.cool_results = $("#some_ul li");
$my.other_results = $("#some_table td");
// 将全局函数作为一个普通的jquery对象去使用.
$my.other_results.css("border-color", "red");
$my.traffic_light.css("border-color", "green");
}
//你也可以在其他函数中 使用它 4.对直接的DOM操作进行限制

3. 减少DOM操作次数

//低效：每个Dom元素进行一次插入操作，共进行了100次Dom操作；
function bad(){
var top_100_list = [...],
// 假设这里是100个独一无二的字符串
$mylist = $("#mylist");
// jQuery 选择到 <ul> 元素
for (var i=0, l=top_100_list.length; i<l; i++){
$mylist.append("<li>" + top_100_list[i] + "</li>");
}
}

//高效：将所有Dom元素的字符串拼接好，然后一次性插入，只需1次Dom操作；
function good(){
var top_100_list = [...],$mylist = $("#mylist"), top_100_li = "";
// 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);
}

3.事件绑定

//Bad:绑定了N个事件
$("#entryform input").bind("focus", function(){
$(this).addClass("selected"); }).bind("blur", function(){
$(this).removeClass("selected");
}
);

//Good:只绑定1个事件
$("#entryform").bind("focus", function(e){
var $cell = $(e.target);
// e.target 捕捉到触发的目标元素
$cell.addClass("selected");
}).bind("blur", function(e){
var $cell = $(e.target);
}
);

4.页面加载优化

1.压缩js文件

2.将特效推迟到 $(window).load

$(document).ready

$(document).ready

$(document).ready

$(window).load

<iframe>

$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});

5.其他

1.使用data()方法存储临时变量

$(function(){
var flag = false;
$("button").click(function(){
if(flag){
$("p").text("true");
flag=false;
}else{
$("p").text("false");
flag=true;
}
});
});

$(function(){
$("button").click(function(){
if( $("p").data("flag") ){
$("p").text("true");
$("p").data("flag",false);
}else{
$("p").text("false");
$("p").data("flag",true);
}
});
});