JQUERY开发库+入门教程

中文入门教程_译自Getting Started with jQuery http://www.k99k.com/jQuery_getting_started.html

第1页 共9页 2008-5-3 9:17

jQuery中文入门指南，翻译加实例，jQuery的起点教程

中文版译者：Keel

此文以实例为基础一步步说明了jQuery的工作方式。现以中文翻译（添加我的补充说明）如下。如有相关意见或建议请麻烦到我的 BLOG 写

个回复或者 EMAIL 告知。

英文原版：http://jquery.bassistance.de/jquery-getting-started.html ，感谢原文作者 Jörn Zaefferer

这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基

础，AJAX、FX的用法，以及如何制作jQuery的插件。 这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。

内容提要

安装1.

Hello jQuery2.

Find me:使用选择器和事件3.

Rate me:使用AJAX4.

Animate me(让我生动起来):使用FX5.

Sort me(将我有序化):使用tablesorter插件(表格排序)6.

Plug me:制作您自己的插件7.

子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)

现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.

本章的相关链接:

Starterkit

jQuery Downloads

Hello jQuery

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理

HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

$(document).ready(function() {

// do stuff when DOM is ready

中文入门教程_译自Getting Started with jQuery http://www.k99k.com/jQuery_getting_started.html

第2页 共9页 2008-5-3 9:17

alert("Hello world!");

});

});

这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。

(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)

让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$

号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery

对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.

这里有一个拟行相似功能的代码:

<a href="#" onclick="alert('Hello world')">Link</a>

jQuery Basic Events

Find me:使用选择器和事件

jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：

$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.

一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById

("orderedlist").在jQuery中，我们这样做：

$(document).ready(function() {

$("#orderedlist").addClass("red");

});

});

这样，所有orderedlist中的li都附加了样式"blue"。

现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。

$(document).ready(function() {

$("#orderedlist li:last").hover(function() {

$(this).addClass("green");

}, function() {

$(this).removeClass("green");

});

});

中文入门教程_译自Getting Started with jQuery http://www.k99k.com/jQuery_getting_started.html

第3页 共9页 2008-5-3 9:17

$(document).ready(function() {

$("#orderedlist").find("li").each(function(i) {

$(this).html( $(this).html() + " BAM! " + i );

});

});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭

代了所有的li，并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()

用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的

html代码，而.html('xxx')是设置'xxx'为对象的html代码）

另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：

（译者Keel注：这里作者将form的id也写成了form，源文件有<form id="form">，这是非常不好的写法，你可以将这个ID改成form1或者

testForm，然后用$("#form1")或者$("#testForm")来表示它，再进行测试。）

这个代码选择了所有ID为"form"的元素，并在其第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：

$(document).ready(function() {

// use this to reset several forms at once

$("#reset").click(function() {

$("form").each(function() {

this.reset();

});

});

素的li元素。

$(document).ready(function() {

$("li").not("[ul]").css("border", "1px solid black");

});

这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li

元素例外。

（译者Keel注：请注意体会方便之极的css()方法，并再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像

这样：$("li").not("[ul]").css("border", "1px solid black").css("color","red");）

上面代码中的[expression] 语法是从XPath而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有

的带有name属性的链接:

们的部分匹配("*=")的方式来代替完全匹配("=")：

$(document).ready(function() {

$("a[@href*=/content/gallery]").click(function() {

// do something with all links that point somewhere to /content/gallery

});

});

到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先

会隐藏，当问题点击时，答案显示出来，jQuery代码如下：