精彩绝伦的jQuery——第一章：认识jQuery

jQuery是一个JavaScript库，它通过封装原生JavaScript函数得到了一整套定义好的方法。这些方法能有效地帮助Web设计师和开发者快捷编写和扩展JavaScript交互组件。jQuery没有提供任何新的功能，它最大的贡献是把JavaScript难懂难用的API整理成了易懂易用的jQuery语法，从而赢得了无数的用户。 在本章中，我们一起了解JavaScript库带来了哪些便利，有哪些与jQuery近似的库，并深入了解jQuery的特性，搞清是哪些因素造就了伟大的jQuery。 1.1　探索JavaScript库 构建在原生JavaScript指令上的常用函数构成了库，库使得Web设计师和开发者能方便地增强页面的交互能力及可用性。 我们可以把库当成一种框架或者蓝图，指导构建Web站点的一套规则或者指南。对设计师和开发者来说，使用JavaScript库写代码更容易——库是一个起点。有很多流行的库，如Prototype、MooTools﹑Dojo﹑YUI，当然还有本书的主角jQuery，它们被广泛应用于网络的每个角落。不同的库侧重点有所不同，jQuery擅长操作维护DOM（Document Object Model ，文档对象 模型）。 DOM实际上把代表Web页面的HTML代码表示成一个树形结构，其中每个枝杈都是属于一个层次结构的、彼此连接的一个节点。绝大多数情况下都通过CSS访问这些节点（设置样式），或借助选择器通过JavaScript访问它们。HTML标准委员会制定了维护HTML Web页面的API（Application Programming Interface，应用编程接口），也就是DOM，供Web设计师和开发者使用。HTML5为DOM补充了一些新的API，这些API能为因特网提供更好的用户体验。当网页完全加载之后，DOM就准备好和用户进行交互了。 通过在页面中包含一个库文件，设计师和开发者就可利用库中提供的特制方法扩展DOM。 1.1.1　JavaScript库优于传统解决方案之处 使用JavaScript库最大的好处是能避开那些乏味的非交互内容，利用库提供的大量方法扩展Web页面。 JavaScript库让Web设计师和开发者能够更方便地处理特效﹑动画﹑事件﹑Ajax及用户交互组件，从而提高开发效率。Web设计师和开发者不必局限于库提供的功能，完全可以自己实现需要的功能。 对那些了解DOM的Web设计师来说，与使用原生JavaScript的有限API相比，使用JavaScript库操作DOM更加简单。 如果没有JavaScript库，使用原生JavaScript实现同样的功能，那么我们将不得不花费数个小时，度过漫漫长夜，苦苦编程、测试、捉“虫”，最后写出长得吓人的代码。JavaScript库能有效、大幅地减少代码数量，比如实现同一目标时，若使用原生JavaScript需要写400行代码，而使用库的话则可能只需要写100行甚至更少。 使用JavaScript库的另一个好处是可以避免重复代码。因为要写一些JavaScript函数来完成相似的任务时，我们往往最终收获许多相似的代码，但如果用上了JavaScript库，你就能消除绝大部分的重复代码。 1.1.2　主流JavaScript库 目前，大约有20个（目前开发活跃的）JavaScript库，其中有5个库最流行，它们是YUI、Prototype、MooTools、Dojo和本书的主角jQuery。它们之所以脱颖而出，是因为很好用，并且都有着巨大的用户群。绝大多数库之间的差异主要在于库的体积及浏览器支持程度不同。 我即将探讨的5个库都是开源项目，这意味着每个人都可以为这些库贡献源代码。微软的软件是不开源的，是专属于微软公司的软件。微软公司雇用程序员开发软件，然后销售这些软件并收取授权费。交纳授权费之后，软件用户通常在一定期限之内有权使用这些软件，并且可在遇到麻烦时从微软公司得到帮助。 开源软件与之不同。任何人都能够下载源代码并对其进行改进，这样会造就更好的代码。因为所有的代码都是由志愿者写就的，而所有志愿者拥有同一个目标——写出更好的软件（而不是赚钱）。由于不必支付任何费用，这些库尽可随意使用。网上的开源社区极为庞大，有数百万用户通过博客或论坛贡献内容，而今Web设计师和开发者在遇到问题时可非常容易地得到支持。 在学习JavaScript库的过程中要牢记一点，你正在学习的库就像一种新语言——没错，它确实是JavaScript语言的另一种演绎。 1. YUI YUI（Yhaoo! User Interface，雅虎用户界面）JavaScript库由雅虎开发者网络于2005年发布，它采用的是BSD许可证。BSD许可证允许以极其自由的方式传播软件，与其他类似许可证（如GNU GPL）相比，BSD许可证对软件传播的限制最少。YUI完全兼容IE 6+、Firefox 3+、Safari 3+以及Opera 10+。 YUI库文件的总大小约31 KB。 为了让你了解一下YUI代码是个什么样子，下面列出了一段JavaScript代码，它演示了如何使用YUI库实现click事件。这段代码中的click事件分为两部分：一个是click事件发生时被调用的函数，一个是click事件本身。这些代码因为使用了YUI专用语法显得不那么优雅。 function handleClick(e) { Y.log(e); } YUI().use('node-base', function(Y) { Y.on("click", handleClick, "#foo"); }); 2. Prototype Prototype库由Sam Stevenson创建。由于是和非常流行的Web快速开发框架Ruby on Rails绑定发布的第一个JS框架，它很快流行起来。由于它是Ruby on Rails的一部分，我总感觉它并不适合Web设计师，而是更适合专业Web开发者结合Ruby on Rails使用。 Prototype库是一个包含Ajax功能的基础库，随着它的辅助库Scriptaculous的加入，Prototype库的功能越来越丰富。Scriptaculous负责提供特效及用户界面元素，是一个只能与Prototype一起使用的库。Prototype库的主要缺点在于尺寸：所有JavaScript文件加起来大约有278 KB。 对没有多少经验的前端开发者来说，Prototype和Scriptaculous库的文档是相当难以理解的。和其他库一样，Prototype也有一个技术支持社区。不过由于它的语法相当复杂，Prototype终究是一个难以学习的库。为了让你感受一下Prototype代码，下面的代码演示了如何使用Prototype库处理click事件。这里的click事件用法看上去与jQuery中的非常类似，别让表象欺骗了你——Prototype中许多的其他方法代码要比这个复杂得多，而且看起来不太像jQuery。 $("foo").observe("click", function() { alert('Clicked!'); }); 3. MooTools MooTools库首次发布于2006年，与Prototype有相似之处——语法（相对复杂）适合中高级Web设计人员和开发人员。MooTools是一个面向对象的框架，它以面向对象的方式增强了JavaScript API，也为Web页面提供一些人机交互功能。MooTools适合那些喜欢纯净JavaScript的人。 下面是使用MooTools库处理click事件的代码示例： $('foo').addEvent('click', function() {}); 4. Dojo Dojo最早的版本发布于2004年，它的设计目标是创建兼容各种浏览器的Web应用，为站点平滑地添加交互功能。Dojo的语法相当复杂，给人的感觉就是在写原生JavaScript，它针对的用户群是那些有经验的前端开发人员，它的用法和思想不太适合初学者。 下面是使用Dojo库处理click事件的代码示例： fooNode = dojo.byId("foo"); fooConnections = []; fooConnections.push(dojo.connect(fooNode, 'onclick', foo)); 看看前面这些例子，这些JavaScript库的语法相当吓人。现在我们看看jQuery怎么处理click事件： $('#foo').click(function() { //单击事件 }); 1.1.3　jQuery的高明之处 jQuery天生“聪敏过人”。比较一下前面的代码示例，显然jQuery版本最简洁，也最容易理解。这是jQuery的高明之处——简单直接。没有多余的雕饰，没有费解的代码，写jQuery不需要专业的后端编程知识，不过这并不是说jQuery只能干点简单的小活。 图1-1展示的是jQuery官方网站http://jquery.com。 图1-1　jQuery官方网站 1. jQuery简史 jQuery发布于2006年，其创建者John Resig受够了当时那些复杂的JavaScript库，因此发明了jQuery。jQuery让Web设计师和开发者能够用更简洁的代码处理Web站点上的高级JavaScript功能。 jQuery做到了无需专业编程技能就能处理DOM，这相当了不起。当然，jQuery在某些高级领域也需要使用者具备一定的JavaScript基础，比如在表单内使用Ajax方法获取内容或提交内容（参见第9章）、编写jQuery插件（参见第11章），以及创建移动Web站点（参见第10章）。 在过去的4年里，我认识的几乎每一位设计师或开发者都在一些领域使用或曾经用过jQuery。当我问他们为什么选择jQuery时，他们往往反问：“还有比它更容易的吗？”使用jQuery是如此容易，这着实吸引了大量的用户。借助jQuery，你无需拥有计算机科学硕士学位，一样能够通过Ajax提交表单。 jQuery库擅长处理哪些事？答案是使用原生JavaScript API能做的任何事。我会在本书中深入讲解jQuery的各个功能，这里先概要地列出jQuery的主要功能。 事件处理：鼠标、键盘、表单及用户交互。 特殊效果：显示／隐藏、滑动、淡入淡出、自定义动画。 动画：允许使用CSS和原生效果移动页面元素。 Ajax：使用XML或JSON与服务器端表单处理交互。 易于扩展：编写插件扩充jQuery核心API。 处理DOM。 处理CSS。 实用功能：浏览器检测及更容易使用常用的JavaScript功能。 2. jQuery用户 jQuery的主流用户群是Web设计师和开发者。jQuery广泛用于各种站点，包括中小型站点和成熟的企业站点。jQuery是自由软件，因此大多数的设计师和开发者都用它。它让那些从来没写过程序的Web设计师尝到了使用JavaScript的甜头，开始为自己的站点添加一些很酷的效果。 自从谷歌和微软开始为jQuery提供文件托管服务，jQuery风头更盛。所谓托管服务就是将文件存放到一个Web服务器上——换言之就是将文件存放到CDN（Content Delivery Network，内容分发网络）上——从而为使用该文件的站点提供更好的性能。谷歌和微软的这一举动表明，在开源的JavaScript库社区当中，jQuery当之无愧成为推荐使用的主流JavaScript库。谷歌、BBC、戴尔、美国银行、美国职业棒球大联盟、NBC和Netflix，这只是日益增多的、在开发Web站点方面使用jQuery库的一部分大公司。多年以来，Netflix这家通过直发电子邮件和网上渠道经营电影租赁业务的Web站点，一直利用高级JavaScript技术来驱动用户界面。图1-2展示了一个用jQuery创建的菜单（当鼠标悬停在电影标题上时该菜单会自动出现），这样用户无需离开这个页面就可以看到更多的信息。 3. 如何使用jQuery jQuery很容易使用。和使用其他JavaScript库一样，需要将库包含到页面的<head></head>标签之间。下面的代码演示了如何把jQuery库包含到站点： <!doctype html> <html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"></script> </head> <body> jQuery </body> </html> 图1-2　Netflix 站点 把jQuery库添加到页面之后，你就可以使用jQuery API通过DOM访问页面的不同部分。对绝大多数Web设计师和开发者而言，这些工作他们很熟悉。如果你是一名Web设计师，很可能天天和它打交道，却没有注意到它的存在。 你还可以使用jQuery往页面中添加或从中删除HTML，并响应用户在页面上的行为，比如单击一个链接或者填写一张表单。你也可以创建动画或使用Ajax，通过Web服务将内容发送到服务器或从服务器载入内容，而根本不需要刷新页面。 4. jQuery的优势 今天的Web站点已经不再仅仅是文本、图片和到其他页面的一个个链接了。在Facebook、谷歌、微软、推特和Foursquare（我只是在这里随便说上几个）的带动下，因特网用户对Web站点的期望值越来越高。技术日新月异，而使用jQuery有助于跟上这快速的步伐。jQuery是一个有助于快速开发Web站点和应用的库，它让我们把精力集中到用户交互和界面设计上，并且无需编写冗长臃肿的代码。 因为总有一个（合适的）API可用，写起jQuery代码来远比写原生JavaScript容易。如果你熟悉HTML和CSS编程，就很容易理解和编写jQuery代码，因为绝大多数jQuery功能都是在HTML和CSS范畴内（与用户）交互。 开源 JavaScript库由开源社区支持，并得到了良好的测试和及时更新。开源社区是一个巨大的支持网络。Web设计师和开发者不断地编写解决方案、写书、写插件来帮助和扩展jQuery库。 无与伦比的文档 目前为止，jQuery最大的优势之一是它的文档——可以说正是它造就了这个重大的库。jQuery团队在编写有关库如何工作及用户如何方便地查找API上花费了大量时间。jQuery文档站点上有一些带有完整代码示例的解决方案，还有遍布整个网络的庞大的支持团队。图1-3展示的是jQuery站点的文档子站。 图1-3　jQuery站点的文档子站 来自社区的开发者和程序员不仅发明了jQuery，而且一直在改进jQuery，不断地发布新版本。自从2006年发布1.0版本以来，jQuery代码已经更新了23次，目前最新的版本是1.4.2。人们不停地改进jQuery，这正是它如此流行的一大原因。不经常更新的库就不那么流行。 由于库不断更新，对应的文档也就不断更新，以便提示哪些方法已经过时（不推荐使用，下一次发布时有可能被删除）并确保库可以向后兼容——也就是让文档也适用于较老的版本。每当发布一个新版本，（用户的）升级过程相当简单——把新版本的JavaScript库往服务器上一丢就行了。当然，你应该看一眼更新日志（它概述每次发布的版本及库的改动），以查看正使用的哪些方法已经过时。 jQuery通过MIT许可证或GNU GPL v2许可证发布。基本的意思就是声明它是自由软件，只要信任jQuery插件的作者，就可以自由地使用这些代码。 一样的JavaScript，更少的代码 jQuery就是JavaScript：你能用JavaScript干什么，就能用jQuery干什么，一切皆有可能。我最喜欢jQuery的一点是，它提供了一个坚实的地基，而开发者又不必囿于jQuery提供的API。在使用jQuery编程时，有3种选择： 选用jQuery API； 找一个或写一个jQuery插件； 使用原生JavaScript。 jQuery的另一个优势是代码简洁。如果用纯JavaScript改变（一个元素的）背景色，代码会是这样： document.getElementById('mydiv').style.backgroundColor = 'red'; 使用强大的选择器引擎，jQuery达成同样目的的代码要短得多： $('#mydiv').css('background-color','red'); 这样的语法比原生语法更容易理解，设计师完全可以心里怎么想，手就怎么写。拿jQuery的语法和其他库（比如Prototype或YUI）的语法比一比，你就会明白jQuery为什么能赢得众多Web设计师及开发高手的心。jQuery的选择器引擎是它最著名，也最受人喜爱的功能。由于支持用CSS2选择器选取元素，对于那些有CSS经验的Web设计师来说上手极为容易。 链式调用 jQuery的另一个厉害功能是链式调用，就是说方法可以一个接一个（就像链条那样）地调用。这非常有助于保持代码短小，从而提高从Web服务器上加载并执行jQuery代码的性能。 下面是一个jQuery链式调用代码示例： $('#foo').addClass('active').prev().removeClass('active'); 下面是一个不使用链式调用的代码示例： $('#foo').addClass('active'); $('#foo').next().removeClass('.active'); 看看这两个例子，使用链式调用编写的jQuery代码更干净、更简洁。本书中的代码示例大都使用了链式调用。 兼容各种浏览器 随着Safari、Firefox、IE、Google Chrome和Opera的不断更新，让页面支持所有的主流浏览器便成了重中之重。浏览器战争已经成为每一位Web设计师天天苦恼的问题。 如果使用的是jQuery，你尽可放心，它兼容所有主流浏览器，如IE 6.0+、Mozilla Firefox 2+、Safari 3.0+、Opera 9.0+和Google Chrome。 使用JavaScript经常会遇到的一个大问题是，你不得不编写不同的代码以支持不同浏览器。一些Web设计师和开发者选择为特定浏览器编写专用样式表，来支持不同浏览器，一般是专门为IE写一个，为其他浏览器写一个。JavaScript也有类似问题。下面的代码展示了（使用原生JavaScript）如何在不同的浏览器中生成Ajax请求对象： if(window.XMLHttpRequest) { xhr = new XMLHttpRequest();//面向Firefox/Safari的代码 } else if(window.ActiveXObject) { //Active X版本 xhr = new ActiveXObject("Microsft.XMLHTTP"); // For IE } 使用原生JavaScript，同样的功能你不得不写两个不同的函数，测试它们，为它们“捉虫”（修复bug）。这已经让代码难于管理，更不用说你还会遇到这样的情况了：为了让一个功能支持多个浏览器，不得不分别写好几个函数。有一个方法可以彻底摆脱这个痛苦，那就是使用jQuery：同样的功能只需要写一次，就能支持所有的浏览器。 作为对比，下面这行代码展示了在jQuery中发起一个Ajax请求有多么容易。 $.ajax(); 兼容CSS3 所有的现代浏览器都支持CSS1和CSS2（CSS的前两个版本），并且绝大多数Web设计师和开发者现在都在用CSS2。CSS3正在开发当中，它提供了一些增强特性，如内嵌字体、圆角、高级背景图片功能、颜色、文本特效、渐变等。现在只有少数几个浏览器能完全支持2010年7月发布的CSS3标准，它们是Firefox 4、IE 9、Opera 9和Safari 4。这些浏览器的一些老版本对CSS3提供部分支持。 jQuery目前只支持CSS3标准中的新选择器。这意味着什么？CSS3的新功能之一——新添加的属性选择器（作为对CSS2属性选择器的补充和增强），与jQuery中已有的属性选择器非常接近。这些选择器让你能够基于属性对内容添加样式，这样就能过滤出属性中特定的值。请看下面的代码： p[title=*foo] {background:black;color:white} <p class="text" title="food is good foo you">This is my sample text</p> 不突兀的JavaScript 如下例所示，很多人在a标签的href属性中直接嵌入JavaScript代码以创建弹出窗口。这个代码最大的问题在于把代码直接放到了链接href属性当中。如果一个用户碰巧禁用了JavaScript（虽然这确实有点罕见），这个链接就失效了，并且也没有退路让这个用户看到帮助信息。 <a href="javascript:window.open('help.html', 'help window', 'height=800,width=600,toolbar=no');return false;">Help</a> 这是突兀地使用JavaScript的一个例子。对Web设计师来说，这就像在编写内联样式，而不是将样式从内容中分离到表现层。为了和这个突兀使用JavaScript的例子对比，下面是一个使用JavaScript的、不突兀的例子，它使用了jQuery，代码也与上面的例子相似。如果JavaScript功能被禁用，这个版本虽然一样无法执行封装在click函数中的代码，但提供了让用户单击链接以访问帮助页面的候补方案。 <!doctype html> <html> <head> <title>Unobtrusive jQuery</title> <script type="text/javascript"> $(document).ready(function (){ $(".help-link").click(function() { var linkHref = $(this).attr('href'); window.open(linkHref,'help window', 'height=800,width=600,toolbar=no'); return false; }); }); </script> </head> <body> <a href="help.html" class="help-link">Help</a> </body> </html> 优雅降级和渐进增强是两个用来支持浏览器新特性及旧浏览器的两个（常用）策略，可用于提供最佳的用户体验。渐进增强策略比较新，不过二者的区别主要在于采取的方式不同。接下来我将详细介绍这两个策略。 优雅降级 使用优雅降级方案，Web站点在所有新式流行浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能够正常工作。由于IE独特的盒模型布局问题，绝大多数Web设计师和开发者都通过专门的样式表或针对不同版本的IE的hack实践过优雅降级了（哦，请别指责IE6）。 <a href="javascript:window.open('help.html', 'help window', 'height=800,width=600,toolbar=no');">Help</a> <noscript> Please upgrade your browser or turn on JavaScript, as your browser is not working with our Website. </noscript> 渐进增强 渐进增强指的是这样一种策略：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能。渐进增强是值得所有开发者采纳的做法，能让Web站点的可用性更好。如果你总是交付一个所有人都能用的基本功能集，加上只支持先进浏览器的专用升级版功能集，比如那些采用了CSS3和HTML5技术的功能集，用户满意度会更高。目前仅Safari 4和Opera 10.6支持HTML5和CSS3。 渐进增强方案并不假定所有有户都支持JavaScript，而总是提供一种候补方法，确保用户可以访问（主要的）内容。考虑一下“不突兀的JavaScript”那节中的弹出窗口，如果用户不支持JavaScript，我们就通过a标签中的target属性告诉浏览器，让它在新窗口中打开这个链接（而不再使用弹出窗口）。几乎所有的浏览器都支持这个。 <a href="help.html" target="_blank">Help</a> 在本书中，我致力于使用渐进增强策略让使用现代浏览器的人享有较好的用户体验，同时为那些使用老式浏览器的人保证基本的用户体验。 不突兀的JavaScript与jQuery 因为所有的jQuery（JavaScript）代码都独立于HTML（存放到一个外部JavaScript文件中）或集中存放在HTML文件的头部区域，除非你使用托管在CDN上的jQuery文件（托管解决方案），所以jQuery使得实践这些策略（优雅降级和渐进增强）更加容易。由于HTML元素中不嵌入任何JavaScript代码，只要开发者牢记这些实践，在架设站点时预留退路（非JavaScript方案）总是可行的。