1. 记得使用 $(document).ready

如果你的代码是操作某个DOM元素的，则记得把代码放到

1. $(document).ready(function () { ... });

代码块内，或者把它放在HTML代码的末尾。当只有一个 function() 传递给 $() 的时候， $(function () {}) 与 $(document).ready(function () {}) 意思一样。

2. 使用 $.noConflict(); 或者给 jQuery 重命名，如：$jq

如果你的代码与另一个使用 $ 语法的框架冲突，则记得使用 $.noConflict(); 方法，并且把代码

1. $(document).ready(function () {

修改为：

1. jQuery(function ($) {

或者你也可以定义 $jq = jQuery.noConflict(); ，然后使用 $jq 。

3. 缓存jQuery对象并尽量使用链式操作

调用jQuery的 $() 方法的非常消耗资源的，重复调用它则会非常低效。要避免这样的情况：

1. $('.test').addClass('hello');
2. $('.test').css('color', 'orange');
3. $('.test').prop('title', 'Hello world');

应该用一个变量把jQuery对象缓存下来：

1. var $test = $('.test');
2.  
3. $test.addClass('hello');
4. $test.css('color', 'orange');
5. $test.prop('title', 'Hello world');

或者，更好的情况是使用链式操作减少重复：

1. $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world');

同时，很多函数支持把多个值放入一个对象，然后调用一次来改变多个值，如：

1. $('.test').css('color', 'orange').css('background-color', 'blue');

可以替换为：

1. $('.test').css({ 'color': 'orange', 'background-color': 'blue' });

4. 变量命名规则

jQuery变量一般用 $ 开头，以便和普通的JavaScript变量区分开来。

1. var $this = $(this);

5. 了解DOM的属性和方法

jQuery的其中一个目标就是抽象DOM，了解DOM的属性是非常有用的。学习jQuery最常犯的一个错误就是不学习DOM属性而使用jQuery访问DOM的属性。

1. $('img').click(function () {
2. $(this).attr('src'); // Bad!
3. });

上面的代码中， this 指向的是 click 事件中绑定的元素。这段代码执行缓慢而且冗长。下面的代码可以实现相同的功能，并且代码更短、执行更快、可读性更强：

1. $('img').click(function () {
2. this.src; // Much, much better
3. });

6. 惯用语法创建元素

虽然下面两段代码功能基本相同，语法也没有错误，但是更推荐第一种写法 ：

1. $('<p>', {
2. text: 'This is a ' + variable,
3. "class": 'blue slider',
4. title: variable,
5. id: variable + i
6. }).appendTo(obj);

相比之下，一个字符串拼接起来的则看起来可读性更差：

1. $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj);

7. 动画事件的回调函数

假设你希望点击一个段落的时候，慢慢的隐藏元素，之后删除页面上的该DOM元素。你可能会使用链式操作这么写：

1. $("p").click(function(e) {
2. $(this).fadeOut("slow").remove();
3. });

该例子中， remove() 方法会在 fadeOut() 动画执行完之前就执行，影响渐隐的效果而使元素直接消失。相反的，你应该使用回调函数：

1. $("p").click(function(e){
2. $(this).fadeOut("slow", function(){
3. $(this).remove();
4. });
5. });

fadeOut() 的第二个参数是一个匿名函数，只会在 fadeOut() 动画执行完之后执行一次。这样就可以实现渐隐的效果，然后删除元素。