jquery的入门

写的都是我的读书/学习笔记，把刚刚学到的东西记录下来，并与大家分享，想来也是件不错的事情。在这个系列中，我想谈谈 jQuery ，其实在去年的8月份 jQuery 刚出1.0的时候，Xian-an 就表达了对 jQuery 的喜悦之情。而如今，一年过去了，jQuery 的进步有目共睹，也是时候让我们看看它的庐山真面目了。

这一系列的书写顺序，会以《Learning jQuery》的大纲/内容为主线，其中穿插一些其他的东西。



好了，让我们现在开始吧。

什么是 jQuery ?

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

jQuery 能做啥

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

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

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


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

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

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


function emphasizePoemStanzas() {
  $('.poem-stanza').addClass('emphasized');
}

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


< body onload="emphasizePoemStanzas();" >

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


$(document).ready(emphasizePoemStanzas);

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

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