11.3 小结

本章主要讲解了两部分内容，jQuery性能优化和技巧，相信这些能在实际操作中会有非常大的帮助。

如今，互联网已经发生翻天覆地的变化，Ajax、模板引擎和MVC开发等一些新型的Web应用正倍受开发者的青睐，与此同时，用户的需求也越来越高。JavaScript作为增强交互的脚本语言也越来越受到重视，而jQuery作为一个JavaScript脚本库，相信前途也是一片光明。

未来掌握在自己手中，祝读者朋友早日成为一名真正的Web前端开发工程师。

11.2 jQuery技巧

如今，越来越多的人在使用jQuery类库。这也意味着，需要越来越多有用的jQuery技巧和解决方案。下面是我整理的一些实用的jQuery技巧。

1．禁用页面的右键菜单

[插图]

2．新窗口打开页面

[插图]

3．判断浏览器类型

[插图]

需要注意的是，在jQuery 1.3版本之后，官方推荐使用$.support来代替$.browser这种检测方式。

4．输入框文字获取和失去焦点

[插图]

5．返回头部滑动动画

[插图]

6．获取鼠标位置

[插图]

7．判断元素是否存在

[插图]

8．点击div也可以跳转

[插图]

9．根据浏览器大小添加不同的样式

[插图]

10．设置div在屏幕中央

[插图]

11．创建自己的选择器

[插图]

12．关闭所有动画效果

[插图]

13．检测鼠标的右键和左键

[插图]

14．回车提交表单

[插图]

15．设置全局Ajax参数

[插图]

16．获取选中的下拉框

[插图]

17．切换复选框

[插图]

18．使用siblings()来选择同辈元素

[插图]

19．个性化链接

[插图]

20．在一段时间之后自动隐藏或关闭元素

[插图]

21．使用Firefox和Firebug来记录事件日志

[插图]

22．为任何与选择器相匹配的元素绑定事件

[插图]

23．使用css钩子

jQuery.cssHooks是1.4.3新增的方法，当你定义新的CSS Hooks时实际上定义的是getter和setter方法，比如，border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSS Hooks将其封装成统一的接口borderRadius，而不是一一设置css属性。代码如下：

[插图]

更多cssHooks可以查看https://github.com/brandonaaron/jquery-cssHooks 。

24．$.proxy()的使用

使用回调方法的缺点之一是当执行类库中的方法后，上下文对象被设置到另外一个元素，比如：

[插图]

执行下面代码：

[插图]

你将遇到问题，button元素会消失，而不是panel元素。可以使用$.proxy方法解决这个问题，代码如下：

[插图]

这样才正确的执行。

25．限制Text-Area域中的字符的个数

[插图]

26．本地存储

本地存储是HTML 5提供的特性之一。它提供了非常简单的API接口，便于添加你的数据到localStorage全局属性中，代码如下：

[插图]

事实上对于老的浏览器来说，这并不是个好消息，因为他们不支持，但是我们可以使用jQuery的插件（http://plugins.jquery.com/plugin-tags/localstorage ）来提供支持，这种方式可以使得本地存储功能正常工作。

27．解析json数据时报parseError错误

jQuery在1.4版本后，采用了更为严格的json解析方式，即所有内容都必须要有双引号，如果升级jQuery版本后，ajax加载json报错，有可能就是这个原因。比如：

[插图]

但升级成jQuery 1.4后，都必须加上双引号，格式如下：

[插图]

28．从元素中除去HTML

[插图]

29．扩展String对象的方法

[插图]

第11章 jQuery性能优化和技巧

jQuery越来越流行了，大家可能会发现，在浏览网站的过程中，越来越多的网站开始使用jQuery来构建以往需要靠Flash来实现的超酷动态效果，事实上jQuery已经是前端开发中重要的类库之一，也成为构建丰富Web前端的利器。但是作为一个JavaScript类库，很多人并不是很清楚如何正确使用 jQuery 来达到最佳的性能，如果你觉得代码书写对于性能的影响不会那么巨大，那么我只能告诉你，当你使用jQuery开发一个复杂的动画和Web应用时，它有可能成为你性能上的终极噩梦。

在本章中，我们将介绍在书写代码时，应该需要注意的几个性能问题，希望对于大家在书写高性能的Web应用中有所帮助。

11.1 jQuery性能优化

1．使用最新版本的jQuery类库

jQuery 每一个新的版本都会较上一版进行 Bug 修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的jQuery 来提高性能。不过你需要注意的是，在更换版本之后，不要忘记测试你的代码，毕竟有时候不是完全向后兼容的。

2．使用合适的选择器

jQuery提供给开发人员非常丰富的手段来使用选择器定位DOM元素，它是开发人员最常使用的功能，但是很少有开发人员会考虑使用不同的选择器来处理性能问题。这里我们将介绍几种常用的选择器，及其它们之间的性能差异。

• $(“#id”)

使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElementById()。熟悉JavaScript的人，都了解这个方法将直接通过元素id来返回对应的元素。当然，如果这个方式不能直接找到你需要的元素，那么你可以考虑调用find()方法。代码如下：

[插图]

使用以上代码可以有效的缩小你定位的DOM元素。为了提高性能，建议从最近的ID元素开始往下搜索。

• $("p")，$("div")，$("input")

标签选择器的性能也是不错的，它是性能优化的第二选择，因为jQuery将直接调用本地方法document.getElementsByTagName()来定位DOM元素。

• $(".class")

这种方法较我们来说有些许复杂。对于比较新的浏览器例如IE 9，它支持本地方法document. getElementsByClassName()，而对于老的浏览器，例如IE 8或者更早版本，只能靠使用DOM搜索方式来实现，这无疑对性能产生较大的影响。所以建议大家有选择性的使用它。

• $("[attribute=value]")

对于利用属性来定位DOM元素，本地JavaScript方法中并没有直接地实现，大多都是使用DOM搜索方式来达到效果，很多现代浏览器支持querySelectorAll()方法，但是不同浏览器间的性能还是有区别。总体来说，使用这种方式来定位DOM元素，性能并不是非常理想。所以为了获得更好的优化效果，建议开发中尽量避免这种对性能有害的方式。

• $(":hidden")

和上面利用属性来定位DOM的方式类似，这种伪选择器也同样没有直接在本地JavaScript方法中实现，并且 jQuery 需要搜索每一个元素来定位这个选择器，这将对你的应用带来比较大的性能问题。所以建议大家尽量不要使用。如果你坚持使用这种方式，请先使用ID选择器定位父元素，然后再使用该选择器，这样对性能优化会有帮助。代码如下：

[插图]

以上是使用选择器的基本规则，性能自上而下依次下降，如果大家在开发中使用选择器，请遵循以上这个简单的优化性能规则。当然，如果觉得不是非常可信，那么我建议大家使用一个在线工具jsPerf来直观的查看性能区别，地址：http://jsperf.com/id-vs-class-vs-tag-selectors/2

3．缓存对象

在书写jQuery代码中，开发人员经常喜欢用如下书写方式：

[插图]

当然，编程中的跳跃思维导致你有可能这样书写代码，这无可厚非，但是这样导致的结果是：jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。比较好的书写方式如下：

[插图]

在本例中，如果使用链式方式将更加简洁，但是这里只为说明使用缓存变量的重要性，这和Java开发中不要随意的创建对象一样，可以帮助你有效的提高代码运行性能。

上面代码可以使用jQuery的链式操作再加以改善。如下所示：

[插图]

如果你打算在其他函数中使用jQuery对象，那么你可以把它们缓存到全局环境中。如下代码所示：

[插图]

记住，永远不要让相同的选择器在你的代码里出现多次。

4．循环时的DOM操作

使用jQuery可以很方便的添加，删除或者修改DOM节点，但是在一些循环，例如for()，while()或者$.each()中处理节点时，下面有个实例值得大家注意，代码如下：

[插图]

以上代码中，我们将每一个新添加的标签元素都作为一个节点添加容器ID中，实际上jQuery操作消耗的性能也不低，所以更好的方式是尽可能的减少DOM操作，这里应该将整个元素字符串在插入DOM之前全部创建好，修改代码如下：

[插图]

记得以前有一个同事也写过类似的代码，代码如下：

[插图]

看出问题所在了吧，居然把#mylist循环获取了100次!

5．数组方式使用jQuery对象

使用jQuery选择器获取结果是一个jQuery对象。然而，jQuery类库会让你感觉你正在使用一个定义了索引和长度的数组。在性能方面，建议使用简单for或者while循环来处理，而不是$.each()，这样能使你的代码更快。

[插图]

使用for代替each()方法，代码如下：

[插图]

另外注意，检查长度也是一个检查jQuery对象是否存在的方式，下面一段代码通过length属性检查页面中是否含有id为“content”元素：

[插图]

6．事件代理

每一个 JavaScript 事件（例如：click，mouseover 等）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。比如, 我们要为一个表格绑定这样的行为：点击td后，把背景色设置为红色，代码如下：

[插图]

假设有100个td元素，在使用以上方式的时候，你绑定了100个事件，这将带来很负面的性能影响。那么有什么更好的方式呢？

代替这种效率很差的多元素事件监听的方法就是，你只需向它们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素，代码如下：

[插图]

在改进方式中，你只为一个元素绑定了1个事件。显然，这种方式的性能要优于之前那种。同时，在jQuery 1.7中提供了一个新的方式on()，来帮助你将整个事件监听封装到一个便利方法中，如下所示：

[插图]

7．将你的代码转化成jQuery插件

如果你每次都需要花上一定的时间去开发类似的jQuery代码，那么你可以考虑将代码变成插件。它能够使你的代码有更好的重用性，并且能够有效的帮助你组织代码。创建一个插件代码如下：

[插图]

8．使用join()来拼接字符串

也许你之前一直使用”+”来拼接长字符串，现在你可以改改了。虽然它可能会有点奇怪，但它确实有助于优化性能，尤其是长字符串处理的时候。

首先创建一个数组，然后循环，最后使用join()把数组转化为字符串，代码如下：

[插图]

9．合理利用HTML5的Data属性

HTML 5的data属性可以帮助我们插入数据，特别是前后端的数据交换。jQuery的data()方法，有效的利用HTML5的属性，来自动得到数据。下面是个例子：

[插图]

为了读取数据，你需要使用如下代码：

[插图]

10．尽量使用原生的JavaScript方法

下面一段代码，它用来判断多选框是否被选中：

[插图]

它使用了jQuery提供的is()方法来判断多选框是否选中，但这里可以直接使用原生的JavaScript方法，看下面代码：

[插图]

毋庸置疑，第二种方式效率高于第一种方式，因为它不需要拐弯抹角的去调用许多函数。

还有更多类似的操作。把如下代码：

[插图]

优化成：

[插图]

把如下代码：

[插图]

优化成：

[插图]

经验告诉我们，方法的选择很重要，有时候你也许根本不需要jQuery。

11．压缩JavaScript

现在的Web项目总是离不开大量JavaScript，而JS文件的体积越来越大，随之也影响到页面的感知性能。因此，需要对 JavaScript文件进行压缩，一方面是使用Gzip；另一方面则是去除JavaScript文件里的注释、空白，并且压缩局部变量长度等。对于一些成熟的类库来说，它们本身都会提供“完整版”和“压缩版”两个版本。当我们需要自己修复类库里的Bug，这时只能在完整版中修改，对于压缩版自然就无能为力了。此外，自己写的JavaScript文件也需要压缩。

压缩JavaScript的工具有很多，你可以使用老牌的JSMin，YUI Compressor，它们都可以用来压缩脚本文件（后者还可以处理CSS），也可以使用一些新的工具，比如Google Closure Compiler和UglifyJS。

10.3 小结

本章主要对 jQuery的发展历史和jQuery各个版本新增方法进行讲解。jQuery的不断升级完善的同时也为开发者带来不少困扰，特别是一些方法的改变而导致的不兼容。所以，对于开发者来说，最好的方式就是掌握每个版本jQuery功能的变化，这正是本章的目的所在。

10.2 jQuery各个版本新增方法

jQuery各版本新增方法如表10-1～表10-5所示。

[插图]

[插图]

续表

[插图]

[插图]

[插图]

[插图]

第10章 jQuery各个版本的变化

10.1 jQuery的发展历史

2005年8月，John Resig提议改进Prototype的“Behaviour”库，于是他在blog上发表了自己的想法，并用了3个例子做说明。

第一个例子是为元素注册一个事件：

[插图]

他认为应该改写为：

[插图]

第二个例子是为不同的元素注册不同的事件：

[插图]

他认为应该改写为：

[插图]

第三个例子是为不断变化的元素注册不同的事件：

[插图]

他认为应该改写为：

[插图]

这些代码也是jQuery语法的最初雏形。当时John的想法很简单：他发现这种语法相对现有的JavaScript库更为简洁。但他没想到的是，这篇文章一经发布就引起了业界的广泛关注。于是John开始认真思考着这件事情（编写语法更为简洁的JavaScript程序库），直到2006年1月14日，John正式宣布以jQuery的名称发布自己的程序库。随之而来的是jQuery的快速发展。

2006年8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。

2007年7月，jQuery 1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。同年9月，jQuery 1.2版发布，它去掉了对XPath选择符的支持，原因是相对于CSS

语法它已经变得多余了。这一版能够对效果进行更为灵活的定制，而且借助新增的命名空间事件，也使插件开发变得更容易。同时，jQuery UI项目也开始启动，这个新的套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件（widget），以及一组用于构建高级元素（例如可拖放、拖拽、排序）的工具。

2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许多 BUG，而且有不少的性能得到提高。因此，如果把你以前的jQuery版本升级到1.2.6，那么你完全可以从你的代码中排除Dimensions插件。

在jQuery迅速发展的同时，一些大的厂商也看中了商机。2009年9月，微软和诺基亚公司正式宣布支持开源的jQuery库，另外，微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括 jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员，其他成员还有Google，Intel，IBM，Intuit等公司。

2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle，在各个浏览器下全面超越其他同类型JavaScript框架的查询速度，程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法，使用live()方法可以为当前及将来增加的元素绑定事件，在1.3版之前，如果要为将来增加的元素绑定事件，需要使用livequery插件，而在1.3版中，可以直接用live()方法。

2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布，为了庆祝jQuery四周岁生日，jQuery团队特别创建了jquery14.com站点，带来了连续14天的新版本专题介绍。

在1.3及更早版本中，jQuery通过JavaScript的eval方法来解析json对象。在1.4中，如果你用的浏览器支持，则会使用原生的JSON.parse解析json对象，这样对json对象的书写验证则更为严格。比如：{foo: “bar”}的写法将不会被验证为合法的json对象，必须写成{“foo”:”bar”}。如果你的程序打算升级到1.4版本，那么这一点要尤其注意。

2010年2月，jQuery 1.4.2版发布，它新增了有关事件委托的两个方法：delegate()和undelegate()。delegate()用于替代 1.3.2 中的live()方法。这个方法比 live()来的方便，而且也可以达到动态添加事件的作用。比如给表格的每个td绑定hover事件，代码如下：

[插图]

2011年1月，jQuery 1.5版发布。该版本做了如下修改：

• 重写Ajax模块

（1）最大的变化是调用jQuery.ajax（或jQuery.get，jQuery.post等）会返回jqXHR的对象，为不同浏览器内置的XMLHttpRequest对象提供了一致的超集，可以完成以前不可能完成的任务，比如：中止JSONP请求。
（2）提供了更高级的统一的API。
（3）更好的扩展性，可以方便地扩展Ajax的发送与接收，管理Ajax请求。

• 新增延迟对象

开发人员借此可以使用无法立即获得的返回值（如异步Ajax请求的返回结果），而且第一次能够附加多个事件处理器。

比如，使用新的jQuery Ajax API实现下面的代码：

[插图]

• jQuery.sub()

可以方便地创建jQuery副本，不影响原有的jQuery对象，避免jQuery冲突。示例代码如下：

[插图]

• 内部开发系统

jQuery团队内部开发系统的两点改变：一是服务器端用NodeJS替换了老的Java/Rhino系统，使得团队可以专注于 JavaScript环境的新变化；二是所用的代码压缩优化程序从 Google Closure Compiler切换到UglifyJS，新工具的压缩效果非常令人满意。

2011年5月，jQuery 1.6版发布。该版本重写了Attribute模块和大量的性能改进。值得注意的是此次更新有2个破坏性的变更，将会影响到现有打算升级到1.6的那些项目。

• 变更1：更新data()方法

在jQuery1.5中，data()方法可以用来将元素上的数据属性转化为JSON形式的值。JQuery 1.6已经更新了此功能，data()方法获取的值会以驼峰形式展示，以配合W3C HTML5规范。比如：

[插图]

• 变更2：独立方法处理DOM属性，以区分DOM的attributes和properties

一般情况下，attributes表示从文档中获取 DOM的状态信息，而 properties表示元素的动态状态信息。比如：

[插图]

如果用户手动改变文本框的值为“abcdef”，那么：

[插图]

同样，如果网页中的复选框的代码如下：

[插图]

那么结果也会有所不同：

[插图]

所以在jQuery 1.6中，如果要判断复选框是否选中，需在事件处理程序中使用：

[插图]

由于jQuery 1.6对attr()方法的改变，导致很多使用attr()方法的程序出现问题，必须修改为1.6的语法才能使用，这个不向前兼容的改变引起了开发的强烈不满。于是在不到10天的时间里，jQuery 1.6.1发布，它调整了attr()方法，使其兼容1.6之前的做法。比如：

[插图]

2011年11月，jQuery 1.7版发布。该版本做了如下修改：

• 新的事件API：on()和off()

新的on()和off()API统一了jQuery中所有对文档绑定事件的操作，而且它们也更加简短。代码如下：

[插图]

其中on()替代了之前版本中的bind()、delegate()和live()；off()替代了unbind()、undelegate()和die()。下面代码是新旧API调用之间对应的例子：

[插图]

• 事件委托的性能改进

随着页面大小和复杂度的不断增长，事件委托变得越来越重要。比如Backbone,JavaScript MVC和Sproutcore等应用框架都使用了大量的事件委托。考虑到这一点， jQuery 1.7重构了事件委派，使其更加快速，尤其是在大多数常见情况下。图10-1是1.6.4和1.7版本的性能比较，最终的事件委托和1.6.4相比，节省了大约一半的时间：

[插图]

• 更好地支持IE 6/7/8下的HTML 5

任何试图在IE 6/7/8中使用新的类似于<section>的HTML 5标签，毫无疑问都会遇到IE 6/7/8无法解析这些标签，甚至将这些标签从文档中移除的问题。在jQuery1.7中，为较旧IE版本中html()一类的方法建立了对HTML 5的支持。这一功能和以前的innerShiv相同，但你仍然需要在你的文档头部加入HTML5Shiv（或者Modernizr）以使旧IE版本支持HTML 5标签。如需要更多资料，请查看The Storyof the HTML5 Shiv（http://paulirish.com/2011/the-history-of-the-html5-shiv/ ）。

• 更直观地切换动画

在jQuery的旧版本中，类似于slideToggle()或fadeToggle()的切换动画在互相堆放和前一个动画被stop()终止时无法正常工作。在1.7版本中这一情况被修复，动画系统会记住元素的初始值并在一个切换的动画被提前终止时重置它们。

• 异步模块定义(AMD)

jQuery 1.7支持AMD规范，可以和遵循AMD规范的脚本加载器协作，比如RequireJS或者curl.js。

• jQuery.Deferred

jQuery.Deferred对象除了提供新的进度处理及通知方法之外，同时也新增一个可用来取得目前Deferred状态的state()方法。Deferred也通过jQuery.Callbacks机制来提供给开发者一个统一的事件处理接口。

• jQuery.isNumeric()

在使用jQuery的过程中，有时候需要知道一个参数是数值或可以被成功的转换为数值的情况。所以jQuery开发并公开jQuery.isNumeric()方法。为它传递一个任意类型的参数，它将对应的返回true或false。

• 弃用和删除的功能

jQuery将开始弃用过时的特性，以使代码库更加精简，同时提高性能。比如live()和die()已在1.7版本中被弃用，这些方法还将继续有效，但为了兼容以后的版本不建议使用它们，可以使用on()、off()和delegate()之类的代替。

一些非标准的特性在1.7版本中被彻底移除了，比如event.layerX和event.layerY，可以使用event.originalEvent.layerX和event.originalEvent.layerY代替。

jQuery.isNaN()：这一未公开的实用函数已被删除，新的jQuery.isNumeric()提供了类似的功能，并且可以被更好的支持。

jQuery.event.proxy()：这一未公开和过时的方法已被删除，开发者应使用公开的jQuery.proxy方法代替。

jQuery所有版本的发行说明可以在官方站点查到，网址为http://blog.jquery.com/ 和 http://jquery.org/history/ 。

9.6 小结

本章首先简单介绍了HTML 5，然后重点介绍了jQuery Mobile，包括它的特性和用法。最后对其他的移动框架进行了介绍。

移动互联网是互联网的未来。HTML 5作为未来移动终端的核心技术，这一点已经成为业界共识，各家浏览器厂商也频频升级浏览器来更好地支持HTML 5。各大开发厂商的加入，也让移动开发领域的竞争变得异常激烈。

相信不久的将来，不论是桌面应用还是移动应用，HTML 5都是创新的主旋律。

9.5 其他框架

9.5.1 移动框架

在移动框架方面，除了jQuery Mobile之外，还有很多移动框架可选。

• jqMobi (http://jqmobi.com )

此 jqMobi 不是 jQuery Mobile，它们两个完全不同，jqMobi是基于 jQuery 重写的，适应于iOS和Android等移动设备的JavaScript框架，它含有 jQueryMobile的大部分功能，但是 jqMobi体积更小，速度更快，兼容性也有所不同。

jqMobi由三个组件组成：查询库、jqUi和jqPlugin。查询库库提供了60多个API调用，包括Ajax调用、针对webkit的系统选择器调用等。jqUi是一个用户界面程序库，提供了按钮、部件、固定的header/footer以及可控的滚动部件。该工具包也仅针对移动版本的WebKit浏览器，同时支持Android 2.2及更高版本。jqPlugin是用于针对WebKit浏览器交互和接口的插件支持。

• Sencha Touch (http://sencha.com )

Sencha Touch是专门为移动设备开发应用的JavaScript框架。通过Sencha Touch你可以创建一个非常像native app的web app，用户界面组件和数据管理全部基于HTML 5和CSS3的Web标准，兼容Android和iOS。

Sencha Touch是一个重量级的框架，组件封装较多，在各平台交互表现统一，但入门门槛较高。

• Zepto.js (http://zeptojs.com/)

Zepto.js是一个专为Mobile WebKit浏览器而开发的一个JavaScript框架。它能够帮助开发人员简单、快速地完成开发任务。更重要的是这个JavaScript框架，是超轻量级的，只有5KB。Zepto.js的语法借鉴并兼容jQuery。

9.5.2 PhoneGap

PhoneGap是一个开源的开发框架，使用HTML、CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone、Android、Palm、Symbian、Blackberry、Windows Phone和Beda智能手机的核心功能—包括地理定位、加速器、联系人、声音和振动等。同时借助PhoneGap， Web开发者还可以把已有的Web应用打包成移动平台上的本地应用或者应用商店里的App，让用户直接下载安装。

PhoneGap的特性包括：将 HTML/JavaScript 代码打包成本地 App，帮助开发者部署到各种平台上，并提供了访问移动应用本地特性的接口，同时支持多语言混合的插件机制。

9.4 jQuery Mobile的使用

9.4.1 准备工作

首先去官方下载最新的jQuery Mobile版本。其次，建议在页面中使用HTML 5标准的页面声明和标签，因为移动设备浏览器对HTML 5标准的支持程度要远远优于PC设备，因此使用简洁的HTML 5标准可以更加高效地进行开发，避免了因为声明错误出现的兼容性问题。代码如下：

[插图]

9.4.2 构建HTML模板

jQuery Mobile可以在普通的html标签或html 5标签中工作，在结构化的页面中，完整的页面结构分为header、content和footer这三个主要区域。一个最简单的jQuery Mobile代码如下：

[插图]

显示效果如图9.1所示：

[插图]

在上面代码中，我们引入了3个文件，这也是使用 jQuery Mobile所必备的3个文件：

• CSS文件：jquery.mobile.css
• jQuery文件：jquery.js
• jQuery Mobile文件：jquery.mobile.js

9.4.3 data-role属性

在上面的代码中可以看到页面中的内容都包装在div标签中，并在标签中加入data-role= “page”属性。这样jQuery Mobile就会知道哪些内容需要处理。把代码简化后，如下所示：

[插图]

[插图]

9.4.4 添加内容

如果我们需要在页面中添加一个简单列表，那么就可以使用刚才所说的data-role属性，将下面代码插入到content中：

[插图]

显示效果如图9.2所示：

[插图]

如果你不喜欢宽度为100%的列表，那么你可以通过为ul元素设置data-inset属性。 例如为<ul>设置 data-inset=”true” 。显示效果如图9.3所示。

[插图]

9.4.5 样式切换

jQuery Mobile自带了一些不错的主题，这些主题能够快速的帮助开发人员修改页面的UI。我们只需在组件上添加data-theme属性即可，它的值是a、b、c、d或e。此外，jQuery Mobile还提供了一个强大的ThemeRoller 组件（http://jquerymobile.com/themeroller/），可以让你自定义主题。ThemeRoller如图9.4所示：

[插图]

为列表添加data-theme=”e”后，显示效果如图9.5所示：

[插图]

[插图]

9.2 jQuery Mobile简介

对于Web开发者来说，jQuery是非常流行JavaScript类库，而且一直以来它都是为Web浏览器设计的，并没有特别为移动应用程序设计。jQuery Mobile则是用来填补 jQuery在移动设备应用上的缺憾的一个新项目。它基于jQuery框架并使用了HTML 5和CSS 3这些新的技术，除了能提供很多基础的移动页面元素开发功能外，框架自身还提供了很多可供扩展的API，以便于开发人员在移动应用上使用。使用该框架可以节省大量的JavaScript 代码开发时间。

9.3 jQuery Mobile主要特性

jQuery Mobile提供了非常友好的UI组件集和一个强有力的AJAX的导航系统，以支持动画页面转换。它的策略可以简单地总结为：创建一个在常见智能手机/平板电脑浏览器领域内能统一用户界面的顶级JavaScript库。概括起来，jQueryMobile有以下特性：

（1）基于jQuery构建
它采用与jQuery一致的核心和语法，这样能让学习者倍感熟悉，学习曲线也是最小的。另外，它还使用了jQuery UI代码和模式。
（2）兼容绝大部分手机平台
jQuery Mobile以“Write Less, Do More”作为目标，为所有的主流移动操作系统平台提供了高度统一的UI框架，而不必为每个移动设备编写独特的应用程序。它兼容iOS、Android、Blackberry、Palm WebOS、Nokia/Symbian、WindowsMobile、bada和MeeGo等，只要是能解释标准HTML的设备就能提供最基本的支持。
（3）轻量级的库
基于速度考虑，整个库非常轻量级，同时对图片的依赖也降到最小。
（4）模块化结构
创建定制版本只包括应用所需的功能，而不需要修改应用的结构。
（5）HTML 5标记驱动的配置
快速开发页面，把对开发人员的脚本能力需求降到最小化。
（6）渐进增强原则
jQuery Mobile完全采用渐进增强原则：通过一个全功能的标准HTML网页和额外的JavaScript功能层，提供顶级的在线体验。这意味着即使移动浏览器不支持JavaScript，基于jQuery Mobile的移动应用程序仍能正常的使用，而较新的移动平台能获得更优秀的用户体验。
（7）响应设计
通过灵敏的技术设计和工具，使得相同的基础代码库可以在不同屏幕大小中自动缩放。
（8）强大的Ajax的导航系统
它使得页面之间跳转变得更加流畅，同时保持按钮，书签和地址栏的简洁。
（9）易用性
一些辅助功能，比如WAI-ARIA，以确保页面可以在一些屏幕阅读器或者其他手持设备中正常工作。
（10）支持触摸和鼠标事件
让触摸，鼠标，光标用户都能通过简单的API来流畅使用。
（11）统一的UI组件
在触摸体验和主题化方面，jQuery Mobile加强和统一了本地控制。
（12）强大的主题化框架
主题编辑器（ThemeRoller）能很容易地进行高度个性化和品牌化的的界面定制。

接下来我们将通过实例向大家展示jQuery Mobile的特性及好处，让大家一起来了解这个新框架是如何帮助我们在短时间内建立起一个高质量的移动应用程序。当然，在这里建议代码使用的移动设备平台最好是iPhone或Android或是在PC电脑上使用Google浏览器调试。