jQuery ajax开发

rT M'A%R t0一些简单的代码简化

下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 Javascrīpt 代码和 DOM 脚本来实现，如清单 1所示。

2Q,JH(yT^.n6yi0var external_links = document.getElementById('external_links');PHPChina 开源社区门户s&VuQ-Ei
U
var links = external_links.getElementsByTagName('a');PHPChina 开源社区门户5n+DT3\7N6c(s
for (var i=0;i < links.length;i++) {PHPChina 开源社区门户%R.nN;BDMv1x
var link = links.item(i);PHPChina 开源社区门户I~:^\#D
@Hi
link.onclick = function() {
#o]/m.u+dPn8O(_0return confirm('You are going to visit: ' + this.href);
h ?H(NLNE&AX0};
8T9F'A`_B&N(A0}
\*Hkn	L0

\|oK7f0清单 2显示了使用 jQuery 实现的相同的功能。PHPChina 开源社区门户J{"e+fae;K

o3Iyv
Edjt0$('#external_links a').click(function() {PHPChina 开源社区门户U"[_"F
G$TG?
return confirm('You are going to visit: ' + this.href);PHPChina 开源社区门户U&]w;Po-SA
});PHPChina 开源社区门户5j
g9qmu:o

5s*EK:Xh"[:u%D3k0是不是很神奇？ 使用 jQuery，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，click()函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。PHPChina 开源社区门户H$Fdl@;|2T%v

Gy$kU%s5r0理解这一代码的工作原理可能会有一点复杂。首先，我们使用了$()函数 —— jQuery 中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，CSS）语法的字符串被传递给函数，然后 jQuery 尽可能高效地把这些元素找出来。

如果您具备 CSS 选择器的基本知识，那么应该很熟悉这些语法。在清单 2中，#external_links用于检索id为external_links的元素。a后的空格表示 jQuery 需要检索external_links元素中的所有<a>元素。用英语说起来非常绕口，甚至在 DOM 脚本中也是这样，但是在 CSS 中这再简单不过了

S9Y?$XF%_R-Z0$()函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象类似于数组，但是它附带有大量特殊的 jQuery 函数。比方说，您可以通过调用click函数把 click 处理函数指定给 jQuery 对象中的所有元素。PHPChina 开源社区门户J(yy7MZf6F1M m

7wD~~sq;b^0还可以向$()函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一些对象，比方说window对象。例如，我们通常会像下面这样把函数分配给加载事件：

window.onload = function() {PHPChina 开源社区门户"[@}(\?
// do this stuff when the page is done loadingPHPChina 开源社区门户r)F1ti2Ob)P
};
SA'h(Ec0

8Qy|G'l
`6B)ssO0使用 jQuery 编写的功能相同的代码：

$(window).load(function() {
"z~"MSA$?8{E`R0// run this when the whole page has been downloaded
bU8H#v*D4]s	M0});PHPChina 开源社区门户
di8e)R$d|Q)A

i'\ Vh4B*FB^0您可能有所体会，等待窗口加载的过程 是非常缓慢而且令人痛苦的，这是因为必须等整个页面加载完所有的内容，包括页面上所有的的图片。有的时候，您希望首先完成图片加载，但是在大多数情况下， 您只需加载超文本标志语言（Hypertext Markup Language，HTML）就可以了。通过在文档中创建特殊的ready事件，jQuery 解决了这个问题，方法如下：PHPChina 开源社区门户:G-f `eT

$(document).ready(function() {
1F2d"bA
NK\A4x0// do this stuff when the HTML is all ready
r:c	mW+t/a0});
0r&Uv6@qf0

2J0W EG s$n*z8NP2d0这个代码围绕document元素创建了一个 jQuery 对象，然后建立一个函数，用于在 HTML DOM 文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的 jQuery 格式，使用快捷方式调用这个函数。这很简单，只需向$()函数传递一个函数就可以了：

$(function() {PHPChina 开源社区门户
}.b1?!G~Bj
// run this when the HTML is done downloadingPHPChina 开源社区门户)mlJ$f
]I$T-N-G
});
ak%w#b)[[$C+U5a(V0

[B |Lm!^0到目前以止，我已经向大家介绍了$()函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的 jQuery 对象。清单 3显示的示例在页面中添加了一个段落。PHPChina 开源社区门户/j[!gs^Ewd&y

}6{Q&F$ga7B0$('<p></p>')PHPChina 开源社区门户u0{
QT#k;kSp
.html('Hey World!')
vk5Dc
LY9r2x0.css('background', 'yellow')PHPChina 开源社区门户/Z-duq]t3q
.appendTo("body");
wTAe#LPQm+J0

在前一个例子中您可能已经注意到，jQuery 中的另一个功能强大的特性就是方法链接（method chaining）。每次对 jQuery 对象调用方法时，方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法，那么您不必重新键入选择器就可以实现这一目的：PHPChina 开源社区门户KCp5@5Di|

$('#message').css('background', 'yellow').html('Hello!').show();PHPChina 开源社区门户T&\!wEQ
K

V;KB:eXlN%c.}(}0

k7R m2vh)y2}U;R C0 PHPChina 开源社区门户g3};hMF1_!p~4_OD 回页首

使 Ajax 变得简单

O ecv%i"uH(@(D0使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。PHPChina 开源社区门户t8xM$j`8yX8M

t_)q/}s:pK9{"h0Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用load()函数即可。下面是一个用于更新统计信息的示例：PHPChina 开源社区门户8p}^YDc Bq P

$('#stats').load('stats.html');
!Vzm-C6q;[Ov0

N {+F#F9CY J P"| Z0通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用 jQuery 实现这一操作非常地简单。您可以使用$.post()或者$.get()，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单 4显示了一个发送数据和使用回调的简单示例。

9lrL f5x
G
H]0$.post('save.cgi', {PHPChina 开源社区门户.z+q
ghOac&m
text: 'my string',
c'uXC6_0x6Gq6M0number: 23
#R9r
^{&HX:f)B0}, function() {
q
C0G_"p2Ll0alert('Your data has been saved.');
H1Rl(|:itc @K0});PHPChina 开源社区门户Hi"xc+q!w1@'ZM*SA

&pMt.bz4ES;w_0如果您确实需要编写一些复杂的 Ajax 脚本，那么需要用到$.ajax()函数。您可以指定xml、scrīpt、html或者json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定beforeSend、error、success或者complete回调函数，向用户提供更多有关 Ajax 体验的反馈。此外，还有一些其它的参数可供使用，您可以使用它们设置 Ajax 请求的超时，也可以设置页面 “最近一次修改” 的状态。清单 5显示了一个使用一些我所提到的参数检索 XML 文档的示例。

$dA
D\'N!|0$.ajax({
8_C2TfY:u{0url: 'document.xml',

F x
hjTX3f0type: 'GET',PHPChina 开源社区门户sJ+b(h;T
M(I
dataType: 'xml',PHPChina 开源社区门户H`9]f(o4R
timeout: 1000,PHPChina 开源社区门户\[N	BMe&q8Sc(i
error: function(){
Dm*T&q~;lQv9o1m0alert('Error loading XML document');PHPChina 开源社区门户,W*c~R"axO
},
;CXsjP\N0success: function(xml){
-wE0iCS6V0// do something with xml
NIMX4J;c/S,s
V0}PHPChina 开源社区门户5H3Z8rS"TX
});PHPChina 开源社区门户H d1Z0sh	kD*\k-TKWB

当 success 回调函数返回 XML 文档后，您可以使用 jQuery 检索这个 XML 文档，其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易，并且把内容和数据集成到了您的 Web 站点里面。清单 6显示了success函数的一个扩展，它为 XML 中的每个<item>元素都添加了一个列表项到 Web 页面中。PHPChina 开源社区门户#f%QF#N`!e'X"t

PHPChina 开源社区门户+KFm'N8D2u"S{|
success: function(xml){PHPChina 开源社区门户9qO)U-rkDKYw5lI
$(xml).find('item').each(function(){
5``7yh/BV0var item_text = $(this).text();PHPChina 开源社区门户2gs]Rw&o
PHPChina 开源社区门户x'S9H"f	}
$('<li></li>')PHPChina 开源社区门户T#N%OW/]M
.html(item_text)PHPChina 开源社区门户[.i1W%P3O$?
.appendTo('ol');PHPChina 开源社区门户j^3u5j
vI	R
});
;i"gmfPz'S!cA0}PHPChina 开源社区门户U\
jn#{@

;y U#y'p4KRj"jz0

mat'm:T H0 \~,{g T0 回页首

为 HTML 添加动画PHPChina 开源社区门户cGqV{w"c4`S

可以使用 jQuery 处理基本的动画和显示效果。animate()函数是动画代码的核心，它用于更改任何随时间变化的数值型的 CSS 样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。PHPChina 开源社区门户&R_V5w"]*BQt0F

下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。PHPChina 开源社区门户C.X6}@X

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
j2BsY!l.aB-A+x0alert('The element is done growing!');
%K*stH9W.m&I`6\
E0});

J2ZW8U!J0y{0

jQuery 的内置函数使更多常见的动画更容易完成。可以使用show()和hide()元素，立即显示或者以特定的速度显示。还可以通过使用fadeIn()和fadeOut()，或者slideDown()和slideUp()显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。

$('#nav').slideDown('slow');
o*x/[2v
X9r0

4H ]y qnk0

d+I|4~O"OeS&g0 PHPChina 开源社区门户%Vi\ d6I/H? 回页首

DOM 脚本和事件处理

h5~+Ez+\nY\5_0或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。

从本质上说，jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用append()函数把它们与其它的一些元素链接到一起，使用clone()复制元素，使用html()设置内容，使用empty()函数删除内容，使用remove()函数删除所有的元素，即便是使用wrap()函数，用其他元素将这些元素包装起来。

;P([4`jR7C J0通过遍历 DOM，一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的siblings()、parents()和children()。还可以选择next()和prev()兄弟元素。find()函数或许是功能最强大的函数，它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。

如果结合使用end()函数，那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数，用于返回到调用find()或parents()函数（或者其它遍历函数）之前的 jQuery 对象。

:T2TyG_F~0如果配合方法链接（method chaining）一起使用，这些函数可以使复杂的操作看上去非常简单。清单 7显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。

$sj3grE2h0$('form#login')
2IY`3T*^"])TMYJ$l0// hide all the labels inside the form with the 'optional' class
_KVFbub0.find('label.optional').hide().end()
!h|P!|	L{0

K6jV[3z0// add a red border to any password fields in the form
7N$N.z QEw&u@0.find('input:password').css('border', '1px solid red').end()PHPChina 开源社区门户f*h7er
q

`6F'J%w
`pzS0// add a submit handler to the formPHPChina 开源社区门户b~+d'JSl+L6s
.submit(function(){PHPChina 开源社区门户,gue'Z:?/d
g
return confirm('Are you sure you want to submit?');PHPChina 开源社区门户s4RT:yM
});PHPChina 开源社区门户{
]3}^@
_:a:Sy

不管您是否相信，这个示例只是一行满是空白的被链接的代码。首先，选择登录表单。然后，发现其中含有可选标签，隐藏它们，并调用end()返回表单。然后，我创建了密码字段，将其边界变为红色，再次调用end()返回表单。最后，我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是（除了其简洁性以外），jQuery 完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。PHPChina 开源社区门户'f Y!l;MMVvyN

T$ve.^y%Q"b0处理常见事件就像调用函数（比方说click()、submit()或mouseover()）和为其传递事件处理函数一样简单。此外，还可以使用bind('eventname', function(){})指定自定义的事件处理程序。可以使用unbind('eventname')删除某些事件或者使用unbind()删除所有的事件。有关这些函数的使用方法的完整列表，请参阅参考资料中的 jQuery 应用程序编程接口（Application Program Interface，API）文档。

PHPChina 开源社区门户7beg)Law2E

PHPChina 开源社区门户H,{"N0gIXy1ej7m { w-l)a!e/`9NBiK0 回页首

释放 jQuery 选择器的强大能量

我们经常会使用 ID 来选择元素，比如#myid，或者通过类名，比如div.myclass来选择元素。然而，jQuery 提供了更为复杂和完整的选择器语法，允许我们在单个选择器中选择几乎所有的元素组合。

|/r3R6X\&q+m\0jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多，使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表，包括 CSS 和 XPath，请参阅参考资料中的链接。PHPChina 开源社区门户:]d+Fb\gNbX7b

CSS3 包含一些并不是所有浏览器都支持的语法，因此我们很少使用它。然而，我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎。比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：:empty伪选择器（pseudo-selector）：PHPChina 开源社区门户Ax-]VG-K$i

$('td:empty').html('-');
w4h8[u(xb0

如果需要找出所有不含特定类的元素呢？ CSS3 同样提供了一个语法可以完成这个目的，使用:not伪选择器： 如下代码显示了如何隐藏所有不含required类的输入内容：

$('input:not(.required)').hide();PHPChina 开源社区门户%F._A3X,e'O
O$X?

与在 CSS 中一样，可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例：

$('ul, ol, dl').hide();PHPChina 开源社区门户xWm-qox9v_m

XPath 是一种功能强大的语法，用于在文档中搜寻元素。它与 CSS 稍有区别，不过它能实现的功能略多于 CSS。要在所有复选框的父元素中添加一个边框，可以使用 XPath 的/..语法：PHPChina 开源社区门户3VUj\d?Sd%VP

$("input:checkbox/..").css('border', '1px solid #777');PHPChina 开源社区门户m;][\SeXOL	r:_k

&M0X1|"} ]D or|8j3\%fN0jQuery 中也加入了一些 CSS 和 XPath 中没有的选择器。比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名 —— 也可以称作把表分段（striping）。使用 jQuery 不费吹灰之力就可以做到这点，这需要归功于odd伪选择器。下面这个例子使用striped类改变了表格中所有奇数行的背景颜色：PHPChina 开源社区门户YwOP!?$~#B

$('table.striped > tr:odd').css('background', '#999999');PHPChina 开源社区门户
xdd:_:]]6e6U

我们可以看到强大的 jQuery 选择器是如何简化代码的。不论您想处理什么样的元素，不管这个元素是具体的还是模糊的，都有可能找到一种方法使用一个 jQuery选择器对它们进行定义。

PHPChina 开源社区门户l6m/y'}A8e2Ts

PHPChina 开源社区门户-{o;C9dq](PQ4P PHPChina 开源社区门户q5~T3@s 回页首

\s q#n"V;d0[0使用插件扩展 jQuery

qmvTT\J0与大多数软件不同，使用一个复杂的 API 为 jQuery 编写插件并不是非常困难。事实上，jQuery 插件非常易于编写，您甚至希望编写一些插件来使代码更加简单。下面是可以编写的最基本的 jQuery 插件：PHPChina 开源社区门户7uZ4I`,TP

$.fn.donothing = function(){PHPChina 开源社区门户Vjj)P2U"m
return this;
kfA"k4egnEl0};
1Rb(y:l2x'b0

-W,\
s M_P:G3g [0虽然非常简单，但是还是需要对这个插件进行一些解释。首先，如果要为每一个 jQuery 对象添加一个函数，必须把该函数指派给$.fn。第二，这个函数必须要返回一个this（jQuery 对象），这样才不至于打断方法链接（method chaining）。

可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件，以替代使用css('background')，可以使用下面的代码：PHPChina 开源社区门户]e/[5iC8?/B

$.fn.background = function(bg){
@ ]	?/uSO#R0return this.css('background', bg);PHPChina 开源社区门户g;J[?-bx(QmK
};
1[c_iU0

\,X Mr6xNlBD \/SO0清注意，可以只从css()返回值，因为已经返回了 jQuery 对象。因此，方法链接（method chaining）仍然运作良好。

我建议在需要重复工作的时候使用 jQuery 插件。比方说，如果您需要使用each()函数反复执行相同的操作，那么可以使用一个插件来完成。PHPChina 开源社区门户T P1iA8q0yD

BC:j0wc`0由于 jQuery 插件相当易于编写，所以有上百种可供你选择使用。jQuery 提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器，以及我们可以想到的一切效果。有关插件的完整列表，请参阅参考资料。

最 为复杂、使用最为广泛的插件要属界面（Interface），它是一种动画插件，用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面 （User Interface，UI）。界面对于 jQuery 来说就如 scrīptaculous 对于 Prototype 一样。PHPChina 开源社区门户(pMeJg

,F$|TZy)FE1QQa0表单插件也同样流行且非常有用，通过它可以使用 Ajax 在后台中轻松地提交表单。这个插件用于处理一些常见的情况：您需要截获某个表单的提交事件，找出所有不同的输入字段，并使用这些字段构造一个 Ajax 调用。