WEB开发网
开发学院网页设计JavaScript 使用 jQuery 简化 Ajax 开发:看看 Ajax 和 DOM 脚... 阅读

使用 jQuery 简化 Ajax 开发:看看 Ajax 和 DOM 脚本编程究竟有多简单

 2010-03-09 00:00:00 来源:WEB开发网   
核心提示: 清单 2 显示了使用 jQuery 实现的相同的功能,清单 2. 使用了 jQuery 的 DOM 脚本$('#external_linksa').click(function(){returnconfirm('Youaregoingtovisit:'+this.

清单 2 显示了使用 jQuery 实现的相同的功能。

清单 2. 使用了 jQuery 的 DOM 脚本

$('#external_links a').click(function() { 
  return confirm('You are going to visit: ' + this.href); 
}); 

是不是很神奇? 使用 jQuery,您可以把握问题的要点,只让代码实现您想要的功能,而省去了一些繁琐的过程。无需对元素进行循环,click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。

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

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

$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组,但是它附带有大量特殊的 jQuery 函数。比方说,您可以通过调用 click 函数把 click 处理函数指定给 jQuery 对象中的所有元素。

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

上一页  1 2 3 4 5 6 7  下一页

Tags:使用 jQuery 简化

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接