jQuery 性能优化指南（3）
前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。
看下面的一个例子：
// 创建一个listvar $myList = $('#myList');var myListItems = '<ul>';for (i = 0; i < 1000; i++) {myListItems += '<li class="listItem' + i + '">This is a list item</li>'; //这里使用的是class}myListItems += '</ul>';$myList.html(myListItems);// 选择每一个 lifor (i = 0; i < 1000; i++) {var selectedItem = $('.listItem' + i);}
在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。
接着我们做一个对比，用ID代替class：
// 创建一个listvar $myList = $('#myList');var myListItems = '<ul>';for (i = 0; i < 1000; i++) {myListItems += '<li id="listItem' + i + '">This is a list item</li>'; //这里使用的是id}myListItems += '</ul>';$myList.html(myListItems);// 选择每一个 lifor (i = 0; i < 1000; i++) {var selectedItem = $('#listItem' + i);}
jQuery选择器中有一个这样的选择器，它能指定上下文。
jQuery( expression, context );
普通方式：
$('.myDiv')
改进方式：
$('.myDiv' , $("#listItem") )
10，慎用 .live()方法（应该说尽量不要使用）
这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为 新增的DOM元素 动态绑定事件。
但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:
<script type="text/javascript" >$(function(){$("p").click(function(){alert( $(this).text() );});$("button").click(function(){$("<p>this is second p</p>").appendTo("body");});}) </script><body><p>this is first p</p> <button>add</button></body>
运行后，你会发现 新增 的 p元素，并没用被绑定click事件。
你可以改成.live("click")方式解决此问题，代码如下：
$(function(){$("p").live("click",function(){ //改成live方式alert( $(this).text() );});$("button").click(function(){ $("<p>this is second p</p>").appendTo("body"); });})
但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：
$(function(){$("p").click(function(){alert( $(this).text() );});$("button").click(function(){$("<p>this is second p</p>").click(function(){ //为新增的元素重新绑定一次alert( $(this).text() );}).appendTo("body");});})
虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，
特别是在频繁的DOM操作中，这点非常明显。
11，子选择器和后代选择器
后代选择器经常用到，比如：$("#list p");
后代选择器获取的是元素内部所有元素。
而有时候实际只要获取 子元素，那么就不应该使用后代选择器。
应该使用子选择器，代码如下：
$("#list > p");
12，使用data()方法存储临时变量
下面是一段非常简单的代码，
$(function(){
var flag = false;
$("button").click(function(){
if(flag){
$("p").text("true");
flag=false;
}else{
$("p").text("false");
flag=true;
}
});
})
改用data()方式后，代码如下：
$(function(){
$("button").click(function(){
if( $("p").data("flag") ){
$("p").text("true");
$("p").data("flag",false);
}else{
$("p").text("false");
$("p").data("flag",true);
}
});
})
相关文章
网上这种插件很多，但是没一个合适的，大部分都做得很大，功能齐全。于是自己做了这个小插件，顺便学习下jQuery插件的写法。2010-08-08
使用EasyUI最好的方法不是学会，所有的东西都敲一遍，你也没办法敲得完，而是找到一个好的文档。本文提供文档的下载，并对jQueryEasyUI的使用进行实例解析，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了如何利用JQuery+CSS模拟淘宝实现侧边导航栏以及滑动电梯效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试2022-03-03
JQuery中form验证出错，可以采用以下方式来查看具体input的出错信息，下面有个不错的示例，有类似情况的朋友可以参考下2013-10-10
这篇文章主要为大家详细介绍了jQuery动态追加页面数据以及事件委托的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
jquery对所有input type=text的控件赋值实现方法
下面小编就为大家带来一篇jquery对所有input type=text的控件赋值实现方法。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
本文主要介绍了jQuery两种方法写选项卡的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
jquery focus(fn),blur(fn)方法实例代码
jquery focus(fn),blur(fn)方法实例代码，需要的朋友可以参考下。2011-12-12
这篇文章主要为大家详细介绍了jQuery实现表格的数据拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了jquery实现可关闭的倒计时广告特效代码,涉及jquery计时器及鼠标事件动态操作页面元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最新评论