第1章 jQuery入门

学习要点：

    1.什么是jQuery

    2.学习jQuery的条件

    3.jQuery的版本

    4.jQuery的功能和优点

    5.其余JavaScript库

    6.是否兼容低版本IE

     7.下载及运行jQuery

 

一．什么是jQuery

 

jQuery是一个JavaScript库，它经过封装原生的JavaScript函数获得一整套定义好的方法。它的做者是John Resig，于2006年建立的一个开源项目，随着愈来愈多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它能够用最少的代码，完成更多复杂而困难的功能，从而获得了开发者的青睐。

 

 

 

 

 

主旨：以更少的代码、实现更多的功能

 

 

 

二．学习jQuery的条件

 

jQuery是JavaScript库，因此jQuery在使用上要比原生的JavaScript要简单，可是对于网页编程来讲，有些通用的基础知识是必备的：

 

1.XHTML或HTML5（含CSS，网页必备的基础技术，XHTML已完结90课）；

 

2.JavaScript（虽然jQuery使用比JavaScript简单，但各类语法来自JavaScript，只要掌握已出课程的第一季149课便可，并不须要彻底精通，只要理解语法和项目中简单的用法便可。）；

 

3.服务器语言如：PHP（jQuery属于前端技术，那和后端技术是相辅相成、互相呼应的，而PHP课程目前出到第四季，而jQuery只须要PHP第一季136课的基础便可。）；

 

 

 

三．jQuery的版本

 

从2005年8月开始，进入公共开发阶段，随之而来的新框架于2006年1月14日正式以jQuery的名称发布。

 

2006年8月发布了jQuery1.0，第一个稳定版本，具备对CSS选择符、事件处理和Ajax交互的支持。

 

2007年1月发布了jQuery1.1，极大的简化API。合并了许多较少使用的方法。

 

2007年7月发布了jQuery1.1.3，优化了jQuery选择符引擎执行的速度。

 

2007年9月发布了jQuery1.2，去掉了XPath选择器，新增了命名空间事件。

 

2008年5月发布了jQuery1.2.6，引入了Dimensions插件到核心库中。

 

2009年1月发布了jQuery1.3，使用了全新的选择符引擎Sizzle，性能进一步提高。

 

2010年1月发布了jQuery1.4，进行了一次大规模更新，提供了DOM操做，增长了不少新的方法或是加强了原有的方法。

 

2010年2月发布了jQuery1.4.2，添加了.delegate()和.undelegate()两个新方法，提高了灵活性和浏览器一致性，对事件系统进行了升级。

 

2011年1月发布了jQuery1.5，重写了AJAX组件，加强了扩展性和性能。

 

2011年5月发布了jQuery1.6，重写了Attribute组件，引入了新对象和方法。

 

2011年11月发布了jQuery1.7，引入了.on()和.off()简介的API解决事件绑定及委托容易混淆的问题。

 

2012年3月发布了jQuery1.7.2，进行一些优化和升级。

 

2012年7月发布了jQuery1.8，8月发布了1.8.1，9月发布了1.8.2，重写了选择符引擎，修复了一些问题。

 

2013年1月发布了jQuery1.9，CSS的多属性设置，加强了CSS3。

 

2013年5月发布了jQuery1.10，增长了一些功能。

 

 

 

2013年4月发布了jQuery2.0，5月发布了jQuery2.0.2，一个重大更新版本，不在支持IE6/7/8，体积更小，速度更快。

 

 

 

在制做这套课程的时候，咱们最新的中文版的API文档是1.8版本的，有在线和离线两种手段查阅：

 

1.在线的能够访问：http://t.mb5u.com/jquery/

 

2.离线的AP文档将打包提供给你们

 

3.若是要看最新的文档，英文版的：http://api.jquery.com/ 看不懂能够打开谷歌翻译，虽然不是特别准。

 

 

 

关于版本学习的问题：

 

版本的版本号升级主要有三种：第一种是大版本升级，好比1.x.x升级到2.x.x，这种升级规模是最大的，改动的地方是最多的，周期也是最长的，jQuery从1.x.x到2.x.x用了7年。第二种是小版本更新，好比1.7升级到1.8，改动适中，增长或减小了一些功能，通常周期半年到一年左右。第三种是微版本更新，好比1.8.1升级到1.8.2，修复一些bug或错误之类。

 

版本的内容升级主要也有三种：第一种是核心库的升级，好比优化选择符、优化DOM或者AJAX等；这种升级不影响开发者的使用。第二种是功能性的升级，好比剔除一些过期的方法、新增或加强一些方法等等；这种升级须要了解和学习。第三种就是BUG修复之类的升级，对开发者使用没有影响。

 

学习者有一种担心，好比学了1.3版本的jQuery，那么之后升级新版本是否是还须要重学？不必，由于并非每次升级一个版本都会增长或剔除功能的，一半左右都是内部优化，升级到新版本并不须要任何学习成本。就算在新的版本增长了一些功能，只须要几分钟了解一下便可使用，无需清零以前的知识，只需后续累加。固然，在早期的jQuery版本都建立了最经常使用的功能，而新版本中增长的功能，也不是最经常使用的，无需当即学习，立马用起。

 

 

 

四．jQuery的功能和优点

 

jQuery做为JavaScript封装的库，他的目的就是为了简化开发者使用JavaScript。主要功能有如下几点：

 

1.像CSS那样访问和操做DOM

 

2.修改CSS控制页面外观

 

3.简化JavaScript代码操做

 

4.事件处理更加容易

 

5.各类动画效果使用方便

 

6.让Ajax技术更加完美

 

7.基于jQuery大量插件

 

8.自行扩展功能插件

 

jQuery最大的优点，就是特别的方便。好比模仿CSS获取DOM，比原生的JavaScript要方便太多。而且在多个CSS设置上的集中处理很是舒服，而最经常使用的CSS功能又封装到单独的方法，感受很是有心。最重要的是jQuery的代码兼容性很是好，你不须要老是头疼着考虑不一样浏览器的兼容问题。

 

 

 

五．其余JavaScript库

 

目前除了jQuery，还有5个库较为流行，他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。

 

YUI，是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。

 

Prototype，是最先成型的JavaScript库之一，对JavaScript内置对象作了大量的扩展。

 

Dojo，Dojo强大之处在于提供了其余库没有的功能。离线存储、图标组件等等。

 

Mootools，轻量、简洁、模块化和面向对象的JavaScript框架。

 

ExtJS，简称Ext，本来是对YUI的一个扩展，主要建立前端用户界面。(付费的)

 

 

 

六．是否兼容IE低版本

 

此次jQuery发布了大版本2.x.x，彻底放弃兼容IE6/7/8。不仅仅如此，不少国际上的大型站点也开始逐步再也不支持IE6/7/8。但对于国内而言，比较大型的网站最多只是抛弃IE6，或者部分功能不支持IE6的警示框，还没可能一会儿把IE6/7/8全面抛弃。这里咱们就谈一谈你的项目是否有必要兼容IE6/7/8。

 

彻底不支持IE6的示例：网易云课堂 -- http://study.163.com

 

 

 

 

 

部分功能不支持IE6的示例：Q+ -- http://web.qq.com

 

 

 

 

 

彻底不支持的作法，就是检测到是否为IE6或者IE6/7/8，而后直接跳转到一个信息错误界面，让你更换或升级浏览器，不然没法访问使用。

 

部分功能不支持的作法，就是判断你是IE6或IE6/7/8，而后给一个警示条或弹窗，告诉你使用此款浏览器性能下降或部分功能使用不正常或不能使用的提示，但还能够访问使用。

 

虽然大部分国内网站用IE6去运行都能基本兼容，但不少细节上仍是有些问题，致使不能流畅的去使用。

 

 

 

疑问：咱们新作的项目应不该该再兼容IE6或IE6/7/8？

 

这个问题争论好久，支持兼容的人会拿国情和使用率来证实。不支持兼容的人会用技术落后致使整个落后别国来证实。其实这两种都有商榷的地方。

 

首先，传统行业失败率为97%，而新新的IT行业更高达99%以上（数据可能不精确，但能够说明失败率很高）。那么站在更高的角度去看你的项目，你无论是付出3倍成本去完成一个用户体验通常，但兼容性很好的项目；仍是付出正常成本去完成用户体验很好，但不兼容低版本浏览器；这两种状况无论是哪种，最终可能都会失败。那么你愿意选择哪一种？

 

 

 

是否兼容IE6或IE6/7/8并不单纯是用户基数和国情的问题，而不少项目发起人只一味的用这种理由去断定需求，那么失败也在所不免。除了这个方面，咱们还应该考虑更多的方面：

 

1.成本控制

 

不少项目每每在6、12、18、32...个月就会发生财务问题，好比资金紧缩甚至断裂。因此，成本控制尤其重要。项目若是不是老站升级，也不是大门户的新闻站，成本控制和尽快上线测试才是最重要的。而若是新站一味要求全面兼容，会致使成本加重（随着功能多少，成本倍率增长）。为了锁紧时间，就不停的加班再加班，又致使员工抵触，工做效率下降，人员流动开始频繁，新员工又要接手开发一半的项目。这样成本不停的再累加。最终很多项目，根本没上线就失败了。

 

2.用户选择

 

用户通常能够分为两种用户：高质量用户和低质量用户。所谓高质量用户，就是为了一款最新的3D游戏去升级一块发烧级的显卡，或直接换一台整机。所谓低质量用户，发现不能玩最新的3D游戏，就放弃了，去玩“植物大战僵尸”解解馋算了。在用户选择上有一个很好的案例，就是移动互联网。网易和腾讯在他们的新闻应用上，他们兼容了几乎全部的手机平台，好比IOS、安卓、黑莓、塞班等等，由于新闻应用的核心在新闻，而新闻的用户基数巨大，须要兼顾高质量和低质量用户。而腾讯在IOS上的几十个应用，除了新闻、QQ、浏览器，其余的基本都只有IOS和安卓，在塞班和黑莓及其余上就没有了。

 

因此，你的应用核心是哪方面？兼容的成本有多大？会不会致使成本控制问题？用户选择尤其重要，放弃低质量用户也是一种成本控制。在用户基数庞大的项目上，放弃低质量用户就有点愚笨，好比某个新闻站有1亿用户，2000万为使用低版本浏览器的低质量的用户，而面对2000万用户，你兼容它或单独为2000万作个低版本服务，成本虽然可能仍是3倍，但对于庞大的用户基数来看，这种成本又很是低廉。而你的用户基数只有1000人，而低质量用户有50人，那么为了这50人去作兼容，那么3倍的成本就变得很是的昂贵。

 

3.项目侧重点

 

你的项目重点在哪里？是为了看新闻？是为了宣传线下产品？那么你其实有必要兼容低版本浏览器。首先这种类型的站不须要太好的用户体验，不须要太多的交互操做，只是看，而兼容的成本比较低，而且核心在新闻或产品！但若是你的项目有大量的交互、大量的操做，好比全球最大的社交网已经不兼容IE6/7，最大的微博也再也不兼容IE6/7，就是这个缘由。因此，项目并非一味的全面兼容，或者全面不兼容，主要看你的项目侧重点在哪里！

 

4.用户体验

 

若是你的项目在兼容低版本浏览器成本巨大，好比社交网，有大量的JS和AJAX操做。那么兼容IE6/7的成本确实很高，若是兼容，用户体验就会不好。兼容有两种，一种是高版本浏览器用性能好，体验好的模式；低版本的自动切换到兼容模式。第二种就是，无论高版本或低版本都用统一的兼容模式。这两种成本都很高。用户体验好的模式，能增长用户粘度，增长付费潜在用户，而用户体验差的老是被用户概括为心目中的备胎（所谓备胎就是实在没有了才去访问，若是有，很容易被抛弃）。

 

5.数据支持

 

若是对某一种类型的网站项目有必定的研究，那么手头必须有支持的数据分析。有数据分析能够更好的进行成本控制，更有魄力的解决高低质量用户的取舍。

 

 

 

瓢城Web俱乐部浏览器比例图

 

6.教育用户

 

不少项目多是有固定客户群，或者使用该项目人员质量广泛较高。那么，面对零星一点的低质量用户，咱们不能再去迎合他。由于迎合他，就没法用高质量的用户体验去粘住忠实用户，又不能获取到低质量用户的芳心。因此，咱们应有的策略是：紧紧把握住高质量的忠诚用户，作到他们心目中的第一；教育那部分低质量用户（好比企业级开发项目，能够直接作企业培训，安装高版本浏览器等等。互联网项目，就给出提示安装高版本浏览器便可）。那么一部分低质量用户被拉拢过来，还有一小撮死性不改的就只有放弃。切不可捡了芝麻丢了西瓜，不要贪大求全。

 

 

 

PS：咱们用了这六点讨论了一下是否须要兼容IE6或IE6/7/8，结论就是必须根据实际状况，你项目的成本状况、人员状况、用户状况和项目自己类型状况而制定，没有一刀切的兼容或不兼容。

 

 

 

七．下载及运行jQuery

 

目前最新的版本，是1.10.1和2.0.2，咱们下载开发版，能够顺便读一读源代码。若是你须要引用到你线上的项目，就必须使用压缩版，去掉了注释和空白，是容量最小。

 

本课程使用的软件是：Nodepad++

 

使用测试的浏览器为：Firefox3.6.8、Firefox21+、Chrome、IE6/7/8/9、Opera和Safari

 

使用的版本为：1.10.1、2.02做为抛弃IE6/7/8版本会在单独章节中讲解

 

使用的html版本为：xhtml1.0，在必要的时候将会使用html5

 

使用的调试工具：Firefox下的firebug

 

 

 

//单击按钮弹窗

 

$(function () {

 

$('input').click(function () {

 

alert('第一个jQuery程序！');

 

});

 

});