1. 总是从ID选择器开始继承
2. 在class前使用tag
3. 将jquery对象缓存起来
4. 掌握强大的链式操作
5. 使用子查询
6. 对直接的DOM操作进行限制
7. 冒泡
8. 消除无效查询
9. 推迟到 $(window).load
10. 压缩js
11. 全面掌握jquery库

1. 总是从ID选择器开始继承

在jquery中最快的选择器是ID选择器。因为它直接来自于Javascript的getElementById()方法.

<div id="content">
    <form method="post" action="/">
        <h2>Traffic Light</h2>
        <ul id="traffic_light">
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

像这样选择按钮是低效的：

var traffic_button = $('#content .button');

用ID直接选择按钮效率更高：

var traffic_button = $('#traffic_button');

选择多个元素

提到多元素选择其实是在说DOM遍历和循环，这些都是比较慢的东西。为了提高性能，最好从就近的ID开始继承

var traffic_lights = $('#traffic_light input');

2. 在class前使用tag

第二快的选择器是tag选择器($(’head’))。同理，因为它来自原生的getElementsByTagName()方法。

<div id="content">
    <form method="post" action="/">
        <h2>Traffic Light</h2>
        <ul id="traffic_light">
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID)：

var active_light = $('#traffic_light input.on');

注意: 在jquery中Class是最慢的选择器。IE浏览器下它会遍历所有DOM节点不管它用在那里。

不要用用tag name来修饰ID。下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点：

var content = $('div#content');

用ID修饰ID也是画蛇添足：

var traffic_light = $('#content #traffic_light');

3.将jquery对象缓存起来

要养成将jquery对象缓存进变量的习惯。

永远不要这样做：

$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

最好先将对象缓存进一个变量然后再操作：

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次。

缓存jquery结果，备用

如果你打算将jquery结果对象用在程序的其它部分，或者你的function会多次执行, 那么就将他们缓存到一个全局变量中。

定义一个全局容器来存放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. 掌握强大的链式操作

上面的例子也可以写成这样：

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...})
    .css('border', '3px dashed yellow')
    .css('background-color', 'orange')
    .fadeIn('slow');

这样可以写更少的代码, 让我们的js更轻量。

5.使用子查询

jQuery 允许我们对一个已包装的对象使用附加的选择器操作。因为我们已经在保存了一个父级对象在变量里，这样大大提高对其子元素的操作：

<div id="content">
    <form method="post" action="/">
        <h2>Traffic Light</h2>
        <ul id="traffic_light">
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>
        </ul>
        <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
</div>

例如，我们可以用子查询的方法来抓取到亮或不亮的灯，并缓存起来以备后续操作。

var $traffic_light = $('#traffic_light'),
    $active_light = $traffic_light.find('input.on'),
    $inactive_lights = $traffic_light.find('input.off');

提示：你可以用逗号分隔的方法一次声明多个局部变量–节省字节数

6.对直接的DOM操作进行限制

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作。直接的DOM操作速度很慢。

例如，你想动态的创建一组列表元素，千万不要这么做：

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中之前全部创建好：

var top_100_list = [...], // 假设这里是100个独一无二的字符串
    $mylist = $('#mylist'), // jQuery selects our <ul> element
    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);

我们在插入之前将多个元素包裹进一个单独的父级节点会更快：

var top_100_list = [...], // 假设这里是100个独一无二的字符串
    $mylist = $('#mylist'),  // jQuery 选择到 <ul> 元素
    top_100_ul = '<ul id="#mylist">'; // 这个变量将用来存储我们的列表元素

for (var i=0, l=top_100_list.length; i<l; i++){
    top_100_ul += '<li>' + top_100_list[i] + '</li>';
}
top_100_ul += '</ul>'; //关闭无序列表

$mylist.replaceWith(top_100_ul);

如果你做了以上几条还是担心有性能问题，那么：

试试jquery的 clone() 方法，它会创建一个节点树的副本，它允许以”离线”的方式进行dom操作，当你操作完成后再将其放回到节点树里。

使用DOM DocumentFragments。正如jQuery作者所言，它的性能要明显优于直接的dom操作。

7. 冒泡

除非在特殊情况下，否则每一个js事件(例如:click, mouseover, 等)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。

代替这种效率很差的多元素事件监听的方法就是，你只需向它们的父节点绑定一次，并且可以计算出哪个节点触发了事件。

例如，我们要为一个拥有很多输入框的表单绑定这样的行为：当输入框被选中时为它添加一个class

像这样绑定事件是低效的：

$('#entryform input).bind('focus', function(){
    $(this).addClass('selected');
}).bind('blur', function(){
    $(this).removeClass('selected');
});

我们需要在父级监听获取焦点和失去焦点的事：

$('#entryform).bind('focus', function(e){
    var cell = $(e.target);  // e.target grabs the node that triggered the event.
    cell.addClass('selected');
}).bind('blur', function(e){
    var cell = $(e.target);
    cell.removeClass('selected');
});

父级元素扮演了一个调度员的角色，它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听，那么你肯定哪里做错了。

8.消除无效查询

尽管jquery可以很优雅的处理没有匹配元素的情况，但它还是需要花费时间去寻找。如果你整站只有一个全局js，那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里。

只运行在页面里用到的函数。大多数有效的方法就是使用行内初始化函数，这样你的模板就能准确的控制何时何处该执行js。

例如，你的”文章”页面模板，你可能会引用如下的代码在body结束处：

<script type="text/javascript>
    mylib.article.init();
</script>
</body>

如果你的页面模板包含一些多变的模块可能不会出现在页面中，或者为了视觉呈现的原因你需要它们能够快速加载，你可以将初始化函数紧跟在模块之后。

<ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<script type="text/javascript>
    mylib.traffic_light.init();
</script>

你的全局js库可能会是这样子的：

var mylib = {
    article_page: {
        init : function() {
            // Article 特有的jQuery函数.
        }
    },
    traffic_light: {
        init: function() {
            // Traffic light 特有的jQuery函数.
        }
    }
}

9. 推迟到 $(window).load

jquery对于开发者来说有一个很诱人的东西，可以把任何东西挂到$(document).ready下冒充事件。在大多数例子中你都会发现这样的情况。

尽管$(document).rady 确实很有用，它可以在页面渲染时,其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态，很有可能就是$(document).ready函数引起的。

你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。它会在所有的html(包括<iframe>)被下载完成后执行。

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

多余的功能例如拖放，视觉特效和动画，预载入隐藏图像，等等。都是适合这种技术的场合。

10. 压缩js

推荐一个js在线压缩地址：http://dean.edwards.name/packer/

11. 全面掌握jquery库

知己知彼，百战百胜。只有更深入的了解jQuery才能更灵活的使用它。这里提供一个jQuery的速查手册，可以打印出来随身携带。要是有能力将jQuery源码通读一遍那就更好了。

本文转自：Time Machine – 前端开发

原文地址：http://rlog.cn/?p=350&cpage=1#comment-349

     1）toggleClass也可以和addClass一样，用空格分隔多个class名称了

.toggleClass("a b") == .toggleClass("a").toggleClass("b")

      2）无参数时，自动删除、恢复全部class，也可以传递一个布尔值，true为恢复class，false为删除class

      3）也可以第一个参数为class名，第二个参数为布尔值，具体用法如下

// 原始代码
// <div class="a b c"></div>

// 删除、恢复全部class
$('div').toggleClass();        // <div class=""/>
$('div').toggleClass();        // <div class="a b c"/>
$('div').toggleClass( false ); // <div class=""/>
$('div').toggleClass( true );  // <div class="a b c"/>

// 删除、恢复多个 class
$('div').toggleClass("a b");          // <div class="c"/>
$('div').toggleClass("a c");          // <div class="a"/>
$('div').toggleClass("a b c", false); // <div class=""/>
$('div').toggleClass("a b c", true);  // <div class="a b c"/>

      2、简化的hover()

      1.3.3中，hover绑定事件可仅传递一个函数，将默认用做mouseenter/mouseleave公用的函数

//旧代码：
$('li').hover(function() {
    $(this).addClass('test');
}, function() {
    $(this).removeClass('test');
});

//新代码：
$('li').hover(function() {
    $(this).toggleClass('test');
});

      3、live冒泡事件支持预设参数

// 预设参数
var eventConfig = {
     selectedClass: "selected"
};

$("li").live("click", eventConfig, function( event ) {
    // 绑定函数的参数event的data属性即为传递的预设参数
    var selectedClass = event.data.selectedClass;
});

      4、更好的支持其它windows、document对象

//通过.contents()获得其它框架的document对象
var iframeDoc = $('iframe').contents().get(0);

//这样就可以获取其height/width/CSS属性或绑定事件
// 获得框架宽度
$(iframeDoc).width();

// 获得框架高度
$(iframeDoc).height();

// 绑定事件
$(iframeDoc).bind('click', function( event ) {
    // do something
});

// 获得CSS属性值
$('div', iframeDoc).css('backgroundColor');

      注意，如果要处理框架内部网页元素，请使用此插件（配合jQuery 1.3.3/+），和以下语法：

$('iframe').win().bind('load', fn);
$('iframe').doc().find('a').click(fn);

      5、增强的index()

      两个变化，第一个，支持传递selector作为参数

//旧代码：
$("img").index($("img.selected"));

//新代码
$("img").index(".selected");

      第二个，无参数传递，直接查找在同级元素中的位置

//旧代码：
var $this = $(".selected");
$this.parent().children().index($this);

//新代码：
$(".selected").index();

      6、自行指定this对象

      在1.3.3中，可以在bind/live绑定事件时，自行指定this参数代表的对象。这个用法需求不多，而且可用event.target,event.currentTarget代替

本文要说的区别着重点不在性能的提升和浏览器的兼容，而是方法的差异和功能的新增。

在实际使用中，Leeo感觉1.3与1.2.6最大的不同有两个：

1：取消了@符号

/*
例如：获取一个name为leeo的input的值
*/
/*
1.2.6的写法
*/
$('input[@name="leeo"]').val();
/*
1.3的写法
*/
$('input[name="leeo"]').val();

2：新能live()和die()方法

/*
live(type, fn)
type：事件类型
目前支持
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 
还不支持
blur, focus, mouseenter, mouseleave, change, submit
fn：欲绑定的事件处理函数
*/
/*
实例：在1.2.6版本中加入我们用append()方法向DOM追加一个按钮
*/
$('#newBtn').click(function(){
    alert("IT北瓜");
});
$('#appendButton').append('<input type="button" id="newBtn" name="newBtn" />');
//我们会发现当点击按钮的时候并没有弹出我们想要的信息，因为click事件并没有绑定到newBtn上
//而1.3新增的live(type, fn)方法却可以轻松的做到这一点
$('#newBtn').live('click', function(){
        alert("IT北瓜");
});
$('#appendButton').append('<input type="button" id="newBtn" name="newBtn" />');

/*
die([type], [fn])方法是与live(type, fn)相反的方法
type (可选)：要解除绑定的live事件
fn (可选)：要解除绑定的特定处理函数
*/
/*
实例：给按钮解除click事件
*/
function dieClick() {
     alert("IT北瓜");
}
$('#newBtn').live('click', function(){
    dieClick();
    $('#newBtn').die("click", dieClick);
});

当然，除了以上说到的两点，1.3中还有其他新增的方法，如：jQuery.support等等…

eq(num)返回的是jQuery object，用法：$(element).eq(0).html()，返回第一个元素中包含的HTML

get(index)返回的是javascript的DOM，用法：$(element).get(0).innerHTML，返回索引为0元素中包含的HTML

var $cb = $("#checkboxid");    //获取jQuery对象，这里用$来区分是jQuery变量
var cb = $cb[0];    //获取DOM对象
alert(cb.checked);    //弹出DOM对象是否被选中的布尔值

（2）利用jQuery提供的get(index)方法得到相应DOM对象，如：

var $cb = $("#checkboxid");    //获取jQuery对象，这里用$来区分是jQuery变量
var cb = $cb.get(0);    //获取DOM对象
alert(cb.checked);    //弹出DOM对象是否被选中的布尔值

2、DOM对象转为jQuery对象

转换的方式很简单，只需用$()将DOM对象包含起来便可以获取相应的jQuery对象，如：

var cb = document.getElementById("#checkboxid");    //获取jQuery对象，这里用$来区分是jQuery变量
var $cb = $(cb);    //获取DOM对象
alert($cb.length);    //验证一下jQuery的个数

就说到这吧，下次见。。。

$(document).ready(function(){
    alert("本行缩进4个字符");//本行缩进4个字符
});

原则2：添加注释

对于一目了然的代码我们当然可以不写注释，但是对于复杂的代码，添加相应的注释说明就显得举足轻重了，假如以下这段代码：

$("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background", "red");

不作任何注释的话，也许一看你就晕倒了，即使不晕倒我想你也得费点功夫才能看出个所以然吧，所以像这样的代码是绝对有必要写上注释的：

/*
 *检索一个ID为table的表格的tbody中每一行，
 *如果该行的最后一个单元格中的checkbox状态为可用，
 *则将此行的背景颜色设置为红色
*/
$("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background", "red");

原则3：链式操作

我们都知道jQuery提供了极其强大的链式操作，所以我们要尽可能使用链式操作来避免重复获取对象，如：

//给一个ID为btn的按钮赋值，并绑定click事件
$("#btn").val("我是一个按钮，请点击我！");//第1次获取$("#btn")对象
$("#btn").click(function(){//第2次获取$("#btn")对象
    alert("您点击了按钮！");
});

以上代码虽然没有错误，但却两次获取同一对象$("#btn")，很明显这是没有必要的，采用链式操作则可以避免这个问题：

//给一个ID为btn的按钮赋值，并绑定click事件
$("#btn").val("我是一个按钮，请点击我！").click(function(){
    alert("您点击了按钮！");
});//只获取一次$("#btn")对象

原则4：合理换行

jQuery的链式操作很强大，但如果我们一味地将链式操作拼接下去，我想你自己也会被链晕的，遇到对同一对象进行复杂的链式操作，我们就应该考虑合理的是代码换行，这一点也符合原则1中说到的良好层次结构，比如以下这段不算复杂的代码：

$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();

如果完全不换行，看起来就感觉很晦涩难懂了，换行的另一个好处就是能够在最合适的地方添加注释，如下：

$(".has_children").click(function(){
    $(this).addClass("highlight")    //为当前元素增加highlight类
        .children("a").show().end()    //将子节点的a元素显示出来并重新定位到上次操作的元素
    .siblings().removeClass("highlight")    //获取元素的兄弟元素，并去掉他们的highlight类
        .children("a").hide();    //将兄弟元素下的a元素隐藏
});

既然要换行，那么应该在什么地方换行也就成了我们必须解决的问题了。

合理换行考虑因素：

1：同一对象不超过3个链式操作，写成一行

2：同一对象较多链式操作（3个以上），同一功能块写在一行，不同功能块换行书写

3：操作不同层次对象换行并缩进书写，如原则4中的第二段代码

OK，就写到这，88…

情况一：在其他框架之后引入jQuery

<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery  -->
<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>

这种情况下，我们可以利用jQuery.noConflict()方法来移交变量$的控制权，并用jQuery变量来访问jQuery对象，如下：

<script type="text/javascript">
    jQuery.noConflict();//移交变量$控制权给prototype
    jQuery(function(){//使用jQuery变量访问jQuery对象
	jQuery("#test-jq").click(function(){
		alert(jQuery(this).text());
	});
    });
    $("test-p").style.display = "none";	//使用变量$访问prototype
</script>

如果觉得用jQuery变量访问jQuery对象书写比较麻烦，那你完全可以自定义一个快捷变量，如：$j、jQ等等：

<script type="text/javascript">
    var $j = jQuery.noConflict();//移交变量$控制权给prototype，并赋予$j
    $j(function(){//使用jQuery变量访问jQuery对象
	$j("#test-jq").click(function(){
		alert($j(this).text());
	});
    });
    $("test-p").style.display = "none";	//使用变量$访问prototype
</script>

假如你已经习惯了用$访问jQuery对象，不希望改变这种访问方式，同时又希望Prototype也可以使用$，那么在移交控制权之后，你可以用jQuery(function($){});把你要访问的方法包起来，然后在其内容使用$访问jQuery对象，有如下两种方式：

方式1:

<script type="text/javascript">
    jQuery.noConflict();//移交变量$控制权给prototype
    jQuery(function($){
	$("#test-jq").click(function(){//在内部使用$
		alert$(this).text());
	});
    });
    $("test-p").style.display = "none";	//使用变量$访问prototype
</script>

方式2:

<script type="text/javascript">
    jQuery.noConflict();//移交变量$控制权给prototype
    (function($){
        $(function(){//定义匿名函数
	    $("#test-jq").click(function(){//匿名函数中的$均为jQuery
		alert$(this).text());
	    });
        });
    })(jQuery);//执行匿名函数并传递实参jQuery
    $("test-p").style.display = "none";	//使用变量$访问prototype
</script>

方式2也是插件开发中常用的方式。

情况二：在其他框架之前引入jQuery

//之前代码省略...
<!--先导入jQuery -->
<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="lib/prototype.js" type="text/javascript"></script>

//中间代码省略...

<script type="text/javascript">
    jQuery(function(){//直接使用jQuery ,无需调用jQuery.noConflict()函数
	jQuery("#test-jq").click(function(){
		alert(jQuery(this).text());
	});
    });
    $("test-p").style.display = "none";	//使用变量$访问prototype
</script>

OK,现在你可以放心结合其他js框架使用jQuery了,笔记2到此结束,( ^_^ )/~~拜拜

<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>

其中，src路径根据实际做修改。很多人（包括我以前也是这样）最初在写一个html页面的时候都简单写成如下形式：

<html>
<head>
<title>jQuery学习笔记1——引入jQuery框架</title>
</head>

<body>
</body>
</html>

既没有声明文档类型，也没有设置页面编码，没有声明文档类型会出现奇奇怪怪的问题，而未正确设置页面编码则是导致中文乱码的常见因素。因此强烈建议声明文档类型DOCTYPE和设置正确编码charset，中文用户可以设置编码格式为gb2312或者GBK，但建议设置为国际化编码格式utf-8，完全代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery学习笔记1——引入jQuery框架</title>
<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>

<body>
</body>
</html>

另外，建议在开发过程引入的jQuery为未压缩版jquery-1.3.2.js以方便调试，开发完成才使用min版，同时，如果项目是发布到网上的还建议利用Google Ajax Library API来加速常用js类库的载入，有两种方式：

第一种方式是直接载入js文件：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

第二种是利用google提供的接口：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    //载入jQuery
    google.load("jquery", "1.3.2");
    google.setOnLoadCallback(function(){
        //加载完毕的回调函数
    });
    //除了load方法还有其他一些方法，详情请看官网
</script>

最后，试一下jQuery是否生效，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery学习笔记1——引入jQuery框架</title>
<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
	    alert("jQuery学习笔记1——引入jQuery框");
	});
</script>
</head>

<body>
</body>
</html>

OK，笔记1就到此，请继续关注接下来的笔记，同时欢迎踊跃发言，( ^_^ )/~~拜拜。。。