锋利的jQuery(第二版).pdf

所需积分/C币:23 2017-09-30 16:06:07 40.84MB PDF
74
收藏 收藏
举报

《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧等知识点,并结合每个章节后面的案例演示进行练习,达到掌握核心知识点的目的。为使读者更好地进行开发实践,《锋利的jQuery(第2版)》的第8章将前7章讲解的知识点和效果进行了整合,打造出一个非常有个性的网站,并从案例研究、网站材料、网站结构、网站样式和网站脚本等方面指导读者参与到项目建设中来。
(jquery>>>>>>>> Prototype是最早成型的 JavaScript库之一,对 JavaScript的内置对象(例如 String对象、 Aray对象等)做了大量的扩展。现在还有很多项目使用 Prototype. Prototype可以看做是把 很多好的、有用的 JavaScript的方法组合在一起而形成的 JavaScript库。使用者可以在需要的 时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于 Prototype成型年代早,从整 体上对于面向对象的编程思想把握不是很到位,导致了其结构的松散。不过现在 Prototype 也在慢慢改进。 Dojo(htp;/ dojotoolkit org),Logo如图1-2所 Dojo的强大之处在于Dojo提供了很多其他 JavaScript库所没有提供的功能。例如离线存 储的API、生成图标的组件、基于 SVG/VML的矢量图形库和 Comet支持等等。Dojo是一款 非常适合企业级应用的 JavaScript库,并且得到了IBM、SUN和BEA等一些大公司的支持。 但是Dojo的缺点也是很明显的:学习曲线陡,文档不齐全,最严重的就是API不稳定,每 次升级都可能导致已有的程序失效。但是自从 Dojo的1.0.0版出现以后,情况有所好转, Dojo还是一个很有发展潜力的库。 YUI(http://developer.yahoocom/yui//),Logo如图1-3所示。 lOO the javascript toolkit Y!Yahoo! UI 图1-2Dojo的Logo 图1-3YUI的Logo YUI( Yahoo!UI, The yahoo!! User Interface Library),是由 Yahoo公司开发的一套完备 的、扩展性良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能,例如DOM 操作和Ajax应用等,同时还包括了几个核心的CSS文件。该库本身文档极其完备,代码编 写也非常规范。 EXtJs(Http://www.extjs.com/),Logo如图1-4所示。 Ext JS常简称为Ext,原本是对YUI的一个扩展,主要用于创建前端用户界面,如今已 经发展到可以利用包括 jQuery在内的多种 JavaScript框架作为基础库,而Ext作为界面的扩 展库来使用。Ext可以用来开发富有华丽外观的富客户端应用,能使B/S应用更加具有活力。 但是由于Ext侧重于界面,本身比较臃肿,所以使用之前请先权衡利弊。另外,需要注意的 是,Ext并非完全免费,如果用于商业用途,需要付费获得授权许可。 Moo Tools(htp:/ mootools. net/),Logo如图1所示。 Moo Tools是一套轻量、简洁、模块化和面向对象的 JavaScript框架。 MooTools的语法几 乎跟 Prototype一样,但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非 常优秀,核心代码大小只有8KB。无论用到哪个模块都可即时导入,即使是完整版大小也不 超过160KB。 Moo Tools完全彻底的面向对象的编程思想,语法简洁直观,文档完善,是一个 非常不错的 JavaScript库。 jQuery(htp:/jquery.com),Logo如图1-6所示。 <<<<第7章认识 jQuery AExt s mootoot's Query 图1-4 Ext js的Logo 图1-5 Moo Tools的Logo 图1-6 jQuery的Logo 本书的重点 jQuery同样是一个轻量级的库,拥有强大的选择器,出色的DOM操作,可 靠的事件处理、完善的兼容性和链式操作等功能。这些优点吸引了一批批的 Javascript开发 者去学习它、研究它。 总之,每个 JavaScript库都有各自的优点和缺点,同时也有各自的支持者和反对者。看 看目前几个最流行的 JavaScript库的Goge访问量趋势图,如图1-7所示。很明显,自从 jQuery 诞生那天起,其关注度就一直在稳步上升, jQuery已经逐渐从其他 JavaScript库中脱颖而 出,成为Web开发人员的最佳选择。 比例是以“ prototype在在所有年份的全球平均访问量为基础的。了解详情 prototype 1.00 extis m0.08 yuI o es mootools -0.12 jquery "0.4 搅索量指数 Googie Trends ECLE 004 2005 -0 00 200自 图1-7各种 JavaScript库的 Google访问量趋势图 @注 读者可以通过链接htt:/www.google.com/trends?q=prototype2Extjs%2Cyui 2Cmo0ol2 Ciquery&hl=zhCN来查找更多相关搜索量指数 12加入 jQuery 12.1 jQuery简介 Query是继 Prototype之后又一个优秀的 JavaScript库,是一个由 John Resig创建于 2006年1月的开源项目。现在的 jQuery团队主要包括核心厍、UI和插件等开发人员以及 推广和网站设计维护人员。团队中有3个核心人物: John Resig、 Brandon Aaron和Jorn Zaefferer。 jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了 JavaScript开发人员遍历HTML 文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改 变了 JavaScript程序员的设计思路和编写程序的方式。总之,无论是网页设计师、后台开发 ( jquery>>>>> 者、业余爱好者还是项目管理者,也无论是 JavaScript初学者还是 Javascript高手,都有足够 多的理由去学习 jQuery。 122 jQuery的优势 jQuery强调的理念是写得少,做得多( write less, do more)。 jQuery独特的选择器、链 式的DOM操作、事件处理机制和封装完善的Aax都是其他 JavaScript库望尘莫及的。概括 起来, jQuery有以下优势。 (1)轻量级。 jQuery非常轻巧,采用 Dean edwards编写的 Packer(hp:!/ dean edwards. name/ packer/) 压缩后,大小不到30KB。如果使用Min版并且在服务器端启用Gzip压缩后,大小只有 18KB。 (2)强大的选择器。 JQuery允许开发者使用从CSS到CSS3几乎所有的选择器,以及 jQuery独创的高级而 复杂的选择器。另外还可以加入插件使其支持 XPath选择器,甚至开发者可以编写属于自己 的选择器。由于 jQuery支持选择器这一特性,因此有一定CSs经验的开发人员可以很容易 地切入到 jQuery的学习中来。第2章将详细讲解 jQuery中强大的选择器。 (3)出色的DOM操作的封装。 jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够 得心应手。 JQuery轻松地完成各种原本非常复杂的操作,让 JavaScript新手也能写出出色的 程序。第3章将重点介绍 jQuery中的DOM操作。 (4)可靠的事件处理机制 jQuery的事件处理机制吸收了 JavaScript专家 Dean Edwards编写的事件处理函数的精 华,使得 jQuery在处理事件绑定的时候相当可靠。在预留退路( graceful degradation)、循序 渐进以及非入侵式( Unobtrusive)编程思想方面, jQuery也做得非常不错。第4章将重点介绍 jQuery中的事件处理。 (5)完善的Ajax。 jQuery将所有的Ajax操作封装到一个函数$aaxO里,使得开发者处理Ajax的时候能够 专心处理业务逻辑而无需关心复杂的浏览器兼容性和 XmlhtTprequEst对象的创建和使用的 问题。第6章将重点介绍 jQuery中的Ajax处理。 (6)不污染顶级变量。 jQuery只建立一个名为 jQuery的对象,其所有的函数方法都在这个对象之下。其别名S 也可以随时交出控制权,绝对不会污染其他的对象。该特性使 jQuery可以与其他 JavaScript 库共存,在项目中放心地引用而不需要考虑到后期可能的冲突。 (7)出色的浏览器兼容性 作为一个流行的 Javascript库,浏览器的兼容性是必须具备的条件之一。 jQuery能够在 IE60+、FF2+、 Safari2.0和 Opera9.0+下正常运行。 jQuery同时修复了一些浏览器之间的 <<<第章认识uery 差异,使开发者不必在开展项目前建立浏览器兼容库。 (8)链式操作方式。 jQuery中最有特色的莫过于它的链式操作方式—即对发生在同一个 jQuery对象上 的一组动作,可以直接连写而无需重复获取对象。这一特点使 jQuery的代码无比优雅 在第1.3、3小节中,将要讨论代码风格的问题,从最开始就培养良好的编程习惯,将受益 无穷。 (9)隐式迭代 当用 jQuery找到带有“ my Class”类的全部元素,然后隐藏它们时,无需循环遍历每一 个返回的元素。相反, jQuery里的方法都被设计成自动操作对象集合,而不是单独的对象, 这使得大量的循环结构变得不再必要,从而大幅地减少了代码量。 (10)行为层与结构层的分离。 开发者可以使用 jQuery选择器选中元素,然后直接给元素添加事件。这种将行为层与结 构层完全分离的思想,可以使 jQuery开发人员和HTML或其他页面开发人员各司其职,摆 脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要在HTML代码 中寻找某些函数和重复修改HTML代码。 (11)丰富的插件支持。 jQuery的易扩展性,吸引了来自全球的开发者来编写 jQuery的扩展插件。目前己经有超 过几百种的官方插件支持,而且还不断有新插件面世。第7章将介绍目前流行的几款插件并 指导大家编写自己的插件。 (12)完善的文档。 jQuery的文档非常丰富,现阶段多为英文文档,中文文档相对较少。很多热爱 jQuery的 团队都在努力完善 jQuery的中文文档,例如 jQuery的中文AP,图灵教育翻译的《 Learning jQuery》等等。 (13)开源。 jQuery是一个开源的产品,任何人都可以自由地使用并提出改进意见。 下面就正式开始我们的 jQuery之旅。 1.3 jQuery代码的编写 1.3.1配置 jQuery环境 1.获取 jQuery最新版本 进入 j Query的官方网站htp/ jquery. com/。在图1:8所示右边的 GRAB THE LATEST VERSION区域,下载最新的 jQuery库(目前是1.3.1版本)文件,本书所有的 jQuery实例 都是基于1.2.6版本进行编写的 jquery>>>>>>>> jqUery Download Documentation Tutorials Bus Tracker Discuss jQuery is a new kind of Javascript Library GRAB THE LATEST VERSIONI jquery is a fast and concise JavaScript Library that simplifies HTML CHOOSE YOUR COHPRESSION LEWEL: document traversing, event handling, animating, and Ajax interactions for FcTN,相时性 rapid web development, jQuery is designed to change the way that you DEVELOPMENT (fHAb, ComPr write JavaScript. Download( jquery ): v Lightweight Footprint v cSS3 Complant v Cross-brewser Curent oleo验 图1-8 jQuery官方网站截图 2. jQuery库类型说明 jQuery库的类型分为两种,分别是 jQuery1.3.1(18KB, Minified and Gzipped)和ju Query 131(114KB, Uncompressed),读者可以在htp/ code. google. com/p/jqueryjs/downloads/list 地址中获取最新的两种类型的 jQuery库,它们的区别如表1-1所示 表1-1 几种 jQuery库类型对比 名称 大小 说明 jquery-1.3.I js 11KB完整无压缩版本,主要用于测试、学习和开发。 经过 ISMin等工具压缩后的版本,大小为54KB。如果服务器 jquery-1.3.1.min js 54KB/8KB开启Gi压缩后,大小将变为只有18KB,成为体积最小的版 本。主要应用于产品和项目 为统一本书的讲解,建议选择下载 Jquery-1.3ljs(114KB)版本 3. jQuery环境配置 Query不需要安装,把下载的 jquery-1.3.1js放到网站上的一个公共的位置,想要在某 个页面上使用 jQuery时,只需要在相关的HTML文档中引入该库文件的位置即可。 4.在页面中引入 jQuery 本书将 Jquery-1.3.1js放在目录 scripts下,在所提供的 jQuery例子中为了方便调试,引 用时使用的是相对路径。在实际项目中,读者可以根据实际需要调整 jQuery库路径。 在编写的页面代码中<head>标签内引入 jQuery库后,就可以使用 jQuery库了,程序 如下: < DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/tr/xhtm11/dtd/xhtml1-strict.dtA"> <<<第章认识 jQuery <html> <head> <!-在head标签内引入 JQuery--> <script src="./scripts/jquery-131. js"type="text/javascript"> </sc工ipt> </head> <body> </body> </html> 注意在本书的所有章节中,如果没有特别说明, jQuery库都是默认导入的 132编写简单的 jQuery代码 在开始编写第1个 jQuery程序之前,首先应该明确一点,在 jQuery库中,S就是 jQuery 的一个简写形式,例如$("#fo0)和 jQuery("#fo)是等价的,saax和 jQuery. ajax是等 价的。如果没有特别说明,程序中的$符号都是 jQuery的一个简写形式。 下面开始编写第1个 jQuery程序。 <html> <head> <metahttp-equiv="content-type"content="text/htmlicharset=utf-8"/> <title>1-1</title> <!--引入 jQuery--> <script src=". /scripts/jquery-13 1. js type="text/javascript"> </scrip <script type=text/javascript"> S(document). ready(function()( //等待dom元素加载完毕 alert("Hello World!")i //弹出一个框 </script> </head> <body> </body> </html> 运行结果如图1-9所示。 在上面的代码中有一个陌生的代码片段,如下: 7喝 (jQuery >>>>>>> 用君 Hello world 确定 图1-9输出 Hello World! S(document). ready (function()( //… ) 这段代码的作用类似于传统 JavaScript中的 window, onload方法,不过与 window. onload 还是有些区别。表格1-2对它们进行了简单对比。 表1-2 window. onload与s( document, ready的对比 window. onload $(document). ready 执行时机必须等待网页中所有的内容加载完毕后网页中所有DOM结构绘制完毕后就执行,可 (包括图片)才能执行 能DOM元素关联的东西并没有加载完 不能同时编写多个 能同时编写多个 以下代码无法正确执行: 以下代码正确执行: window. onload= function () S(document).ready (function()1 alert("testl") alert("Hello World! " )i 编写个数} window. onload= function ()i S(document). ready(function ()t alert("test2") alert("Hello again! " )i }); 结果只会输出“test2” 结果两次都输出 S(document). ready(function ()i }) 简化写法无 可以简写成: S( function() }) 注意关于S( document) ready的详细说明可以参考附录A;关于$( document, ready和 window . onload的详细对比,可以参考第4章4.1.1小节 1.33 jQuery代码风格 如果能统一 jQuery代码编码风格,对日后代码的维护是非常有利的。 <<<<<<<< 第章认识 jQuery 1.链式操作风格 以一个实际项目中的代码为例,这是一个导航栏,HTML代码如下: <I DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtD/xHtmll-transitional.dtd"> <html> <head> <metahttp-equiv="content-type"content=text/htmlicharset=utf-8"7> <title>1-5-1</title> <style type="text/css"> #menu i width: 300px: I has_childrenI background: #555: color: #fff; cursor: pointer; h highlight color #fff: background green; F divipadding: 0; margin: 10px 0: F divatbackground: #888:display: none; float: left; width: 300px; H </style> </head> <body> <div id="menu") <div class=has children"> <pan>第1章认识 jQuery</span> <a>1.1- JavaScript和 JavaScript库</a> <a>1.2-加入 jQuery</a> <a>1.3-编写简单j@uery代码</a> >1.4- JQuery对象和DoM对象</a> <a>1.5-解决 jQuery和其它库的冲突</a> <a>1,6- jQuery开发工具和插件</a> 1.7-小结</a> </div> <div class="has children"> <span>第2章- jQuery选择器</span> a>2.1- jQuery选择器是什么</a> <a>2.2- j Query选择器的优势</a> <a>2.3- jQuery选择器</a <a>2.4-应用 jQuery改写示例</a> <a>2.5-选择器中的一些注意事项</a>

...展开详情
试读 127P 锋利的jQuery(第二版).pdf
立即下载
限时抽奖 低至0.43元/次
身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
上传资源赚钱or赚积分
最新推荐
锋利的jQuery(第二版).pdf 23积分/C币 立即下载
1/127
锋利的jQuery(第二版).pdf第1页
锋利的jQuery(第二版).pdf第2页
锋利的jQuery(第二版).pdf第3页
锋利的jQuery(第二版).pdf第4页
锋利的jQuery(第二版).pdf第5页
锋利的jQuery(第二版).pdf第6页
锋利的jQuery(第二版).pdf第7页
锋利的jQuery(第二版).pdf第8页
锋利的jQuery(第二版).pdf第9页
锋利的jQuery(第二版).pdf第10页
锋利的jQuery(第二版).pdf第11页
锋利的jQuery(第二版).pdf第12页
锋利的jQuery(第二版).pdf第13页
锋利的jQuery(第二版).pdf第14页
锋利的jQuery(第二版).pdf第15页
锋利的jQuery(第二版).pdf第16页
锋利的jQuery(第二版).pdf第17页
锋利的jQuery(第二版).pdf第18页
锋利的jQuery(第二版).pdf第19页
锋利的jQuery(第二版).pdf第20页

试读结束, 可继续阅读

23积分/C币 立即下载