难免有误，阅读注意
原文地址：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
翻译：牛小超-Nainse
开始时间：2009年3月5日16:38:13
| 该讲解是从jQuery的基础知识开始，一直到构建插件的高级技术。 Original: http://jquery.bassistance.de/jquery-getting-started.html
Similar Tutorials: jQuery Core, Selectors, Attributes, Traversing, Manipulation, Events, Effects, Ajax, Plugins |
这是一个介绍jQuery js 库的指导性文档。你需要具备一些js和dom（document object model， 文档对象模型）的基础知识。她是从最基础开始的，对于那些有必要的信息，我会尽可能详细的解释。这篇文档里包含了一个简单的“hello world”的例子，选择符和事件的基础知识(selector and event basics)，Ajax，FX以及一些用法(usage)，还附带了一些插件的著作(authoring of plugins)。
这篇文档没有提供“click me”的代码，而只提供了“copy me”的，我的意图是想请您复制他们（更好的做法是用自己的手指一个字符一个字符的敲出他们），然后亲自尝试着使用他们。复制这些例子，看看他们都能做什么，然后大胆的试着修改他们。
| 内容提要(Contents) |
SETUP
在开始之前我们需要一个jQuery的js库，可以在main download page得到。jQuery Starterkit提供了一些标记（markup）和css配合这些工作。在下载并解压jQuery Starterkit之后，把jquery.js放到同一个目录下，并用你最喜欢的编辑器（我用DreamWeaver cs3）打开startkit.html和custom.js，并且用浏览器也把startkit.html打开。
现在，你已经为测试已经被人们用烂了的“Hello world”例子做好了所有的准备工作。
可能感兴趣的连接：
HELLO JQUERY
新建一个空的html文件：
| <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // we will add our javascript code here </script> </head> <body> <!-- we will add our HTML content here --> </body> </html> |
这个页面只引入了一个jquery.js库文件（确保src的值是指向jquery.js存储的路径的。这里是设定你的html文件和js文件在同一目录下）。那两个有注释块的位置是我们将要填放后续代码的地方。
上面我们已经做了这么多了，但是当我们读取或操作dom的时候，还是要确保最重要的一点，那就是在我们添加一些事件的时候，dom必须是ready状态的。
为了确保这一点，我们需要注册一下dom的ready事件：
| $(document).ready(function() { // do stuff when DOM is ready }); |
放一个alert语句到这个函数里是没有什么意义的，因为alert的执行不依赖于dom是否已经被加载。所以让我们来点儿有难度的吧：当点击一个连接的时候alert一下^_-。
首先，在<body>标签后加一个：
| <a href="">Link</a> |
现在，把$(document).ready句柄（handler）设置为：
| $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); |
这样，在你点击这个链接的时候就会看到一个alert框。
好，让我们回过头来看看我们都做了什么：$(“a”)是jQuery的一个选择器（selector），它选择了所有的a元素。$本身是jQuery类的一个别名，可以用$()构造一个jQuery的新对象，接下来我们调用的click()函数是jQuery对象的一个方法，它绑定一个click事件到所有的a元素上（在这里，只绑定了一个a元素），并且当click事件被触发的时候执行相应的函数。
这和下面的代码的功能是类似的：
| <a href="" οnclick="alert('Hello world')">Link</a> |
它们的区别是显而易见的：我们不需要再为每一个a元素单独指定onClick事件了。我们把结构(structure HTML)和行为(behavior JS)清晰的分离了，就像我们用css来分离结构和显示样式是一样的。
注意，我们现在才只是展示了选择器和事件(selectors and events)的一点点特性而已。
可能感兴趣的链接：
来，找我吧：用选择器和事件（Find me: Using selectors and events ）
jQuery提供了两种方法来选定元素（select elements）。第一种是用css和XPath组合成一个字符串作为jQuery构造器的参数，第二种方式是用jQuery对象提供的一些方法来获取。这两种方式是可以混合使用的。
下面通过选择和修改starterkit中的第一个ordered list来试用其中的一些选择器。
一开始，我们选择这个list本身，他有一个id “orderedlist”，在你熟知的js中，你可以用document.getElementById(“orderedlist”)来获取这个元素的对象，但是在jQuery中，我们要用：
| $(document).ready(function(){ $(“#orderedlist”).addClass(“red”); }); |
Starterkit提供了一个样式表screen.css。其中定义了一个red类，用来把背景颜色设置为红色。所以，在浏览器中当你重新加载页面后，你会发现第一个ordered list的背景被设置成了红色，第二个及其他的元素的背景却没有改变。
现在，让我们给第一个list的子元素添加上定义好的css类吧：
| $(document).ready(function() { $("#orderedlist > li").addClass("blue"); }); |
这个代码是用来选取orderedlist的所有标签名为li的子元素，并为他们加上名为“blue”的css类。
下面，让我们来点高级的吧：当用户把鼠标移到这些个li上时改变li的样式，移开时回复原样。这里我们只改变最后一个li。
| $(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); },function(){ $(this).removeClass("green"); }); }); |
还有许多其他的选择器是类似于css和XPath的语法的，更多的例子和变量、表达式可以在这里找到。
像onClick、onChange、onSubmit这样的onXxxxx事件在jQuery中都有相对应的方法。这里有jQuery中的事件列表，他们都是作为方法为某种任务提供的，可以很方便的使用他们。
你可以在jQuery Events Documentation中找到所有的jQuery事件。
用这些选择器和事件你可以做很多工作，但你要记住，还会有更多的…
| $(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).append( " BAM! " + i ); }); }); |
find()方法可以找到指定元素的后代（descendants）（子元素），所以$(“#orderedlist”).find(“li”)等价于$(“#orderedlist > li”)和$(“#orderedlist li”)。
each()方法迭代所有的元素并做进一步的处理。有很多方法他们本身就使用了each()方法，比如addClass()。
在这个例子中，append()方法用来为元素附加上一段文本，而且是加在元素值的后面的。
另外，我们还经常需要调用一些jQuery中没有包含的方法来设置dom元素，比如，用Ajax提交表单完成之后要重置表单的例子：
| $(document).ready(function() { // use this to reset a single form $("#reset").click(function() { $("form")[0].reset(); }); }); |
在这段代码中，把第一个form重置了，如果在通一个页面中有更多的form，并且都需要重置，你可以：
| $(document).ready(function() { // use this to reset several forms at once $("#reset").click(function() { $("form").each(function() { this.reset(); }); }); }); |
上面的代码，可以选择页面（或文档 document）中的所有的form，并为他们调用reset()方法。注意：在一个.each()函数中，this 引用的是当前正在活动的元素。并且还要记住，reset()方法是属于form元素的，而不是jQuery对象，我们不能简单的使用$(“form”).reset()来重置页面上多有的表单。
好了，现在我们面临一个更大的挑战：从一组相似或相同的元素中摘取出某个特定的元素。
jQuery为这样的需求提供了filter()和not()方法，filter()方法根据过滤条件来缩减选取元素的范围，而not()方法做的工作却是与之相反的，not()方法会排除掉那些适合过滤条件的元素。（While filter() reduces the selection to the elements that fit the filter expression, not() does the contrary and removes all elements that fit the expression.）
我们造一个需求出来：我们们想在一个无序的list（unordered list）里选取出所有没有ul子元素的li元素。
| $(document).ready(function() { $("li").not(":has(ul)").css("border", "1px solid black"); }); |
这里，我们选择了除了有ul子元素的所有的li元素，并为他们加上了边框。
（This selects all li elements that have a ul element as a child and removes all elements from the selection. Therefore all li elements get a border, except the one that has a child ul.）
[expression]的语法来自于XPath，它可以作为条件来过滤元素的属性。也许你现在想从页面中摘取出所有有name属性的a标签，那么来看看你该怎么做吧：
| $(document).ready(function() { $("a[name]").css("background", "#eee" ); }); |
这里我们给所有拥有name属性的a标签设置了背景色。
比起用name属性作为过滤条件来选取a标签，更常见的是用href属性做为条件，由于各个浏览器对于处理链接返回值的方式很不相同，这是会出问题的（This can be a problem as browsers behave quite inconsistently when returning what they think the "href" value is）（注意：这个问题已经在1.1.1版本后的版本中解决啦^_^）。为了匹配其中的一部分，我们可以用“包含选择”：*= 来代替等号：=。
| $(document).ready(function() { $("a[href*=/content/gallery]").click(function() { // do something with all links that point somewhere to /content/gallery }); }); |
直到现在，我们讲的选择器都是用来选取子元素或是过滤选取。那么如果我们想选取该元素的兄弟元素该怎么办呢？想象下，一个FQA页面，刚开始所有的答案都是隐藏的，当你点击的时候才显示出来，在jQuery中是这么做的：
| $(document).ready(function() { $('#faq').find('dd').hide().end().find('dt').click(function() { $(this).next().slideToggle(); }); }); |
这里我们有了链式方式（chaining）来减少代码量并且获得更好的执行效率。
end()方法：返回第一个find()（即find(‘dd’)）操作之前的匹配的元素集合。这样我们就可以继续在$(“#faq”)元素集合里执行第二个find()（即find(‘dt’)）方法了。
click()方法中有一个匿名函数，当click句柄执行的时候，用$(this).next()来找到当前dt元素的下一个兄弟元素（dd），这样我们很快的就找到了当前问题的答案，并设置其为隐藏或显示。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
