jQuery入门笔记之（零）思考与基础核心

转自我的博客

思考篇

一. 什么是 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。主要
功能有如下几点：

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

2. 修改 CSS 控制页面外观

3. 简化 JavaScript 代码操做

4. 事件处理更加容易

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

6. 让 Ajax 技术更加完美

7. 基于 jQuery 大量插件

8. 自行扩展功能插件

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

其次像《编写高质量代码--web前端开发修炼之道》做者曹刘阳在微博上说的jq的强大真的只在那个$选择器吗?过小看jq了，私觉得jq真正强大和坚挺的缘由有3：

一、工业标准，我不知道将来还有谁能像jq同样，api上犀牛书。总之是前无古人，后面恐怕也难有来者。
工业标准有多可怕和难以撼动，会超出你想像。看看php就知道了。
二、jq的api设计对于原生js的改良。
三、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;：这样$\$，就彻底实现了原来$函数的功能。