难免有误，阅读注意
原文地址：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
翻译：牛小超-Nainse
开始时间：2009年3月5日16:38:13
这是一个介绍jQuery js 库的指导性文档。你需要具备一些js和dom（document object model， 文档对象模型）的基础知识。她是从最基础开始的，对于那些有必要的信息，我会尽可能详细的解释。这篇文档里包含了一个简单的“hello world”的例子，选择符和事件的基础知识(selector and event basics)，Ajax，FX以及一些用法(usage)，还附带了一些插件的著作(authoring of plugins)。
这篇文档没有提供“click me”的代码，而只提供了“copy me”的，我的意图是想请您复制他们（更好的做法是用自己的手指一个字符一个字符的敲出他们），然后亲自尝试着使用他们。复制这些例子，看看他们都能做什么，然后大胆的试着修改他们。
SETUP
在开始之前我们需要一个jQuery的js库，可以在main download page得到。jQuery Starterkit提供了一些标记（markup）和css配合这些工作。在下载并解压jQuery Starterkit之后，把jquery.js放到同一个目录下，并用你最喜欢的编辑器（我用DreamWeaver cs3）打开startkit.html和custom.js，并且用浏览器也把startkit.html打开。
现在，你已经为测试已经被人们用烂了的“Hello world”例子做好了所有的准备工作。
可能感兴趣的连接：
n jQuery Starterkit
n Downloading jQuery
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>标签后加一个：
现在，把$(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="" onclick="alert('Hello world')">Link</a>
|
它们的区别是显而易见的：我们不需要再为每一个a元素单独指定onClick事件了。我们把结构(structure HTML)和行为(behavior JS)清晰的分离了，就像我们用css来分离结构和显示样式是一样的。
注意，我们现在才只是展示了选择器和事件(selectors and events)的一点点特性而已。
可能感兴趣的链接：
n jQuery Base
n jQuery Expressions
n jQuery Basic 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），这样我们很快的就找到了当前问题的答案，并设置其为隐藏或显示。
分享到：
相关推荐
《jQuery v1.3.2：经典版本的深入解析》 jQuery，作为一款广泛使用的JavaScript库，极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。本篇文章将聚焦于jQuery v1.3.2这一经典版本，探讨其核心特性、功能...
jQuery Frontier Calendar 是整整一个月的 jQuery 日历插件，外观有点像 Google Calendar 。所有 UI 元素（比如下个月和上个月按钮，添加事件表格，工具提示等等）都不属于日历插件。用户可以使用 API 来控制这些...
JQuery1.3.2JQuery1.3.2JQuery1.3.2JQuery1.3.2JQuery1.3.2JQuery1.3.2JQuery1.3.2
《jQuery 1.3.2：深入理解与应用》 jQuery是JavaScript库的杰出代表，以其简洁、易用的API闻名于世。本篇将详细探讨jQuery 1.3.2版本，包括其核心功能、优化特性以及在实际项目中的应用。 首先，jQuery的核心理念...
jQuery JavaScript Library v1.3.2 jQuery JavaScript内库 v1.3.2 压缩包内容：jquery-1.3.2.js（118kb）+jquery-1.3.2.min.js（56kb） 平常开发时使用jquery-1.3.2.js方便查看。jquery-1.3.2.min.js和jquery-1.3.2...
JQuery(jquery-1.3.2.js)
这个压缩包包含的是JQuery的两个早期版本：1.3.1和1.3.2。这两个版本在当时是非常流行的，为开发者提供了丰富的API和功能，使得前端开发变得更加高效。 JQuery 1.3.1 是该库的一个重要里程碑。在这个版本中，JQuery...
《jQuery 1.3.2 手册》是前端开发者必备的参考资料，它详细阐述了jQuery库在1.3.2版本中的各项功能和用法。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。通过这个手册，...
《jQuery 1.3.2：深入理解与应用》 jQuery是JavaScript库的杰出代表，以其简洁、高效的语法设计赢得了全球开发者的喜爱。在本文中，我们将深入探讨jQuery 1.3.2这一版本，包括它的核心特性、API文档以及实际应用...
《jQuery 1.3.2：JavaScript 动态交互的核心》 jQuery，作为一款轻量级的JavaScript库，自发布以来就深受开发者喜爱，尤其在jQuery 1.3.2这个版本中，它进一步强化了对DOM操作、事件处理、动画效果以及Ajax交互的...
标题中的“jquery 1.3.2.js”指的是jQuery库的一个特定版本，即1.3.2。这个版本发布于2009年，是jQuery历史上的一个重要里程碑，虽然现在已经有了更新的版本，但1.3.2仍然被一些项目所使用，因为它是稳定且兼容性...
1.3.2版本是jQuery历史上的一个重要里程碑，它在1.x系列中提供了许多改进和新特性，旨在提升性能、增强兼容性和简化代码。以下是关于jQuery 1.3.2版本的一些关键知识点： 1. **链式操作**：jQuery的核心设计之一...
《jQuery & jQuery UI 1.3.2离线AIR版手册》是一份全面介绍jQuery及其UI库的资源，特别适合开发者在无网络环境下查阅。这个手册包含即时搜索功能，使得开发者能够快速找到所需的信息，提高了开发效率。jQuery是广泛...
本文将深入探讨标题中的"jquery-1.3.2"、"jquery-1.3.2.min"以及"popup_layer"这三个关键词所代表的知识点，并提供相关的应用和理解。 首先，我们来看"jquery-1.3.2"，这是jQuery库的一个特定版本，发布于2009年。...
jquery-1.3.2 压缩版+非压缩版，另附压缩版引用地址： 百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"> 微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/...
《jQuery 1.3.2.min.js：JavaScript开发的强大工具》 jQuery，作为一款轻量级的JavaScript库，自发布以来就受到了广大开发者热烈的欢迎。这个“jquery-1.3.2.min.js”文件是jQuery 1.3.2版本的最小化版本，它在保持...