jqueryajax:使用 jQuery 简化 Ajax 开发来源: 发布时间:星期六, 2009年2月21日 浏览:162次 评论:0
jQuery 由 John Resig 创建于 2006 年初
 对于任何使=t_tag _disibledevent=>JavaScript =t_tag _disibledevent=>代码 =t_tag _disibledevent=> 员来说它是 个非常有用 =t_tag _disibledevent=>JavaScript 库 无论您是刚刚接触 =t_tag _disibledevent=>JavaScript =t_tag _disibledevent=>语言并且希望获得个能=t_tag _disibledevent=>解决=t_tag _disibledevent=>文档=t_tag _disibledevent=>对象模型(Document Object ModelDOM)脚本和 =t_tag _disibledevent=>Ajax =t_tag _disibledevent=>开发中些复杂问题库还是作为个厌倦了 DOM 脚本和 =t_tag _disibledevent=>Ajax =t_tag _disibledevent=>开发中无聊重复工作资深 =t_tag _disibledevent=>JavaScript 专家jQuery 都会是您首选jQuery 能帮助您保证代码简洁易读 您再也不必=t_tag _disibledevent=>编写大堆重复循环代码和 DOM 脚本库 了使用 jQuery您可以把握问题要点并使用尽可能最少代码实现您想要=t_tag _disibledevent=>功能毫无疑问 jQuery =t_tag _disibledevent=>原理是独无 2:它目就是保证代码简洁并可重用当您理解并体会这=t_tag _disibledevent=>原理后便可以开始=t_tag _disibledevent=>学习本=t_tag _disibledevent=>教程了看看 jQuery 对我们编程方式有多少改进吧些简单代码简化下面是 个简单举例它介绍说明了 jQuery 对代码影响要执行些真正简单和常见任务比方说为页面某区域中每个链接附加个单击(click)事件您可以使用纯 =t_tag _disibledevent=>JavaScript 代码和 DOM 脚本来实现 所示清单 1. 没有使用 jQuery DOM 脚本var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i  ) { var link = links.item(i); link.onclick = function {  confirm('You are going to visit: ' + this.href); };} 显示了使用 jQuery 实现 相同功能清单 2. 使用了 jQuery DOM 脚本$('#external_links a').click(function { confirm('You are going to visit: ' + this.href);}); 是不是很神奇？ 使用 jQuery 您可以把握问题要点只让代码实现您想要功能而省去了些繁琐过程无需对元素进行循环click  将完成这些操作同样也不需要进行多个 DOM 脚本您只需要使用个简短=t_tag _disibledevent=> 串对所需元素进行定义即可理解这 代码工作原理可能会有点复杂首先我们使用了 $ —— jQuery 中功能最强大通常我们都是使用这个从文档中选择元素在本例中个包含有些层叠样式表(Cascading Style SheetCSS)=t_tag _disibledevent=>语法串被传递给然后 jQuery 尽可能高效地把这些元素找出来如果您具备 CSS 选择器 基本知识那么应该很熟悉这些语法在 中#external_links 用于检索 id 为 external_links 元素a 后空格表示 jQuery 需要检索 external_links 元素中所有 <a> 元素用英语说起来非常绕口甚至在 DOM 脚本中也是这样但是在 CSS 中这再简单不过了$ 返回个含有所有和 CSS 选择器匹配元素 jQuery 对象jQuery 对象 类似于 但是它附带有大量特殊 jQuery 比方说您可以通过 click 把 click 处理指定给 jQuery 对象中所有元素还可以向 $ 传递个元素或者个元素该将把这些元素封装在个 jQuery 对象中您可能会想要使用这个功能将 jQuery 用于些对象比方说 window 对象例如我们通常会像下面这样把分配给加载事件: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 Markup LanguageHTML)就可以了通过在文档中创建特殊 ready 事件jQuery 解决了这个问题思路方法如下:$(document).ready(function { // do this stuff when the HTML is all ready}); 这个代码围绕 document 元素创建了 个 jQuery 对象然后建立个用于在 HTML DOM 文档就绪时候=t_tag _disibledevent=>例子可以根据需要任意地这个并且能够以真正 jQuery 格式使用快捷方式这个这很简单只需向 $ 传递个就可以了:$(function { // run this when the HTML is done downloading}); 到目前以止 我已经向大家介绍了 $ 3种使用方法第 4种思路方法可以使用串来创建元素结果会产生个包含该元素 jQuery 对象清单 3 显示举例在页面中添加了个段落清单 3. 创建和附加 个简单段落$('<p></p>') .html('Hey World!') .css('background', 'yellow') .appendTo("body"); 在前 个例子中您可能已经注意到jQuery 中另个功能强大特性就是思路方法链接(method chaining)每次对 jQuery 对象思路方法时思路方法都会返回相同 jQuery 对象这意味着如果您需要对 jQuery 对象多个思路方法那么您不必重新键入选择器就可以实现这目:$('#message').css('background', 'yellow').html('Hello!').show ;   使 Ajax 变得简单 使用 jQuery 将使 Ajax 变得及其简单 jQuery 提供有些可以使简单工作变得更加简单复杂工作变得不再复杂Ajax 最常见 使用方法就是把块 HTML 代码加载到页面某个区域中去为此只需简单地选择所需元素然后使用 load 即可下面是个用于更新统计信息举例:$('#stats').load('stats.html'); 通常 我们只需简单地把些参数传递给=t_tag _disibledevent=>=t_tag _disibledevent=>服务器中某个页面正如您所预料使用 jQuery 实现这操作非常地简单您可以使用 $.post 或者 $.get这由所需思路方法决定如果需要话您还可以传递个可选=t_tag _disibledevent=>数据对象和回调清单 4 显示了个发送=t_tag _disibledevent=>数据和使用回调简单举例清单 4. 使用 Ajax 向页面发送数据 $.post('save.cgi', { text: 'my  ', number: 23}, function { alert('Your data has been saved.');}); 如果您确实需要编写 些复杂 Ajax 脚本那么需要用到 $.ajax 您可以指定 xml、script、html 或者 jsonjQuery 将自动为回调准备合适结果这样您便可以立即使用该结果还可以指定 beforeSend、error、success 或者 complete 回调向用户提供更多有关 Ajax 体验反馈此外还有些其它参数可供使用您可以使用它们设置 Ajax 请求超时也可以设置页面 “最近次修改” 状态清单 5 显示了个使用些我所提到参数检索 =t_tag _disibledevent=>XML 文档举例清单 5. $.ajax 使 Ajax 由复杂变简单 $.ajax({ 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 文档变得相当地容易并且把内容和数据集成到了您 =t_tag _disibledevent=>Web 站点里面清单 6 显示了 success 个扩展它为 XML 中每个 <item> 元素都添加了个列表项到 =t_tag _disibledevent=>Web 页面中清单 6. 使用 jQuery 处理 XML 文档 success: function(xml){ $(xml).find('item').each(function { var item_text = $(this).text; $('<li></li>') .html(item_text) .appendTo('ol'); });} 为 HTML 添加动画 可以使用 jQuery 处理基本 动画和显示效果animate 是动画代码核心它用于更改任何随时间变化数值型 CSS 样式值比方说您可以变化高度、宽度、不透明度和位置还可以指定动画速度定为毫秒或者预定义速度:慢速中速或快速下面是 个同时变化某个元素高度和宽度举例请注意这些参数没有开始值只有最终值开始值取自元素当前尺寸同时我也附加了个回调$('#grow').animate({ height: 500, width: 500 }, "slow", function { alert('The element is done growing!');}); jQuery 内置使更多常见动画更容易完成可以使用 show 和 hide 元素立即显示或者以特定速度显示还可以通过使用 fadeIn 和 fadeOut或者 slideDown 和 slideUp 显示和隐藏元素这取决于您所需要显示效果下面举例定义了个下滑导航菜单$('#nav').slideDown('slow'); DOM 脚本和事件处理 或许 jQuery 最擅长 就是简化 DOM 脚本和事件处理遍历和处理 DOM 非常简单同时附加、移除和事件也十分容易且不像手动操作那样容易出错从本质上说 jQuery 可以使 DOM 脚本中常用操作变得更加容易您可以创建元素并且使用 append 把它们和其它些元素链接到起使用 clone 复制元素使用 html 设置内容使用 empty 删除内容使用 remove 删除所有元素即便是使用 wrap 用其他元素将这些元素包装起来通过遍历 DOM 些可以用于更改 jQuery 对象本身内容可以获得元素所有 siblings、parents 和 children还可以选择 next 和 prev 兄弟元素find 或许是功能最强大它允许使用 jQuery 选择器搜索 jQuery 对象中元素后代元素如果结合使用 end 那么这些将变得更加强大这个功能类似于 undo 用于返回到 find 或 parents (或者其它遍历)的前 jQuery 对象如果配合思路方法链接(method chaining) 起使用这些可以使复杂操作看上去非常简单清单 7 显示了个举例其中包含有个登录表单并处理了些和的有关元素清单 7. 轻松地遍历和处理 DOM $('form#login') // hide all the labels inside the form with the 'optional'  .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{ confirm('Are you sure you want to submit?'); }); 不管您是否相信 这个举例只是行满是空白被链接代码首先选择登录表单然后发现其中含有可选标签隐藏它们并 end 返回表单然后我创建了密码字段将其边界变为红色再次 end 返回表单最后我在表单中添加了个提交事件处理其中尤为有趣就是(除了其简洁性以外)jQuery 完全优化了所有查询操作确保将所有内容很好地链接在起后不需要对个元素执行两次查询处理常见事件就像 (比方说 click、submit 或 mouseover)和为其传递事件处理样简单此外还可以使用 bind('eventname', function{}) 指定自定义事件处理可以使用 unbind('eventname') 删除某些事件或者使用 unbind 删除所有事件 释放 jQuery 选择器 强大能量我们经常会使用 ID 来选择元素 比如 #myid或者通过类名比如 div.my 来选择元素然而jQuery 提供了更为复杂和完整选择器语法允许我们在单个选择器中选择几乎所有元素组合jQuery 选择器语法主要是基于 CSS3 和 XPath 对 CSS3 和 XPath 了解越多使用 jQuery 时就越加得心应手有关 jQuery 选择器完整列表包括 CSS 和 XPath.CSS3 包含 些并不是所有浏览器都支持语法因此我们很少使用它然而我们仍然可以在 jQuery 中使用 CSS3 选择元素 jQuery 具备自己自定义选择器引擎比方说要在=t_tag _disibledevent=>表格中每个空列中都添加个横杠可以使用::empty 伪选择器(pseudo-selector):$('td:empty').html('-'); 如果需要找出所有不含特定类 元素呢？ CSS3 同样提供了个语法可以完成这个目使用 :not 伪选择器: 如下代码显示了如何隐藏所有不含 required 类输入内容:$('input:not(.required)').hide ; 和在 CSS 中 样可以使用逗号将多个选择器连接成个下面是个同时隐藏页面上所有=t_tag _disibledevent=>类型列表简单举例:$('ul, ol, dl').hide ; XPath 是 种功能强大语法用于在文档中搜寻元素它和 CSS 稍有区别不过它能实现功能略多于 CSS要在所有复选框父元素中添加个边框可以使用 XPath /.. 语法:$("input:checkbox/..").css('border', '1px solid #777'); jQuery 中也加入了 些 CSS 和 XPath 中没有选择器比方说要使个表更具可读性通常可以在表格奇数行或偶数行中附加个区别类名 —— 也可以称作把表分段(striping)使用 jQuery 不费吹灰的力就可以做到这点这需要归功于 odd 伪选择器下面这个例子使用 striped 类改变了表格中所有奇数行背景颜色:$('table.striped > tr  dd').css('background', '#999999'); 我们可以看到强大 jQuery 选择器是如何简化代码不论您想处理什么样元素不管这个元素是具体还是模糊都有可能找到种思路方法使用个 jQuery选择器对它们进行定义 使用插件扩展 jQuery 和大多数软件Software区别 使用个复杂 API 为 jQuery 编写插件并不是非常困难事实上jQuery 插件非常易于编写您甚至希望编写些插件来使代码更加简单下面是可以编写最基本 jQuery 插件:$.fn.donothing = function { this;}; 虽然非常简单 但是还是需要对这个插件进行些解释首先如果要为每个 jQuery 对象添加个必须把该指派给 $.fn第 2这个必须要返回个 this(jQuery 对象)这样才不至于打断 思路方法链接(method chaining)可以轻松地在这个举例的上构建 要编写个更换背景颜色插件以替代使用 css('background')可以使用下面代码:$.fn.background = function(bg){ this.css('background', bg);}; 清注意 可以只从 css 返回值已经返回了 jQuery 对象因此思路方法链接(method chaining)仍然运作良好我建议在需要重复工作 时候使用 jQuery 插件比方说如果您需要使用 each 反复执行相同操作那么可以使用个插件来完成由于 jQuery 插件相当易于编写 所以有上百种可供你选择使用jQuery 提供插件可用于制表、圆角、滑动显示、=t_tag _disibledevent=>工具提示、日期选择器以及我们可以想到切效果有关插件完整列表最为复杂、使用最为广泛 插件要属界面(Interface)它是种动画插件用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂用户界面 (User InterfaceUI)界面对于 jQuery 来说就如 Scriptaculous 对于 Prototype 样表单插件也同样流行且非常有用 通过它可以使用 Ajax 在后台中轻松地提交表单这个插件用于处理些常见情况:您需要截获某个表单提交事件找出所有区别输入字段并使用这些字段构造个 Ajax
TAG: AJAX Ajax ajax 开发 jQuery 0
相关文章
读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
