使用jQuery简化Ajax开发——Ajax开发入门.doc

使用jQuery简化Ajax开发——Ajax开发入门
jQuery是一个可以简化JavaScript™以及HYPERLINK"javascript:;"\t"_self"AJAX（AsynchronousJavaScript+HYPERLINK"javascript:;"\t"_self"XML，异步Javascript和XML）编程的Javascript库。不同于其他的Javascript库，jQuery有他自己的哲学，使你可以很简单的编写HYPERLINK"javascript:;"\t"_self"代码。这篇文章就会带领你见识一下jQuery的哲学，探讨一下他的特性以及功能，并且会做一些ajax的示例，以及如何使用plug-in（插件）来扩展jQuery。1.什么是jQuery？jQuery是个很优秀的Javascript库，它诞生于2006年，出自JohnResig之手。不管你是一个HYPERLINK"http://www.yeeyan.com/articles/tag/javascript"\t"_blank"javascript新手，但是却想尝试一下DOM（DocumentObjectModel）以及Ajax的繁杂，抑或你是个javascript专家级人物，但是已经厌倦了反复的重复那无味的DOM以及Ajax脚本，jQuery都将是你的不二选择。jQuery会帮助你保持代码的简单和简洁。你不必再去写一大堆重复的循环或者是DOM调用脚本，使用jQuery，你将很快找到关键点，并且可以以最少的代码表达你的思想。jQuery的哲学其实很单一：简单、可重用。当你理解并且认同这种思想的时候，你就可以开始体会一下使用jQuery能让你的编程变得多么轻松愉快了！2.一些简单概念这里是个简单的例子，向你展示jQuery如何影响你编写的代码。做的事情其实很简单，比如对页面上某一区域内的所有链接都添加一个click响应事件，你可以使用一般的Javascript以及DOM来写，代码见Listing1：Listing1.DOMscriptingwithoutjQuery
varexternal_links=document.getElementById('external_links');varlinks=external_links.getElementsByTagName('a');for(vari=0;i<links.length;i++){varlink=links.item(i);link.onclick=function(){returnconfirm('Youaregoingtovisit:'+this.href);};}如果使用jQuery的话实现如下：Listing2.DOMscriptingwithjQuery $('#external_linksa').click(function(){returnconfirm('Youaregoingtovisit:'+this.href);});很惊讶，是吧？使用jQuery的话，你可以很快找到关键点，并且只需要表达你需要表达的，而不需要罗里罗嗦。不需要对这些元素进行循环，click()函数可以处理好这一切。而且你不要谢太多的操作DOM的代码，你需要的仅仅是使用很少的字符定义你要找的那个元素。来看一下这段代码是如何HYPERLINK"javascript:;"\t"_self"工作的，有点小技巧。首先，看到$()函数--jQuery里最有用的最强大的函数.大部分情况下,你使用这个函数从文档中选择元素.在这个例子中,使用这个函数传递带有一些级联样式表(CascadingStyleSheets,CSS)语法的字符串,jQuery可以很方便的找到这个元素.如果你懂一点基本的HYPERLINK"javascript:;"\t"_self"CSS选择符的只是,我想这个语法应该看起来相当熟悉.在Listing2中,#external_links用来寻找带有id为external_links的元素.接下来的空格表示jQuery要找到在#external_links元素内的所有的<a>元素.用口语开表达的话有点费劲--用DOM脚本来写也挺麻烦,不过,在CSS里,没有比这个更简单的了.
$()函数返回一个包含与css选择符匹配的所有元素的一个jQuery对象.jQuery对象的概念就像是数组,但是它可能含有许多jQuery函数.举例来说,你可以调用click函数来绑定一个click事件响应到jQuery对象中的每个元素上.你还可以向$()函数传递一个元素或者是元素的数组,它将把所有的元素打包成一个jQuery对象.你可能想要把这一特性应用到象窗口HYPERLI