什么是 jQuery ?

jQuery 就是一个 JavaScript 函数库，简单说就是一些现成的 JavaScript 函数，你可以拿来就用。

jQuery 能做啥

  • 遍历页面中的每个元素。你要想对 HTML 文档进行操控，必须要对元素进行定位，也就是说迅速的找到那个想改动的元素。
  • 修改页面的模样。着就要靠 jQuery 对 CSS 做手脚了。
  • 修改页面内容。比如，你想再插入一段话，你想加一张图，jQuery 都可以帮你做到。
  • 响应用户交互。用户会对文档有很多操作（比如点击一个链接），那么你想让文档对它有什么反应，都可以用 jQuery 来控制。
  • 为页面增添视觉动画。
  • Ajax 应用。也就是说不用刷新页面，就可以对内容进行更新。
  • 简化常见的 JavaScript 任务。

jQuery 为啥这么好用

  • 利用 CSS 的机理。CSS 的选择符机制对 jQuery 表达文档结构起到了很大的帮助。
  • 支持扩展。你可以为 jQuery 写插件，以扩展其现有的功能。
  • 脱离浏览器的不同模式。jQuery 不会因为浏览器的不同模式而有所变化，它是独立提取出来的一层。
  • 集体观念。jQuery 的许多操作都是对一组元素进行的，你无须再逐条进行跌代，省去了不少事情。
  • 可把多项操作放在一行。可以把许多操作用句点“.”连起来，形成一个操作链。感觉有些像自动生产线。

jQuery实例

  1. 把 jQuery 下载到机器上，选那个60+K的非压缩版就可以了。
  2. 建一个 HTML 文档，就像这样。你把它另存为 HTML 就可以看到效果了。
  3. 建一个 CSS 文档，名为 alice.css。
  4. 建一个 JavaScript 文档，名为 alice.js 。你会发现它只有三行代码，非常的简单。稍后我会讲述它们是干嘛的。
  5. 好了，现在需要把 jquery.js 和 alice.js 链到 HTML 文档中。切记，要把 jquery.js 放到最前面，这样你自己定义的 js 才能用到它。
  6. 好了，此时再看看 HTML 文档发生了什么变化。你会发现那两段诗，多了个边框，字体也变成斜的了。

好了，下面让我们详细的说说，那三行 JavaScript 代码是什么意思。


<code>
$(document).ready(function() {
  $('.poem-stanza').addClass('emphasized');
});
</code>


$() 会返回你所查找的对象/元素，例如 $('.poem-stanza') 会返回所有 class 为 .poem-stanza 的元素。这三行代码的作用就是，找到拥有 poem-stanza 类的元素，然后为它们加上（addClass）一个新类 emphasized。而它的 CSS 是在 alice.css 中事先定义好的。

ready() 表示以下这些函数是要在文档被浏览器全部载入后再执行的。因为对 DOM 的操作必须得等到文档全部被浏览器读取后，才能够进行。如果没有 ready() 的话，我们需要把这些操作放在一个函数中，比如：


<code>
function emphasizePoemStanzas() {
  $('.poem-stanza').addClass('emphasized');
}
</code>


然后，再把这个函数加到 onload 事件处理函数中，onload 的作用就是等某个元素加载完毕后，再执行某个函数，我们需要把它加到 body 元素中：


<code>
< body onload="emphasizePoemStanzas();" >
</code>


这便让你的 HTML 代码（结构）与 JavaScript 代码（功能）混合在了一起，这对日后的维护与更新都是非常不利的，而利用 jQuery 的 ready()，我们可以把它写成这样：


<code>
$(document).ready(emphasizePoemStanzas);
</code>


这样一来，便不用对 HTML 没有做任何修改了。不过，你可能注意到，我们并没有为这个函数起名，而是用 function() ——这是一个没有名字的函数，我们把它称为匿名函数（anonymous functions），因为这三行代码，我们只会用到这么一次，所以我们才使用了匿名函数。

这就是我们的第一个例子，你应该对 jQuery 有一个初步的印象了，下一次，我们会将将如何用 jQuery 得到你想要的 HTML 元素。