锋利的jQuery

第一章认识一下jQuery随着JavaScript的兴起，一系列JavaScript库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery，再到2007年ExtJs。可以发现，互联网正在掀起一场JavaScript风暴。在这场风暴中，jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。1.1jQuery简介jQuery是继Prototype之后又一个优秀的JavaScript库，它由JohnResig创建于2006年1月。它简化了遍历HTML文档、操作DOM、处理事件、执行动画和Ajax的操作。它独特而又优雅的代码风格改变了JavaScript程序员编写程序的设计方式和思路。不管你是网页设计师、后台开发者、业余爱好者还是项目管理者，也不管你是JavaScript初学者还是JavaScript高手，你都有很多理由去学习jQuery，因为它是面向任何人的。1.2加入jQuery1.2.1JavaScript简介JavaScript是为了适应动态网页制作的需要而诞生的一种编程语言。它是由Netscape公司开发的一种脚本语言（scriptinglanguage）。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。然而，几乎每个Web开发人员都曾有过诅咒JavaScript的经历。这个备受争议的语言受累于其复杂的称为文档对象模型(DOM)的编程模型、糟糕的实现和调试工具以及不一致的浏览器实现。直到现在，很多开发人员还认为JavaScript是一门令人厌恶的语言。随着WEB2.0的兴起，作为广泛应用于Web开发的脚本语言，JavaScript开始日益重要起来，JavaScript的复苏使一些业界领袖人物也不得不开始重新审视这种编程语言。诸如Ajax(AsynchronousJavaScript+XML)这样的编程技术让Web网页更加迷人，而完整的Web开发框架，比如ApacheCocoon（一种使用而且充分利用了XML强大功能的发布框架），则让JavaScript的应用越来越多，使其不止限于是一种用于制作Web页面的简单脚本。1.2.2JavaScript库作用及对比JavaScript库能帮助你轻松建立有高难度互动的web2.0特性的富客户端页面，它带有很多预定义的对象和实用函数。下面是目前几种流行的JavaScript库的介绍和对比：Prototype()图1-1这个算是最早成型的JavaScript库之一，它对JavaScript的内置对象（如String对象、Array对象等）做了大量的扩展。现在很多项目中都使用它，但这很大程度上是由于以前项目用了，现在不得不继续沿用。这个库可以看做是把很多好的有用的JavaScript的方法组合在一起的一个JS库，你甚至可以在你需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但也正是由于它成型年代早，在整体对于面向对象的编程思想把握上并不是很到位，导致了结构的松散。Dojo()图1-2Dojo强大之处在于它提供了很多其他JavaScript库所没有提供的功能。比如离线存储的API、生成图标的组件、基于SVG/VML的适量图形库、Comet支持等等很多优点。是非常适合企业级应用的一款JavaScript库。同时它也得到了一些大公司的支持，如IBM、SUN、BEA等。同时它的缺点也是很显著的：学习曲线陡，文档不齐全，最要命的就是API不稳定，每次升级都可能导致已有的程序失效。但从它的1.0版以后看起来，情况有所好转。未来是个很有潜力的库。YUI()图1-3这套库是Yahoo打造出来的JavaScript库。全名是TheYahoo!UserInterfaceLibrary。它提供了一些比较丰富的关于DOM操作、Ajax应用等一系列的封装。同时它还包括了几个核心的CSS等。是一套比较齐全完备的富交互网页程序工具集。本身的文档极其完备，以至于很少看到第三方写相应的文章。本身的代码编写也非常的规范，扩展性也很不错的一套库。ExtJS()图1-4ExtJS，也常简称Ext。原本是对YUI的一个扩展，主要是用于创建前端用户界面，它提供了极其丰富的组件。如今已经发展到可以利用包括jQuery在内的多种JavaScript框架作为基础库，而Ext作为界面的扩展库来使用。但由于侧重于界面，所以本身比较臃肿，不压缩的话文件上兆(MB)，所以使用之前请先考虑。请注意，Ext并非完全免费的，如果用于商业用途的话，是要付费获得授权许可的。MooTools()图1-5这是一套轻量级的JavaScript库，是一个简洁，模块化，面向对象的JavaScript框架。其语法几乎跟Prototype一样，但却提供了更强大的功能和更好的扩展性及兼容性。其模块化思想非常优秀，核心代码只有8K。用到什么模块可即时导入，即使是完整版也不超过160K。还有它彻底完全的面向对象的编程思想，语法简洁直观，文档完善。jQuery()图1-6本书的重点jQuery也同样是一个轻量级的库，它拥有强大的选择器，出色的DOM操作，可靠的事件处理、出色的兼容性，以及链式操作等等，这些优点吸引了一批批JavaScript开发者去学习它、研究它。下一节将具体介绍jQuery的优势。1.2.3jQuery的优势jQuery强调的理念是写的少，做的多(writeless,domore)。其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的Ajax都是其它JavaScript库望尘莫及的。（1）轻量级。jQuery非常轻巧，采用DeanEdwards的Packer()压缩后，只有不到30KB的大小，如果服务器端启用gzip压缩后，甚至只有16KB的大小！（2）强大的选择器。jQuery可以让操作者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。如果你需要，还可以加入插件使其支持XPath选择器！下一章我们将为你详细讲解jQuery中强大的选择器。（3）出色的DOM操作的封装。jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。第三章将为你重点介绍jQuery中优雅的DOM操作。（4）可靠的事件处理机制。jQuery的事件处理机制吸取了JavaScript专家DeanEdwards编写的事件处理函数的精华，使得jQuery处理事件绑定的时候相当的可靠。在预留退路(gracefuldegradation)方面，jQuery也做的非常不错。第四章将为你重点介绍jQuery中的事件处理。（5）完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax里，使得我们处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。第六章将为你重点介绍jQuery中的Ajax处理。（6）不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的方法都在这个对象之下。另外的一个别名$也是可以随时交出控制权的。绝对不会污染其它的对象！（7）出色的浏览器兼容性。作为一个流行的JavaScript库，浏览器的兼容性自然是必须具备的条件之一。jQuery能够在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常运行。同时修复了一些浏览器之间的差异。使你不用在开展项目前忙于建立一个浏览器兼容库而焦头烂额。（8）链式操作方式。jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可直接连写而无需重复获取对象。这一点使jQuery的代码无比优雅。请注意，在章节1.3.3中，我们将要讨论相应代码风格的问题。（9）行为层与结构层的分离。开发者不需要再去html调用事件，而是直接使用jQuery选择器选中元素，然后直接给元素添加事件。（10）丰富的插件支持。任何事物的壮大，如果没有很多人的支持，是永远发展不起来的。jQuery的易扩展性，吸引了来自全球的开发者来共同编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持。在第七章，我们将介绍目前流行的几款插件并指导大家动手编写自己的插件。（11）完善的文档。jQuery的文档是非常丰富的，现阶段多为英文文档，而中文文档较少。当然，很多热爱jQuery的团队都在为这个努力，比如图灵教育翻译的《LearningjQuery》。（12）开源。jQuery是一个开源的产品，任何人都可以自由的使用。既然jQuery拥有这么多优势，我们有什么理由不去学习它呢？下面我们就开始正式的接触它，使用它。1.3编写简单jQuery代码1.3.1配置jQuery环境获取jQuery:最新版本进入jQuery的官方网站，网址是：。在如图1-7所示左下的DownloadjQuery区域，下载最新的jQuery库（编者注：目前是1.2.6版）文件，本书所有的jQuery实例都是基于1.2.6版本进行编写。图1-7jQuery官方网站截图jQuery:库类型说明在DownloadjQuery区域，一共有三种类型的jQuery:库，分别是jQuery1.2.6(16kb,MinifiedandGzipped)、jQuery1.2.6(97kb,Uncompressed)和jQuery1.2.6(30kb,Packed)，区别如表1-1所示：表1-1jQuery库类型对比表名称大小说明jQuery1.2.6(16kb,MinifiedandGzipped)16kb经过gzip压缩，体积最小，为应用在产品、项目而准备的版本jQuery1.2.6(97kb,Uncompressed)97kb完整无压缩版本，为测试，学习和开发而准备的版本jQuery1.2.6(30kb,Packed)30kb经过Packer压缩，为不支持gzip的服务器而准备的版本表1-1几种jQuery库类型对比为统一本书的讲解，建议选择下载jQuery1.2.6(97kb,Uncompressed)版本。jQuery环境配置jquery-1.2.6.js下载完毕，将其放置在具体项目目录下即可方便地引用jQuery库。在页面中引入jQuery本书约定：本书将jquery-1.2.6.js放在目录scripts下，所提供的jQuery例子中为了方便调试，引用时使用相对路径。在实际项目中，读者可以根据实际需要调整jQuery库路径。如下程序所示，在head标签内引入jQuery库：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN!--在head标签内引入jQuery--scriptsrc=../scripts/jquery-1.2.6.jstype=text/javascript/script/headbody/body/html注意，在本书的后面所有章节中，如果没有特别说明，jQuery库都是默认导入的。1.3.2编写简单的jQuery代码环境配置好后，你也许迫不及待的想试用一下jQuery。在我们开始编写第一个jQuery程序之前，先明确一点：在jQuery库中，$就是jQuery的一个简写