jQuery最佳用法和常见错误摘要

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

如果您的代码正在操作DOM元素，请记住将代码放在

中 $（document）.ready（function（）{.}）;

在代码块内部，或将其放在HTML代码的末尾。当只有一个函数（）传递给$（）时，$（function（）{}）具有与$（document）.ready（function（）{}）相同的含义。

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

如果您的代码与另一个使用$ syntax的框架冲突，请记住使用$ .noConflict（）;方法并把代码

$（document）.ready（function（）{

修改为：

jQuery（函数（$）{

或者你可以定义$ jq=jQuery.noConflict（）;然后使用$ jq。

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

调用jQuery的$（）方法是非常耗费资源的，并且重复调用它是非常低效的。为了避免这种情况：

$（'。test'）。addClass（'hello'）; $（'。test'）。css（'color'，'orange'）; $（'。test'）。prop（'title'，'Hello世界'）;

应该使用变量缓存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':'apple'，'background-color':'blue'}）;

4. 变量命名规则

jQuery变量通常以$开头，以区别于普通的JavaScript变量。

Var $ this=$（this）;

5. 了解DOM的属性和方法

jQuery的目标之一是抽象DOM。理解DOM的属性非常有用。学习jQuery最常见的错误之一是使用jQuery访问DOM属性而不学习DOM属性。

$（'img'）。click（function（）{$（this）.attr（'src'）; //Bad！}）;

在上面的代码中，这指向click事件中绑定的元素。这段代码很慢而且冗长。以下代码可以实现相同的功能，代码更短，更快，更易读：

$（'img'）。click（function（）{this.src; //很多，好多了}）;

6. 惯用语法创建元素

虽然以下两段代码函数基本相同，但语法没有错，但建议使用第一段：

$（'

'，{

文本:'这是'+变量'，类':'蓝色滑块'，标题:变量，id:变量+ i}）。appendTo（obj）;

相反，拼接在一起的字符串看起来不太可读：

$（'

这是'+变量+'

“）.appendTo（OBJ）;

7. 动画事件的回调函数

假设您要单击一个段落，慢慢隐藏该元素，然后删除页面上的DOM元素。您可以使用链式操作来写这个：

$（'p'）。click（function（e）{$（this）.fadeOut（'slow'）。remove（）;}）;

在此示例中，remove（）方法在执行fadeOut（）动画之前执行，从而影响淡化效果并导致元素直接消失。相反，您应该使用回调函数：

$（'p'）。click（function（e）{$（this）.fadeOut（'slow'，function（）{$（this）.remove（）;}）;}）;

fadeOut（）的第二个参数是一个匿名函数，只在fadeOut（）动画执行完毕后执行一次。这将实现淡入淡出效果，然后删除元素。