[笔记]jQuery最佳用法及常见错误总结

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

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

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

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

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

$(document).ready(function () {

修改为：

jQuery(function ($) {

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

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

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

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

var $test = $('.test');

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

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

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

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

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

可以替换为：

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

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

var $this = $(this);

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

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

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

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

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

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

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

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

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

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

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

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

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