1.2 上手jQuery
工欲善其事,必先利其器。在开始jQuery实例前,先要做了解jQuery的各种版本区别、准备好jQuery类库文件、搭建jQuery的开发环境。
1.1.2 jQuery之美
jQuery带给我们的是JavaScript开发的革命。在没有脚本库的日子,开发脚本绝对是一件容易出错的工作,并且实现类似跨浏览器、页面动画效果等都属于高难度的应用,“救世主”jQuery有如下神力。
1. 提供了功能强大的脚本函数类库
使用这些功能函数, 能够帮助Web开发人员快速完成各种功能,而且会让代码异常简洁。比如,通过jQuery选择器一次选中页面上所有的Checkbox元素,通过each遍历选中的所有元素。
$("*:checkbox").each(function() { });
2. 解决浏览器兼容性问题
JavaScript脚本在不同浏览器的兼容性问题一直是Web开发人员的噩梦,常常一个页面在IE 7、Firefox下运行正常,但在IE 6下就出现莫名其妙的问题。针对不同的浏览器编写不同的脚本是一件痛苦的事情。jQuery将开发人员从这个噩梦中拯救出来,比如jQuery中的event事件对象已经被格式化成所有浏览器通用,从前要根据event获取事件触发者,在IE下是event.srcElements而在Firefox等标准浏览器下是event.target。jQuery则通过统一event对象,可以在所有浏览器中使用event.target获取事件对象。当单击一个<a>元素时, 默认会链接到href属性中的地址,使用event.preventDefault()方法就可以取消此行为(浏览器默认行为)。
3. 实现丰富的UI
jQuery可以实现比如渐变弹出、图层移动等动画效果,这样可获得更好的用户体验。以渐变效果为例,从前为了写一个可以兼容IE和Firefox的渐变动画,要使用大量JavaScript代码实现。费心费力不说,写完后没有太多帮助,过一段时间就忘记了,再开发类似的功能还要再次费心费力。现在使用jQuery就可以快速完成此类应用。
jQuery UI就是用来帮助完成上面所有功能的jQuery插件库,除了实现效果外,其还提供了很多精美的主题和模板,可以实现在不改变任何代码的情况下更改样式风格。如图1-1所示为不同主题下的日历控件。
图1-1 不同主题的日历控件
图1-2和图1-3是使用dialog组件实现的对话框拖拽和拉伸效果。
图1-2 可拖拽
图1-3 可缩放
4. 优雅的链式编程方式
jQuery中,常常使用如下所示的链式方式编程:
$("#myDiv").attr("title","myTitle").css("color","red");
上面的代码,首先获取到id为myDiv的元素,然后首先修改title属性,接着修改了CSS样式设置颜色为红色。jQuery这种链式编程方式十分优雅,而且更适合用来描述语意。在最新版本的Prototype中也已经开始借鉴jQuery的这种语法结构,但是就导致了Prototype有两套编码方法。而jQuery作为创造者,使所有使用jQuery的编码人员都能用最优雅的方式编写代码。
5. 学习简单,上手快
jQuery的学习成本非常低,因为jQuery是轻量级、灵活的脚本框架,并且其官方提供了丰富的在线文档和实例,任何人都可以轻松上手。
6. 太多了! 等待我们一一去发现
1.1.3 jQuery与其他脚本类库的比较
jQuery并不是唯一的JavaScript库,除了jQuery还有很多优秀的JavaScript库,比如Propetype、Dojo,Ext、YUI、MooTools等。每款JavaScript库都有其自身的优点和缺点,要根据不同的使用场景进行选择。如表1-1所示的是几款流行的框架比较。
表1-1 脚本类库比较
注:因为类库都还在不断地发展,上表的内容也许存在偏差。 某些类库的功能空白,也许已开发完成或者已有相应的插件支持,所以此表格仅供参考。
如果仅看表格会发现Dojo和YUI是原生类库功能最强大的,尤其是Dojo还有IBM、Sun和EBA等大公司支持,功能可谓强大。包括笔者在内的很多人在最初选择脚本类库的时候也被其强大的功能所迷惑,选择了Dojo。但是Dojo目前不能算是一个成熟的脚本类库,尤其是不适合做网站的开发。网站(WebSite)和Web应用程序(Web App)最大的不同就是使用者,网站面向的是互联网用户,而Web应用程序通常指内部系统(如管理系统)或者特定的使用人群(如Google Docs面向办公人员)。结果就是在开始尝到了Dojo类库的甜头后,发现Dojo并不适合网站开发,对于网站开发来说Dojo太重了,就像全副武装的陆战队员在进行百米赛跑。而且Dojo本身的确存在着尚未修复的缺陷,比如无法跨域加载类库文件(最新开发版本已经修复,官方版本尚未发布)。
同样重量级的还有ExtJS和YUI。ExtJS最早叫做YUI-Ext,其实ExtJS是由于YUI的缺陷无法得到快速修复而另起门户的。由此可见YUI类库的显著问题就是更新缓慢,因为是官方的团队开发,它的优点是代码风格严谨。
对于互联网应用而言,轻量级的框架jQuery和MooTools都是很好的选择。MooTools是开源社区形式下发展起来的JS框架。笔者认为有别于jQuery最明显的特点就是使用方式:MooTools是完全地面向对象结构的脚本类库,在其代码组织风格、有无侵入等Web思想的理解,各个方面都呈现出少年新贵、武林新秀的姿态来。虽然目前的功能不是最强大的,但是都可以通过后期开发弥补。
但是在面临抉择的时候,就需要用到经济学的思维了。为了更好地权衡投入和产出的关系,需要考虑学习成本、文档的全面程度、是否易用、是否稳定等因素。这正是最后抛弃Dojo,转而投入jQuery怀抱的主要原因。jQuery上手简单,并且目前的核心已经稳定,效率也是所有类库中最优秀的。因为使用广泛,有丰富的学习资源,此外jQuery也是插件最多的脚本类库,它丰富的插件资源让我们总可以找到自己想要的功能插件而无须重新开发。所以综合考虑,jQuery仍是最佳选择!