使用&jQuery&简化&Ajax&开发
级别： 中级
, Web 开发人员, Freelance
2007 年 5 月 16 日
jQuery 是一个JavaScript
库，它有助于简化 JavaScript? 以及 Asynchronous
JavaScript + XML (Ajax) 编程。与类似的
JavaScript 库不同，jQuery
具有独特的基本原理，可以简洁地表示常见的复杂代码。学习
基本原理，探索其特性和功能，执行一些常见的
Ajax 任务并掌握如何使用插件扩展 jQuery。
请访问&，这是有关 Ajax
编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki
和新闻。任何 Ajax 的新信息都能在这里找到。
jQuery 由 John Resig 创建于 2006 年初，对于任何使用
JavaScript
代码的程序员来说，它是一个非常有用的
JavaScript 库。无论您是刚刚接触 JavaScript
语言，并且希望获得一个能解决文档对象模型（Document
Object Model，DOM）脚本和 Ajax
开发中一些复杂问题的库，还是作为一个厌倦了 DOM
脚本和 Ajax 开发中无聊的重复工作的资深
JavaScript 专家，jQuery 都会是您的首选。
能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和
DOM 脚本库调用了。使用
jQuery，您可以把握问题的要点，并使用尽可能最少的代码实现您想要的功能。
毫无疑问，jQuery
的原理是独一无二的：它的目的就是保证代码简洁并可重用。当您理解并体会这一原理后，便可以开始学习本教程了，看看
jQuery 对我们的编程方式有多少改进吧。
下面是一个简单示例，它说明了 jQuery
对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯
JavaScript 代码和 DOM
脚本来实现，如&&所示。
var external_links = document.getElementByIdx('external_links');
var links = external_links.getElementsByTagName_r('a');
for (var i=0;i & links.i++) {
var link = links.item(i);
link.onclick = function() {
return confirm('You are going to visit: ' + this.href);
&显示了使用 jQuery
实现的相同的功能。
$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
是不是很神奇？ 使用
jQuery，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，de&click()de&&函数将完成这些操作。同样也不需要进行多个
脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。
理解这一代码的工作原理可能会有一点复杂。首先，我们使用了&de&$()de&&函数
—— jQuery
中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading
Style Sheet，CSS）语法的字符串被传递给函数，然后
jQuery 尽可能高效地把这些元素找出来。
如果您具备 CSS
选择器的基本知识，那么应该很熟悉这些语法。在&&中，de&#external_linksde&&用于检索&de&idde&&为&de&external_linksde&&的元素。de&ade&&后的空格表示
需要检索&de&external_linksde&&元素中的所有&de&&a&de&&元素。用英语说起来非常绕口，甚至在
DOM 脚本中也是这样，但是在 CSS
中这再简单不过了
de&$()de&&函数返回一个含有所有与
CSS 选择器匹配的元素的 jQuery 对象。jQuery
对象&类似于数组，但是它附带有大量特殊的
函数。比方说，您可以通过调用&de&clickde&&函数把
click 处理函数指定给 jQuery 对象中的所有元素。
还可以向&de&$()de&&函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个
jQuery 对象中。您可能会想要使用这个功能将 jQuery
函数用于一些对象，比方说&de&windowde&&对象。例如，我们通常会像下面这样把函数分配给加载事件：
window.onload = function() {
// do this stuff when the page is done loading
使用 jQuery 编写的功能相同的代码：
$(window).load(function() {
// run this when the whole page has been downloaded
您可能有所体会，等待窗口加载的过程是非常缓慢而且令人痛苦的，这是因为必须等整个页面加载完所有的内容，包括页面上所有的的图片。有的时候，您希望首先完成图片加载，但是在大多数情况下，您只需加载超文本标志语言（Hypertext
Language，HTML）就可以了。通过在文档中创建特殊的de&readyde&&事件，jQuery
解决了这个问题，方法如下：
$(document).ready(function() {
// do this stuff when the HTML is all ready
这个代码围绕&de&documentde&&元素创建了一个
jQuery 对象，然后建立一个函数，用于在 HTML DOM
文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的
格式，使用快捷方式调用这个函数。这很简单，只需向&de&$()de&&函数传递一个函数就可以了：
$(function() {
// run this when the HTML is done downloading
到目前以止，我已经向大家介绍了&de&$()de&&函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的
jQuery 对象。&显示的示例在页面中添加了一个段落。
$('&p&&/p&')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");
$('#message').css('background', 'yellow').html('Hello!').show();
使用 jQuery 将使 Ajax 变得及其简单。jQuery
提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
Ajax 最常见的用法就是把一块 HTML
代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用&de&load()de&&函数即可。下面是一个用于更新统计信息的示例：
$('#stats').load('stats.html');
通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用
实现这一操作非常地简单。您可以使用&de&$.post()de&&或者de&$.get()de&，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。&显示了一个发送数据和使用回调的简单示例。
$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
如果您确实需要编写一些复杂的 Ajax
脚本，那么需要用到&de&$.ajax()de&&函数。您可以指定&de&xmlde&、de&scriptde&、de&htmlde&&或者&de&jsonde&，jQuery
将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定&de&beforeSendde&、de&errorde&、de&successde&&或者&de&completede&&回调函数，向用户提供更多有关
体验的反馈。此外，还有一些其它的参数可供使用，您可以使用它们设置
Ajax 请求的超时，也可以设置页面
“最近一次修改” 的状态。&显示了一个使用一些我所提到的参数检索
XML 文档的示例。
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
success: function(xml){
// do something with xml
当 success 回调函数返回 XML 文档后，您可以使用
jQuery 检索这个 XML 文档，其方式与检索 HTML
文档是一样的。这样使得处理 XML
文档变得相当地容易，并且把内容和数据集成到了您的
Web 站点里面。&显示了&de&successde&&函数的一个扩展，它为
中的每个&de&&item&de&&元素都添加了一个列表项到
Web 页面中。
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
$('&li&&/li&')
.html(item_text)
.appendTo('ol');
可以使用 jQuery
处理基本的动画和显示效果。de&animate()de&&函数是动画代码的核心，它用于更改任何随时间变化的数值型的
样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。
$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
alert('The element is done growing!');
的内置函数使更多常见的动画更容易完成。可以使用&de&show()de&&和&de&hide()de&&元素，立即显示或者以特定的速度显示。还可以通过使用&de&fadeIn()de&&和de&fadeOut()de&，或者&de&slideDown()de&&和&de&slideUp()de&&显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。
$('#nav').slideDown('slow');
或许 jQuery 最擅长的就是简化 DOM
脚本和事件处理。遍历和处理 DOM
非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。
从本质上说，jQuery 可以使 DOM
脚本中的常用操作变得更加容易。您可以创建元素并且使用&de&append()de&&函数把它们与其它的一些元素链接到一起，使用de&clone()de&&复制元素，使用&de&html()de&&设置内容，使用&de&empty()de&&函数删除内容，使用&de&remove()de&&函数删除所有的元素，即便是使用&de&wrap()de&&函数，用其他元素将这些元素包装起来。
通过遍历 DOM，一些函数可以用于更改 jQuery
对象本身的内容。可以获得元素所有的&de&siblings()de&、de&parents()de&&和&de&children()de&。还可以选择&de&next()de&&和de&prev()de&&兄弟元素。de&find()de&&函数或许是功能最强大的函数，它允许使用
jQuery 选择器搜索 jQuery 对象中元素的后代元素。
如果结合使用&de&end()de&&函数，那么这些函数将变得更加强大。这个函数的功能类似于
函数，用于返回到调用&de&find()de&&或&de&parents()de&&函数（或者其它遍历函数）之前的
jQuery 对象。
如果配合方法链接（method
chaining）一起使用，这些函数可以使复杂的操作看上去非常简单。显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。
$('form#login')
// hide all the labels inside the form with the 'optional' class
.find('label.optional').hide().end()
// add a red border to any password fields in the form
.find('input:password').css('border', '1px solid red').end()
// add a submit handler to the form
.submit(function(){
return confirm('Are you sure you want to submit?');
不管您是否相信，这个示例只是一行满是空白的被链接的代码。首先，选择登录表单。然后，发现其中含有可选标签，隐藏它们，并调用&de&end()de&&返回表单。然后，我创建了密码字段，将其边界变为红色，再次调用&de&end()de&&返回表单。最后，我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是（除了其简洁性以外），jQuery
完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。
处理常见事件就像调用函数（比方说&de&click()de&、de&submit()de&&或&de&mouseover()de&）和为其传递事件处理函数一样简单。此外，还可以使用&de&bind('eventname',
function(){})de&&指定自定义的事件处理程序。可以使用&de&unbind('eventname')de&&删除某些事件或者使用&de&unbind()de&&删除所有的事件。有关这些函数的使用方法的完整列表，请参阅&&中的
jQuery 应用程序编程接口（Application Program
Interface，API）文档。
我们经常会使用 ID
来选择元素，比如&de&#myidde&，或者通过类名，比如&de&div.myclassde&&来选择元素。然而，jQuery
提供了更为复杂和完整的选择器语法，允许我们在单个选择器中选择几乎所有的元素组合。
jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对
CSS3 和 XPath 了解的越多，使用 jQuery
时就越加得心应手。有关 jQuery
选择器的完整列表，包括 CSS 和
XPath，请参阅&&中的链接。
包含一些并不是所有浏览器都支持的语法，因此我们很少使用它。然而，我们仍然可以在
jQuery 中使用 CSS3 选择元素，因为 jQuery
具备自己的自定义选择器引擎。比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：de&:emptyde&&伪选择器（pseudo-selector）：
$('td:empty').html('-');
如果需要找出所有不含特定类的元素呢？ CSS3
同样提供了一个语法可以完成这个目的，使用&de&:notde&&伪选择器：
如下代码显示了如何隐藏所有不含&de&requiredde&类的输入内容：
$('input:not(.required)').hide();
中一样，可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例：
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？院领导集体
中国科学院大学
上海科技大学
《中国科学院院刊》（中文版），5年超长合约签下新C罗 楚天108将大赛报名火爆。
《科学通报》是自然科学综合性学术刊物，上期所意外误平仓 新秀对决詹金斯追身帽辱弗神。
覆盖数学、物理、化学、生命科学，红珊瑚价格一年翻了两三倍 Yandex收购社交新闻公司The。
上海医药6.6亿H股今日发售 康塔德差距拉大(图)
美联储10日将开会讨论新政策 环法单项排名
美国公开赛第二轮激战正酣 秦凯是意外不是失误
立博威廉差异大曼联有冷 正赛将采用激进策略
赌博粉&快乐吗：旭日阳刚当观众 4种方法快乐提高技术
文章来源：中国科学院&&&&发布时间：日 09:46&&【字号：&&&&&&】
　　《中华人民共和国治安管理处罚法》第二十五条规定，散布谣言，谎报险情、疫情、警情或者以其他方法故意扰乱公共秩序的，处5日以上10日以下拘留，可以并处500元以下罚款；情节较轻的，处5日以下拘留或者500元以下罚款。
　　澳大利亚国防部长玛丽斯·佩恩（Marise Payne）透露，“国防部将评估竞标者与我们密切合作的能力，包括每个方案是否能满足我们对潜艇的性能、建造费用、进度和风险管理等方面要求。”
　　继铁路上海虹桥站计划停运8月9日的9趟列车后，8月9日当天，上海虹桥站停运车次进一步增加到36趟。至此，当日从上海地区南下福州、厦门方向的高铁动车全部停运。同时，铁路部门将增开甬温等方向短途动车，以保障旅客短途出行需求。
赌博粉&快乐吗：永安行表示，在目前的时机下引入大量资金和优质投资者，共同在永安行低碳的平台，开展用户付费共享单车等后续业务，可以通过参股投资分享该业务后续发展的成果。公司此次交易将在今年公司合并报表上体现较大的投资收益，初步测算为5.04亿元。
　　金泳三的亲人也因涉及腐败而锒铛入狱。1997年1月引发韩宝钢铁公司贷款丑闻曝光，金泳三之子金贤哲涉嫌受贿。金贤哲承认他从两名商人手中收取了32亿韩元，还从生意合伙人那里接受了33亿韩元。检察部门指出，这笔钱是商人们送给金贤哲的礼物，不是贿赂，但金贤哲没有交纳应付的13.5亿韩元的税款，是违法行为。金泳三对金贤哲的做法十分气愤，一再表明在法律面前人人平等，决不能因为金贤哲是总统之子而加以饶恕。总统夫人孙命顺也公开支持丈夫的表态，欢迎各界对金贤哲的揭发批评。两天后，金贤哲被捕入狱，成为韩国历史上第一位被捕的现任总统之子。金泳三的亲人也因涉及腐败而锒铛入狱。1997年1月引发韩宝钢铁公司贷款丑闻曝光，金泳三之子金贤哲涉嫌受贿。金贤哲承认他从两名商人手中收取了32亿韩元，还从生意合伙人那里接受了33亿韩元。检察部门指出，这笔钱是商人们送给金贤哲的礼物，不是贿赂，但金贤哲没有交纳应付的13.5亿韩元的税款，是违法行为。金泳三对金贤哲的做法十分气愤，一再表明在法律面前人人平等，决不能因为金贤哲是总统之子而加以饶恕。总统夫人孙命顺也公开支持丈夫的表态，欢迎各界对金贤哲的揭发批评。两天后，金贤哲被捕入狱，成为韩国历史上第一位被捕的现任总统之子。
　　该男子姓伍，融安县大良镇人，是一名“80后”乡村青年。2004年时，已经23岁的伍某喜欢上了在该镇木检站工作的一名年轻男子，暗中产生了爱慕之心，于是他写信向该男子表达了自己的爱意。
日 09:46，康熙一朝，虽有修书、入宬检书之举，却不曾大规模利用皇史宬所藏《大典》。清中叶及以后的记载，虽颇多浮词，甚至互相抵牾，但仍可据以探源辨流，对研究《大典》正、副本的流传史不无裨益。光绪年间，郭则沄似乎也读过高不骞的《检书行》，仿乾嘉诸老作《永乐大典余纸歌》，节录如次：
　　他们都是偷渡客，之所以遭罹不测，并非由于莫测的天气或海况，而是由于“人祸”：他们是在9日、10日两天被狠心的“蛇头”从偷渡船抛下海的，9日那天被抛下海的人数约为120人，10日则多达180人。走投无路的他们只能依靠小艇和就便器材漂向岸边，结果其中许多人葬身大海。
　　天晓得，那时候的我们算来算去也还是小学水平。其实说起知识，我也没有什么。就是小时候杂七杂八读过些小说和科学普及方面的书，因为小时候的梦想老是在科学家与作家两个方面摇摆。
　　值得注意的是，安倍访印期间，两国发表的联合声明中，在提及发展区域内基础设施时特地强调了“以国际标准和负责任的贷款行为为基础的，开放、透明、非排他的姿态”，以及“保障对主权、领土完整、环境与法制的尊重”。这与本次美日印三国外长会上关于地区内基础设施建设的表述几乎如出一辙。
　　“天视自我民视，天听自我民听。”决胜全面小康建设，就要坚持群众路线这一我们党在革命和建设中不断取得胜利的法宝。我们要坚持人民至上、人民主体地位，以人民群众为改革实践的主体，释放蕴藏在历史真正创造者当中的无限伟力；更要把实现好、维护好、发展好最广大人民的根本利益作为推进改革的出发点和落脚点，让发展成果更多更公平惠及全体人民。
　　相关链接：
（责任编辑：公良书桃）