这个向导是一个关于jQuery类库的介绍。需要你具备基本的JavaScript和文档对象模型（DOM）的基本知识。它包括一个简单的hello word例子，selector和事件基础，ajax，FX和usage和插件的创建。
[separator]
这个向导中不含有“Click me”的例子，唯一有的是“copy me”来让你自己亲自把代码复制，然后亲自运行看结果，并加以修改。
安装
最开始，我们需要一个jQuery类库的副本，我们可以从main download page得到它。jQuery Starterkit提供了一些markup和css供我们使用。当下载并解压它的内容后，我们将jquery.js放入相同的目录并且用自己喜欢的编辑器打开starterkit.html和custom.js，然后在浏览器中打开starterkit.html。
点击察看starterkit.html原始页面效果
现在我们就已经做好了所有准备，可以开始这个声名狼藉的“Hello world”例子了。
跟这部分内容有关的有趣链接：
jQuery Starterkit
Downloading jQuery
Hello jQuery
当我们使用jQuery读取或操作文档对象模型（DOM）时，我们需要确定当DOM准备好的时候我们就要开始添加事件了。
这时，我们为这个document注册一个ready事件。
$(document).ready(function() {
// do stuff when DOM is ready
});
向这个方法中添加一个alert没什么道理，因为一个alert不会要求DOM加载。所以让我们加一个更有意思的，当点击链接的时候弹出alert。
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
这个例子会在你点击链接的时候弹出一个alert来。
让我们看一下我们在做什么：$("a")是一个jQuery的选择器（selector），在这个例子中，他选择了所有的a元素。$本身是jQuery的“class”的一个别名，因此$()便创建了一个新的jQuery对象。接下来调用的click()方法这个jQuery对象的一个方法。他将所有的被选择的元素（本例中，是一个anchor元素）绑定了一个click事件并且当事件被触发时就会执行所提供的这个方法。
这个跟下边的代码是一样的：
<a href="" onclick="alert('Hello world')">Link</a>
两个区别很明显：我们不需要为每一个单独的元素都写一个onclick事件。我们使结构（HTML）和行为（JS）明显的分离开来，就像我们使用CSS来分离结构同表现一样。有了这个思想后，我们就可以更深一步的探索选择器和事件了。
跟这部分内容有关的有趣链接：
jQuery Base
jQuery Expressions
jQuery Basic Events
找到我：使用选择器和事件
jQuery提供了两个方法来选择元素。第一个是使用一个CSS和XPath选择器的结合作为一个字符串被传递给jQuery构造器。第二种方法是使用jQuery对象的一些方法。这两个事可以结合使用的。
为了尝试这些选择器，我们选择并修改在starterkit中的第一个ordered list。
开始，我们想要选择list本身。list有一个ID叫“orderedlist”。在传统的JavaScript中，你可以通过使用document.getElementByID("orderedlist")来选择它。有了jQuery后，我们可以像下边这样做：
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
点击察看农民的演示
starterkit提供了一个包含“red”类（class）的样式(stylesheet)，这个“red”只是简单的增加一个红色的背景色。因此，当你在浏览器中重新加载这个页的时候，你应该能看到第一个ordered list有了一个红色的背景色了。第二个list没有被修改。
现在让我们为这个list的子元素添加更多的类（classes）。
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
点击察看农民的演示
这段代码选择了ID为“orderedlist”的元素的所有 li 子元素并且为他们添加了“blue”这个类（class）。
现在来点更有趣的内容：我们想要在用户将鼠标放在li元素（仅仅只是list的最后一个）上的时候添加和移除类（class）。
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
点击察看农民的演示
这里还有许多其它的选择器类似于CSS和XPath的句法。更多的例子和一个可利用的表达式的列表点击这里能够找到。
对于每一个可用的onXXX事件，就像onclick，onchange，onsubmit，这有一个jQuery等价物。其他的一些事件，就像ready和hover，都是为了特定的任务而作为一个简便的方法被提供。
你可以找到一个完整的包含所有事件的列表在jQuery Events Documentation
有了这些选择器和事件你既可以做好多事情了，但是这里有更多的。
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
});
点击察看农民的演示
find()允许你能够更深一步的找到已经被选择的元素的后代，因此$("#orderedlist).find("li")就跟$("#orderedlist li")是一样的。
each()遍历每一个元素并且允许更深一步的处理。大多的方法，就像addClass()，本身就使用each()了。
在这个例子中，append()是用来为它附加一些字符并且在每一个元素结尾处作为文本设置它。
另一个你经常要面对的问题就是在不被jQuery包含的DOM元素上调用方法。考虑一下通过ajax成功提交一个表单后你想要重新reset一下。
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form").reset();
});
});
农民标记：页面中有一个ID是“reset”的链接，所以这里的$("#reset")就是获得reset这个链接对象。画面中还有许多form，但是只有第一个form有ID为“form”，其他的都没有。综合上边这些，想要根据ID获得一个对象就用$("#对象ID")，想要获得所有同类型对象就用$("对象名")。
这段代码选择了ID是“form”的元素并且在每一个被选定的元素上调用了reset()。如果你有更多的表单的话，你也可以这样做：
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").reset();
});
});
这段代码会选择你的document中的所有form，遍历他们并且对每一个都调用reset()。
一个新的挑战是从一组类似或相同的元素中只选择某一个特定的元素。jQuery提供了filter()和not()来做这个。filter()能够将元素精简到只剩下满足过滤条件的那些，not()恰恰相反，他移除了所有满足条件的。想象一个unordered list，对于它你想选择所有的没有ul子元素的li元素。
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
点击察看农民的演示
这段代码选择了所有的li元素并且移除了所有含有ul子元素的元素。因此所有的li元素都有了边框，除了那些有ul子元素的。[expression]句法是来自于XPath并且可以用来通过利用子元素或属性来过滤。可能你要选择所有的有name属性的链接（anchor）
$(document).ready(function() {
$("a[@name]").background("#eee");
});
这段代码给所有有name属性的链接都添加了背景色。
比起通过name来选择链接，我们更多的情况会是通过他们的href属性来选择。这可能就会是个问题，因为当返回的时候，关于他们认为href值是什么，不同的浏览器的行为是不一致的。（标注：这个问题在jQuery中已经得到解决，在1.1.1版本以后）。为了只匹配这个之中的一部分，我们可以使用 contains select“*=”来替代equlas（“=”）：
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});