使用jQuery简化Ajax开发

一些简单的代码简化

下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，如 清单 1 所示。

清单 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() { 
return confirm('You are going to visit: ' + this.href); 
}; 
} 

清单 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 尽可能高效地把这些元素找出来。