转自个人博客
思考篇
一. 什么是 jQuery?
jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方
法。
它的作者是JohnResig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。
它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。
jQuery的版本
随着jQuery的不断进化,发展也变成了两条进化线:
2006 年 8 月发布了 jQuery1.0,第一个稳定版本,具有对 CSS 选择符、事件处理和
Ajax 交互的支持。
2010 年 2 月发布了 jQuery1.4.2,添加了.delegate()和.undelegate()两个新方法,提升了灵活性和浏览器一致性,对事件系统进行了升级。
2011 年 1 月发布了 jQuery1.5,重写了 AJAX 组件,增强了扩展性和性能。
2013 年 5 月发布了 jQuery1.10,增加了一些功能。
到此,jQuery的以上版本都有非常好的浏览器兼容性,支持所有浏览器,当然包括了IE6/7/8。但是直到下面这条线的出现:
2013 年 4 月发布了 jQuery2.0,5 月发布了 jQuery2.0.2,一个重大更新版本,不在支持 IE6/7/8,体积更小,速度更快。
目前最新版本分别是jQuery 2.1.4 和jQuery 1.11.3 。
现在两条线同时发展,可供大家选择。
根据项目要求来选择版本,下面有介绍
关于版本学习的问题:
版本的版本号升级主要有三种:
第一种是大版本升级,比如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 修复之类的升级,对开发者使用没有影响。
所以综上所述:
有一半左右的升级都是内部优化,升级到新版本并不需要任何学习成本。就算在新的版本增加了一些功能,只需要几分钟了解一下即可使用,无需清零之前的知识,只需后续累加。
当然,在早期的 jQuery 版本都创建了最常用的功能,而新版本中增加的功能,也不是最常用的,无需立即学习,立马用起。
选择一个版本开始学习吧!
二. jQuery 的功能和优势
jQuery 作为 JavaScript 封装的库,他的目的就是为了简化开发者使用 JavaScript。主要
功能有以下几点:
像 CSS 那样访问和操作 DOM
修改 CSS 控制页面外观
简化 JavaScript 代码操作
事件处理更加容易
各种动画效果使用方便
让 Ajax 技术更加完美
基于 jQuery 大量插件
自行扩展功能插件
jQuery 最大的优势,就是特别的方便。比如模仿 CSS 获取 DOM,比原生的 JavaScript
要方便太多。并且在多个 CSS 设置上的集中处理非常舒服,而最常用的 CSS 功能又封装到
单独的方法,感觉非常有心。
最重要的是 jQuery 的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。
其次像《编写高质量代码–web前端开发修炼之道》作者曹刘阳在微博上说的jq的强大真的只在那个$选择器吗?太小看jq了,私以为jq真正强大和坚挺的原因有3:
1、工业标准,我不知道未来还有谁能像jq一样,api上犀牛书。总之是前无古人,后面恐怕也难有来者。
工业标准有多可怕和难以撼动,会超出你想像。看看php就知道了。
2、jq的api设计对于原生js的改良。
3、jq丰富的插件积累。
我也疑惑过,随着现在前端框架angular
和react
的流行,乱花渐欲迷人。微博上神仙打架,疑惑的是我们这些前端初学者,不过我是这样认为的:
与其把时间花在前端框架的选择上。不如先把花在这个已经成为工业标准的库上,万物殊途同归 ,最终还是在JS做文章不是吗?
三. 是否兼容IE低版本
主要是从下面几个方面考虑:
1. 成本控制
项目如果不是老站升级,也不是大门户的新闻站,成本控制和尽快
上线测试才是最重要的。而如果新站一味要求全面兼容,会导致成本加剧(随着功能多少,
成本倍率增加)。为了锁紧时间,就不停的加班再加班,又导致员工抵触,工作效率降低,这样成本不停的再累加。最终很多项
目,根本没上线就失败了。
2. 用户选择
高质量用户和低质量用户
例如一个3D游戏,和一款新闻应用:网易和腾讯在他们的新闻应用上,他们兼容了几乎所有的手
机平台,比如 IOS、安卓、黑莓、塞班等等,因为新闻应用的核心在新闻,而新闻的用户基
数巨大,需要兼顾高质量和低质量用户。而腾讯在 IOS 上的几十个应用,除了新闻、QQ、
浏览器,其他的基本都只有 IOS 和安卓,在塞班和黑莓及其他上就没有了。
所以,你的应用核心是哪方面?兼容的成本有多大?会不会导致成本控制问题?用户选
择尤为重要,放弃低质量用户也是一种成本控制。在用户基数庞大的项目上,放弃低质量用户就有点愚笨,而你的用户基数只有 1000 人,而低质
量用户有 50 人,那么为了这 50 人去做兼容,那么 3 倍的成本就变得非常的昂贵。
3. 项目侧重点
你的项目重点在哪里?是为了看新闻?是为了宣传线下产品?
那么你其实有必要兼容低版本浏览器。
首先这种类型的站不需要太好的用户体验,不需要太多的交互操作,只是看,
而兼容的成本比较低,并且核心在新闻或产品!
但如果你的项目有大量的交互、大量的操作,兼容成本较高,比如全球最大的社交网已经不兼容 IE6/7,就是这个原因。所以,项目并不是一味的全面兼容,或者全面不兼容,主要看你的项目侧重点在哪里!
4. 用户体验
如果你的项目在兼容低版本浏览器成本巨大,比如社交网,有大量的 JS 和 AJAX 操作。
那么兼容 IE6/7 的成本确实很高,如果兼容,用户体验就会很差。
兼容有两种:
一种是高版本浏览器用性能好,体验好的模式;低版本的自动切换到兼容模式。
第二种就是,不管高版本或低版本都用统一的兼容模式。
这两种成本都很高。用户体验好的模式,能增加用户粘度,增加付费潜在用户,而用户体验差的总是被用户归纳为心目中的备胎(所谓备胎就是实在没有了才去访问,如果有,很容易被抛弃)。
5. 数据支持
如果对某一种类型的网站项目有一定的研究,那么手头必须有支持的数据分析。
有数据分析可以更好的进行成本控制,更有魄力的解决高低质量用户的取舍。
6. 教育用户
很多项目可能是有固定客户群,或者使用该项目人员质量普遍较高。那么,面对零星一
点的低质量用户,我们不能再去迎合他。因为迎合他,就无法用高质量的用户体验去粘住忠实用户,又不能获取到低质量用户的芳心。
所以,我们应有的策略是:
牢牢把握住高质量的忠诚用户,做到他们心目中的第一;
教育那部分低质量用户(比如企业级开发项目,可以直接做企业培训,安装高版本浏览器等等。互联网项目,就给出提示安装高版本浏览器即可)。
那么一部分低质量用户被拉拢过来,还有一小撮死性不改的就只有放弃。切不可捡了芝麻丢了西瓜,不要贪大求全。
结论就是:结论就是必须根据实际情况,你项目的成本情况、人员情况、用户情况和项目本身类型情况而制定,没有一刀切的
兼容或不兼容。
四. 下载及运行
目前最新版本分别是jQuery 2.1.4 和jQuery 1.11.3 。下载开发版,可以顺便读一读源代码。
下载jQuery:
百度静态资源共享库 CDN,直接部署网上的地址
当然你要是看了我写的一个前端程序猿的Sublime Text3的自我修养的话就更加简单了,直接就可以用编辑器下载
参考手册:
中文在线手册CSS88:jQuery快速API参考
官方英文文档jQuery API,可配合浏览器翻译插件
第一个jQuery程序
//已经引入jQ,在body内写入如下代码
<button>按钮</button>
<script type="text/javascript">
$(function(){
$("button").click(function() {
alert("hello jQuery!");
});
});
</script>
基础核心
一. 代码风格
在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起
始的。而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写:
$(function () {}); //执行一个匿名函数
$(‘#box’); //进行执行的ID元素选择
$(‘#box’).css(‘color’, ‘red’); //执行功能函数
由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:
jQuery(‘#box’).css(‘color’, ‘red’);
//jQuery恒等于$
// console.log(jQuery===$);//true
且,每一次执行函数后,都会返回一个jQuery对象。如下:
$('#box').css('color', 'red').css('font-size', '50px'); //连缀
二. 加载模式
我们在之前的代码一直在使用
$(function () {});
这段代码进行首尾包裹,那么为什么必须
要包裹这段代码呢?
原因是我们jQuery库文件是在body元素之前加载的,我们必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。使用
document.ready()
,只需要等待DOM加载完成就执行。我们的原生Javascript也有一个延迟加载的方法
onload
,当网页内容全部加载完成后执行(例如图片等大文件未加载完成之前,JS功能处于假死状态)。下面来看看它们
load
和ready
区别到底在什么地方:
区别 | window.onload | $(document).ready() |
---|---|---|
执行时机 | 必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码 | 只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码 |
执行次数 | 只能执行一次,如果第二次,那么第一次的执行会被覆盖 | 可以执行多次,第N次都不会覆盖上一次 |
简写方案 | 无 | $(function () {}); |
慕课网的DOM探索之基础详解篇 有对DOM Ready的一些介绍。
三. 对象互换及处理多个库之间的冲突
1. 对象互换。
首先我们来看一下这段代码:
alert($);//返回jQuery对象方法内部函数
alert($());//[object object],返回jQuery对象
alert($("#box"));//[object object],返回jQuery对象
alert(document.getElementById("box")); //[object HTMLDivElement],返回原生DOM对象
如何进行转换呢?
jQuery 想要达到获取原生的 DOM 对象,可以这么处理:alert($('#box').get(0)); //ID 元素的第一个原生 DOM
从上面 get(0),这里的索引看出,jQuery 是可以进行批量处理 DOM 的,这样可以在很
多需要循环遍历的处理上更加得心应手。
当然要重新转化成jQuery对象的话,只需要使用$()包裹原生对象就可以了。
2. 多个库之间的冲突
当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同
一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免。
jQuery 只不过是 DOM 操作为主的库,方便我们日常 Web 开发。但有时,我们的项目有更多特殊的功能需要引入其他的库,比如用户界面 UI 方面的库,游戏引擎方面的库等等一系列。
所以jQuery提供了一个方法:jQuery.noConflict();
:将$符所有权剔除。
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// 现在就$所有权就不归jQuery了。
</script>
同时还可以使用
var $\$ = jQuery;
:这样$\$
,就完全实现了原来$函数的功能。