搜索
JQuery文档一、认识jQuery随着Web2.0的兴起，JavaScript越来越受到重视，一系列的JavaScript库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery，再到2007年的ExtJS，互联网正在掀起一场JavaScript风暴。jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。1.1JavaScript和JavaScript库1.1.1JavaScript简介在正式介绍jQuery之前，有必要先了解一下JavaScript。JavaScript是Netscape公司开发的一种脚本语言（scriptinglanguage）。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含更多活跃的元素和更加精彩的内容。JavaScript自身存在3个弊端，即复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。正当JavaScript从开发者的视线中渐渐隐去时，一种新型的基于JavaScript的Web技术-Ajax（AsynchronousJavaScriptAndXML，异步的JavaScript和XML）诞生了。而使人们真正认识到Ajax技术的强大的导火索是Google公司推出的一系列新型Web应用，例如Gmail、GoogleSuggest和GoogleMap等。互联网基于JavaScript的应用也越来越多，使JavaScript不再是一种仅仅用于制作Web页面的简单脚本。1.1.2JavaScript库作用及对比为了简化JavaScript的开发，一些JavaScript库诞生了。JavaScript库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。下面是目前几种流行的JavaScript库的介绍和对比。Prototype：Prototype是最早成型的JavaScript库之一，对JavaScript的内置对象（例如String对象、Array对象等）做了大量的扩展。现在还有很多项目使用Prototype。Prototype可以看做是把很多好的、有用的JavaScript的方法组合在一起而形成的JavaScript库。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于Prototype成型年代早，从整体上对于面向对象的编程思想把握不是很到位，导致了其结构的松散。不过现在Prototype也在慢慢改进。Dojo：Dojo的强大之处在于Dojo提供了很多其他JavaScript库所没有提供的功能。例如离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等等。Dojo是一款非常适合企业级应用的JavaScript库，并且得到了IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺点也是很明显的：学习曲线陡，文档不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。但是自从Dojo的1.0.0版出现以后，情况有所好转。Dojo还是一个很有发挥潜力的库。YUI：YUI是由Yahoo公司开发的一套完备的、扩展项良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等，同时还包括了几个核心的CSS文件。该库本身文档极其完备，代码编写也非常规范。ExtJS：ExtJS常简称为Ext，原本是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的各种JavaScript框架作为基础库，而Ext作为界面的扩展库来使用。Ext可以用来开发富有华丽外观的富客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于界面，本身比较臃肿，所以使用之前请先权衡利弊。另外，需要注意的事，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。MooTools：MooTools是一套轻量、简洁、模块化和面向对象的JavaScript框架。MooTools的语法几乎和Prototype一样，但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀，核心代码大小只有8KB。无论用到哪个模块都可及时导入，即使是完整版大小也不超过160KB。MooTools完全彻底的面向对象的编程思想，语法简洁直观，文档完善，是一个非常不错的JavaScript库。jQuery：jQuery同样是一个轻量级的库，拥有强大的选择器，出色的DOM操作，可靠的事件处理、完善的兼容性和链式操作等功能。这些优点吸引了一批批的JavaScript开发者去学习它、研究它。总之，每个JavaScript库都有各自的优点和缺点，同时也有各自的支持者和反对者。自从jQuery诞生那天起，其关注度就一直在稳步上升，jQuery已经逐渐从其他JavaScript库中脱颖而出，成为Web开发人员的最佳选择。1.2jQuery1.2.1jQuery简介jQuery是继Prototype之后有一个优秀的JavaScript库，是一个由JohnResig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。团队中由3个核心人物：JohnResig、BrandonAaron和JornZaefferer。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业余爱好者是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都又足够都的理由去学习jQuery。1.2.2jQuery的优势jQuery强调的理念是写的少，做得多(writeless，domore)。jQuery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。概括起来，jQuery有以下优势。(1)轻量级。jQuery非常轻巧，采用DeanEdwards编写的Parker压缩后，大小不到30KB。如果使用Min版并且在服务器启用Gzip压缩后，大小只有18KB。(2)强大的选择器。jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易地切入到jQuery的学习中来。(3)出色的DOM操作的封装。jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。(4)可靠的事件处理机制吸取了JavaScript专家DeanEdwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路(gracefuldegradation)、循序渐进以及非入侵式(Unobtrusive)编程思想方法，jQuery也做的非常不错。(5)完善的AjaxjQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。(6)不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存，在项目中放心的引用而不需要考虑到后期可能的冲突。(7)出色的浏览器兼容性。作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。jQuery能够在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常运行。jQuery同时修复了一些浏览器之间的差异，是开发者不必在开展项目前建立浏览器兼容性。(8)链式操作方式。jQuery中最有特色的莫过与它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连接写而无需重复获取对象。这一特点使jQuery的代码无比优雅。(9)隐式迭代当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量。(10)行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。(11)丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还不断有新插件面世。(12)完善文档。jQuery的文档非常丰富，现阶段多为英文文档，中文文档相对较少。很多热爱jQuery团队都在努力完善jQuery的中文文档，例如jQuery的中文API，图灵教育的翻译的《LearningjQuery》等等。(13)开源。jQuery是一个开源的产品，任何人都可以自由地使用并提出改进意见。1.3jQuery代码的编写JQuery不需要安装，把下载的jquery-1.4.1.js放到网站上的一个公共的位置，想要在某各页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件即可。在实际项目中，读者可以根据实际需要调整jQuery库路径。1.3.1第一个jQuery程序（HelloWorld！）在开始编写第一个jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)是等价的，如果没有特殊说明，程序中的$符号都是jQuery的一个简写形式。第一个jQuery程序的主要代码如下：运行结果如图1-1所示。图1-1输出HelloWorld在上面的代码中有一个陌生的代码片段，如下：$(document).ready(function(){//…………});这段代码的作用类似于传统JavaScript中的window.onload方法，不过与window.onload还是有些区别。表格1-1对它们进行了简单对比。表1-1window.onload与$(document).ready()的对比Window.onload$(document).ready();执行时机必须等待网页中所有内容加载完毕后(包含图片)才能执行网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完编写个数不能同时编写多个以下代码无法正确执行：window.onload=function(){能同时编写多个以下代码正确执行$(document).ready(function(){alert(test1)};window.onload=function(){alert(test2)};结果只会输出“test2”alert(HelloWorld!);});$(document).ready(function(){alert(Helloagain!);});结果两次都输出简化写法无$(document).ready(function(){…………….})简写成：$(function(){……………..})1.4jQuery对象和DOM对