- 浏览: 238175 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
u012414590:
博主,我想问一下,webdav能否集成到自己的服务器上,打个比 ...
WebDav 测试开发笔记 -
icarusliu:
java1997 写道博主,你好,正好用到这个,能不能贴个完整 ...
关于JTextPane中进行搜索结果显示的问题及解决 -
java1997:
博主,你好,正好用到这个,能不能贴个完整的使用代码啊,谢谢
关于JTextPane中进行搜索结果显示的问题及解决 -
RangerWolf:
非常感谢啊!
wsdl文档结构 -
chenk008:
Tomcat的类加载机制
看看 Ajax 和 DOM 脚本编程究竟有多简单 |
级别: 中级 Jesse Skinner, Web 开发人员, Freelance 2007 年 5 月 16 日 jQuery 是一个JavaScript 库,它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。<!----><!----><!---->
jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言,并且希望获得一个能解决文档对象模型(Document Object Model,DOM)脚本和 Ajax 开发中一些复杂问题的库,还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家,jQuery 都会是您的首选。 jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery,您可以把握问题的要点,并使用尽可能最少的代码实现您想要的功能。 毫无疑问,jQuery 的原理是独一无二的:它的目的就是保证代码简洁并可重用。当您理解并体会这一原理后,便可以开始学习本教程了,看看 jQuery 对我们的编程方式有多少改进吧。 下面是一个简单示例,它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务,比方说为页面的某一区域中的每个链接附加一个单击(click)事件,您可以使用纯 JavaScript 代码和 DOM 脚本来实现,如 清单 1 所示。 清单 1. 没有使用 jQuery 的 DOM 脚本
清单 2 显示了使用 jQuery 实现的相同的功能。 清单 2. 使用了 jQuery 的 DOM 脚本
是不是很神奇? 使用 jQuery,您可以把握问题的要点,只让代码实现您想要的功能,而省去了一些繁琐的过程。无需对元素进行循环, 理解这一代码的工作原理可能会有一点复杂。首先,我们使用了 如果您具备 CSS 选择器的基本知识,那么应该很熟悉这些语法。在 清单 2 中,
还可以向
使用 jQuery 编写的功能相同的代码:
您可能有所体会,等待窗口加载的过程是非常缓慢而且令人痛苦的,这是因为必须等整个页面加载完所有的内容,包括页面上所有的的图片。有的时候,您希望首先完成图片加载,但是在大多数情况下,您只需加载超文本标志语言(Hypertext Markup Language,HTML)就可以了。通过在文档中创建特殊的
这个代码围绕
到目前以止,我已经向大家介绍了 清单 3. 创建和附加一个简单的段落
在前一个例子中您可能已经注意到,jQuery 中的另一个功能强大的特性就是方法链接(method chaining)。每次对 jQuery 对象调用方法时,方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法,那么您不必重新键入选择器就可以实现这一目的:使 Ajax 变得简单
使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。 Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用
通常,我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的,使用 jQuery 实现这一操作非常地简单。您可以使用 清单 4. 使用 Ajax 向页面发送数据
如果您确实需要编写一些复杂的 Ajax 脚本,那么需要用到 清单 5. $.ajax() 使 Ajax 由复杂变简单
当 success 回调函数返回 XML 文档后,您可以使用 jQuery 检索这个 XML 文档,其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易,并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了 清单 6. 使用 jQuery 处理 XML 文档
可以使用 jQuery 处理基本的动画和显示效果。 下面是一个同时变化某个元素高度和宽度的示例。请注意,这些参数没有开始值,只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。
jQuery 的内置函数使更多常见的动画更容易完成。可以使用
或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单,同时附加、移除和调用事件也十分容易,且不像手动操作那样容易出错。 从本质上说,jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 通过遍历 DOM,一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的 如果结合使用 如果配合方法链接(method chaining)一起使用,这些函数可以使复杂的操作看上去非常简单。清单 7 显示了一个示例,其中包含有一个登录表单并处理了一些与之有关的元素。 清单 7. 轻松地遍历和处理 DOM
不管您是否相信,这个示例只是一行满是空白的被链接的代码。首先,选择登录表单。然后,发现其中含有可选标签,隐藏它们,并调用 处理常见事件就像调用函数(比方说
我们经常会使用 ID 来选择元素,比如 jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多,使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表,包括 CSS 和 XPath,请参阅 参考资料 中的链接。 CSS3 包含一些并不是所有浏览器都支持的语法,因此我们很少使用它。然而,我们仍然可以在 jQuery 中使用 CSS3 选择元素,因为 jQuery 具备自己的自定义选择器引擎。比方说,要在表格中的每一个空列中都添加一个横杠,可以使用:
如果需要找出所有不含特定类的元素呢? CSS3 同样提供了一个语法可以完成这个目的,使用
与在 CSS 中一样,可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例:
XPath 是一种功能强大的语法,用于在文档中搜寻元素。它与 CSS 稍有区别,不过它能实现的功能略多于 CSS。要在所有复选框的父元素中添加一个边框,可以使用 XPath 的
jQuery 中也加入了一些 CSS 和 XPath 中没有的选择器。比方说,要使一个表更具可读性,通常可以在表格的奇数行或偶数行中附加一个不同的类名 —— 也可以称作把表分段(striping)。使用 jQuery 不费吹灰之力就可以做到这点,这需要归功于
我们可以看到强大的 jQuery 选择器是如何简化代码的。不论您想处理什么样的元素,不管这个元素是具体的还是模糊的,都有可能找到一种方法使用一个 jQuery选择器对它们进行定义。
与大多数软件不同,使用一个复杂的 API 为 jQuery 编写插件并不是非常困难。事实上,jQuery 插件非常易于编写,您甚至希望编写一些插件来使代码更加简单。下面是可以编写的最基本的 jQuery 插件:
虽然非常简单,但是还是需要对这个插件进行一些解释。首先,如果要为每一个 jQuery 对象添加一个函数,必须把该函数指派给 可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件,以替代使用
清注意,可以只从 我建议在需要重复工作的时候使用 jQuery 插件。比方说,如果您需要使用 由于 jQuery 插件相当易于编写,所以有上百种可供你选择使用。jQuery 提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器,以及我们可以想到的一切效果。有关插件的完整列表,请参阅 参考资料。 最为复杂、使用最为广泛的插件要属界面(Interface),它是一种动画插件,用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面(User Interface,UI)。界面对于 jQuery 来说就如 Scriptaculous 对于 Prototype 一样。 表单插件也同样流行且非常有用,通过它可以使用 Ajax 在后台中轻松地提交表单。这个插件用于处理一些常见的情况:您需要截获某个表单的提交事件,找出所有不同的输入字段,并使用这些字段构造一个 Ajax 调用。
我只是简要地介绍了使用 jQuery 可能完成的任务。jQuery 使用起来非常有趣,因此我们总是能学到看上去很简单的新技巧和新特性。从刚开始使用 jQuery 的那一刻起,jQuery 便可以完全简化您的 JavaScript 和 Ajax 编程;每学会一点新知识,您的代码就会更简单一点。 学习了 jQuery 之后,我在使用 JavaScript 语言进行编程的同时也获得了许多的乐趣。不用操心所有无聊的内容,我可以专注地编写有趣的内容。使用 jQuery 后,我几乎就告别了编写 学习
获得产品和技术
讨论
|
发表评论
-
类google suggestion
2009-11-26 16:34 10361. js代码: //google suggest star ... -
javascript滑动条组件
2009-04-09 10:07 2873从网上搜了一个滑动条的组件,使用方法如下: <div c ... -
javascript笔记
2008-12-22 20:48 7791.javascript中,像如下过程: var type= ... -
《实战AJAX》中重构的xmlhttpRequest调用的使用方法
2008-11-17 15:46 1606书中前三章重构了xmlhttpRequest的调用,很不错的基 ... -
下依赖于上的选择框
2008-10-30 14:22 819<script type="text/java ... -
javascript操作Select标记中options集合
2008-10-30 14:21 1355先来看看options集合的这几个方法:options.add ...
相关推荐
使用 jQuery 简化 Ajax 开发
jQuery 是一个强大的 JavaScript 库,由 John Resig 在 2006 年创建,旨在简化 DOM 操作和 AJAX 开发。通过使用 jQuery,开发者可以更高效、简洁地编写代码,减少重复工作,提高代码可读性和可维护性。在 AJAX 开发...
### 使用jQuery简化Ajax开发 #### 引言 随着网络应用的日益复杂,异步数据交换的需求也随之增加。Ajax(Asynchronous JavaScript + XML)作为一种技术,允许网页在不重新加载整个页面的情况下,通过JavaScript异步...
### 使用jQuery简化Ajax开发 #### 1. 什么是jQuery? jQuery是一个非常优秀的JavaScript库,它在2006年由John Resig创立。无论你是JavaScript的新手还是专家,jQuery都能简化DOM(Document Object Model)和Ajax的...
Ajax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zip
资源名称:jQuery简化Ajax开发内容简介:Ajax 并不是一种语言,它只是几种旧技术如 Javascript 和 XML 以及 DOM 的综合应用,全称为 Asynchronous Javascript and XML,即 异步 Javascript 和 XML...
### 使用jQuery简化Ajax开发 #### 一、简介与背景 jQuery 是一款流行的 JavaScript 库,由 John Resig 在 2006 年创建。它极大地简化了 JavaScript 的使用方式,尤其是在处理 DOM(Document Object Model)操作...
这两本书,《使用jQuery简化Ajax+开发》和《jQuery的起点教程》,是深入理解和掌握jQuery技术的重要资源。 《使用jQuery简化Ajax+开发》这本书着重于讲解如何利用jQuery优化和简化Ajax应用程序的开发。Ajax(异步...
【jQuery简化Ajax开发】 jQuery是一个高效、轻量级的JavaScript库,由John Resig于2006年创建。它的核心理念是使JavaScript编程变得更加简单和直观,特别是针对DOM操作和Ajax请求。对于初学者和经验丰富的开发者而...
使用jQuery简化Ajax开发 "Ajax"(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许页面在无需重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。"3-使用 jQuery 简化 Ajax 开发.doc...
**jQuery简化Ajax操作** 在传统的JavaScript中,处理Ajax请求通常涉及复杂的DOM操作和事件绑定。例如,要为页面上某个ID为`external_links`的区域内的所有链接添加点击事件,需要编写大量的循环和DOM操作(如...
使用 jQuery 简化 Ajax 开发(转载) jQuery 是什么? jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言...
总结起来,这个【项目组管理系统】结合了Java的稳定性和强大的功能,利用JSON进行数据交换,借助jQuery简化前端开发,并通过Ajax提供流畅的用户体验。对于想要学习Web应用开发的人来说,这是一个很好的实践案例,...