您的位置:知识库 » .NET技术

使用 jQuery 简化 Ajax 开发

作者: Jesse Skinner  来源: developerWorks 中国  发布时间: 2009-04-16 10:43  阅读: 4720 次  推荐: 0   原文链接   [收藏]  
摘要:jQuery 是一个JavaScript 库,它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。
[1] jQuery 是什么?
[2] 使 Ajax 变得简单
[3] 为 HTML 添加动画
[4] 释放 jQuery 选择器的强大能量

  释放 jQuery 选择器的强大能量

 

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

  jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多,使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表,包括 CSS 和 XPath,请参阅 参考资料 中的链接。

  CSS3 包含一些并不是所有浏览器都支持的语法,因此我们很少使用它。然而,我们仍然可以在 jQuery 中使用 CSS3 选择元素,因为 jQuery 具备自己的自定义选择器引擎。比方说,要在表格中的每一个空列中都添加一个横杠,可以使用::empty 伪选择器(pseudo-selector):

$('td:empty').html('-');

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

$('input:not(.required)').hide();

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

$('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:odd').css('background', '#999999');

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

  使用插件扩展 jQuery

  与大多数软件不同,使用一个复杂的 API 为 jQuery 编写插件并不是非常困难。事实上,jQuery 插件非常易于编写,您甚至希望编写一些插件来使代码更加简单。下面是可以编写的最基本的 jQuery 插件:

$.fn.donothing = function(){
return this;
};

  虽然非常简单,但是还是需要对这个插件进行一些解释。首先,如果要为每一个 jQuery 对象添加一个函数,必须把该函数指派给 $.fn。第二,这个函数必须要返回一个 this(jQuery 对象),这样才不至于打断 方法链接(method chaining)。
可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件,以替代使用 css('background'),可以使用下面的代码:

$.fn.background = function(bg){
return this.css('background', bg);
};

  请注意,可以只从 css() 返回值,因为已经返回了 jQuery 对象。因此,方法链接(method chaining)仍然运作良好。
我建议在需要重复工作的时候使用 jQuery 插件。比方说,如果您需要使用 each() 函数反复执行相同的操作,那么可以使用一个插件来完成。

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

  最为复杂、使用最为广泛的插件要属界面(Interface),它是一种动画插件,用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面(User Interface,UI)。界面对于 jQuery 来说就如 Scriptaculous 对于 Prototype 一样。

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

0
0

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻