jQuery 是互联网上最流行的 JavaScript 库。根据http://builtwith.com ，超过 87%的网站使用 JavaScript 库。这是一个惊人的渗透量。很难相信 jQuery 自 2006 年才出现。
在本章中，我们将开始让您熟悉 jQuery。我们将讨论以下主题：
- 为什么创建 jQuery？
- jQuery 的主要组件
- 为什么 jQuery 有两个维护版本？
- 什么是内容交付网络？
2006 年似乎不是很久以前的事了，但它几乎是互联网时代的一辈子。如果你不同意，想想你当时有什么样的手机，如果你有的话。当时，四种最流行的浏览器是 Internet Explorer、Firefox、Safari 和 Opera。铬呢？它还不存在，直到 2008 年底才出现。目前为止，80%以上的用户使用的 Internet Explorer 是最受欢迎的。
当时，微软似乎并不太关心是否符合标准。他们为什么要这样做？他们拥有超过 80%的市场份额。如果一个网站必须做出选择，他们通常会选择使用 IE。但变革之风已经吹来了。80%似乎是不可逾越的领先优势，但两年前，这一比例超过了 90%。以 Firefox 为首的其他浏览器正在缓慢但肯定地逐步缩小这一领先地位。包括开发人员在内的许多人都在转向其他浏览器，他们希望网站能在这些浏览器上运行。
不幸的是，编写 web 应用程序现在很困难，而那时更糟。JavaScript 并不是最友好的编程语言。但 JavaScript 不是问题所在；浏览器是问题所在。相同的代码在不同的浏览器上运行，行为也不同。一方面，它运行得很好；另一方面，它崩溃了，用户感到沮丧。
为了理解如何在浏览器实现中的差异可能导致大量的额外工作为开发人员，让我们来看看如何实现 JavaScript java 调用。2006 年，W3C（万维网联盟标准没有涵盖所有 Ajax 请求的核心XMLHttpRequest对象。微软早在 1999 年就用 InternetExplorer 版本 5 发明了这项技术。不幸的是，他们选择将其实现为 ActiveX 控件。ActiveX 是 Microsoft 的专有技术，因此其他浏览器无法以同样的方式实现它。Mozilla、Safari 和 Opera 选择将其作为附加到全局窗口的对象来实现。因此，为了将 Ajax 添加到一个可以在所有浏览器上运行的网站，开发人员必须编写、测试和维护两倍于他们应该编写的代码：一组 IE 代码和另一组其他所有人的代码。
你是否在想，检测浏览器是否是 IE 并做一些不同的事情有多难？嗯，你是对的，检测代码运行的浏览器并不难，但很难做到可靠，因为浏览器可能会撒谎。根据 W3C 标准，检测浏览器的方法很简单：
window.navigator.appName此属性应该返回浏览器的名称，但如果您在 Chrome、Safari 或 Internet Explorer 上尝试此属性，它们都返回相同的值“Netscape”。有什么好处？正如我已经说过的，浏览器可以撒谎。
下载示例代码
您可以从您的账户下载示例代码文件 http://www.packtpub.com 对于您购买的所有 Packt 出版书籍。如果您在其他地方购买了本书，您可以访问http://www.packtpub.com/support 并注册，将文件直接通过电子邮件发送给您。
在 90 年代，网站开始检测哪些浏览器正在访问它们。当时，实际上只有三种浏览器：Netscape Navigator、微软的 Internet Explorer 和启动这一切的浏览器 NCSA Mosaic。马赛克是由美国伊利诺伊大学厄本那香槟国家超级计算应用中心创建的。此时，微软和网景之间展开了争夺浏览器霸主地位的真正战斗。两家公司通过在浏览器中添加新功能进行了抗争。
Netscape 在其浏览器中添加的功能之一是框架元素。它很受欢迎。当时的许多网站仅在浏览器为 Netscape Navigator 时才使用框架元素。他们使用window.navigator.appName或window.navigator.userAgent检查网景。Navigator 的代码名是 Mozilla，它包含在用户代理字符串中。后来，当微软将框架元素添加到 IE 中时，网站继续不向 IE 提供基于框架的内容，因为它们只通过名称而不是特征检测来识别浏览器。于是，他开始撒谎。它从window.navigator.appName返回 Netscape，并将 Mozilla 包含在其用户代理中。现在，为了历史兼容性，许多其他浏览器也在撒谎。
处理浏览器兼容性问题有两种方法。第一种方法是我们已经展示过的：浏览器检测。浏览器检测比你想象的要困难，它可能会产生意想不到的副作用，就像网站在 IE 支持框架后仍无法向 IE 提供框架一样。第二种技术是特征检测，也称为属性嗅探。使用功能之前，应确保浏览器支持该功能。虽然这通常是更难编写的代码，但它对用户更有利。如果某个版本的浏览器不支持该功能，则下一个版本可能支持该功能。特征检测是 jQuery 中使用的方法。
最佳实践
使用特征检测，而不是浏览器检测。如果您需要自己编写代码来检测功能，而不是使用 jQuery 或其他第三方解决方案（如 Modernizer），请始终使用功能检测，而不要使用浏览器检测。
创建 jQuery 的主要原因之一是让开发人员不必检查所有的功能，这些功能在可用浏览器上的实现方式不同。事实上，jQuery 的座右铭是“少写，多做”。jQuery 的目标之一是让开发人员不用编写管道代码，而是专注于为他们的网站添加功能。
查看 jQueryAPI 页面http://api.jquery.com ，对于来说，这是第一次可以让人头脑麻木。它列出了 300 多种不同的方法。不要惊慌失措；有一种方法可以消除这种疯狂。大多数 API 方法可以分为几个类别。
这些方法为 jQuery 命名。它们可以帮助您在文档对象模型（DOM中查找一个或多个元素。如果您了解浏览器 JavaScript，您可能会想这有什么大不了的？始终可以查询 DOM。有document.getElementById、document.getElementsByClassName等。但是 jQuery 的接口比任何这些方法都干净得多。jQuery 使用 CSS 样式选择器来解析 DOM，并一致地将 jQuery 对象作为零个或多个元素的数组返回。
document 方法根据您调用的方法返回不同的内容。如果调用document.getElementById，则返回元素对象，如果找不到元素，则返回 null。对于document.getElementsByClassName，它返回HTMLCollection，一个类似数组的对象。
一旦您找到一个元素，您通常会希望以某种方式对其进行修改。jQuery 有一套广泛的操作方法。内置文档方法无法比较。jQuery 的方法允许您删除或替换标记。也可以在旧标记之前、之后或周围插入新标记。
能够处理事件对于创建动态网站至关重要。虽然现代浏览器几乎都遵循标准，但几年前就不是这样了。jQuery 使得从同一个代码库支持现代和旧浏览器成为可能。
互联网上很多网站都有一个或多个论坛将用户信息发送回 web 服务器。这些方法使将信息发送回服务器变得更容易。
CSS 方法是方便的方法，有助于处理类以及元素的位置和维度。与内置 JavaScript 方法不同，它们的作用远不止读取类属性的字符串；它们允许您添加、删除、切换和检查类的存在。
动画方法很简单，但会给你的网站增添光彩。您不再需要满足于标记的出现或消失；现在，它淡入淡出，甚至滑入淡出。如果您愿意，可以使用 jQuery 的效果框架来创建自己的自定义动画效果。
正如我们已经讨论过的，Ajax 是 jQuery 的主要特性之一。即使您不需要支持传统浏览器，jQuery 的 Ajax 方法也比浏览器的方法干净得多。它们还内置了对异步成功和错误函数的支持，甚至可以返回 JavaScript promise 对象。
最后一组主要的 jQuery 方法是关于帮助函数的，例如迭代集合的.each()。jQuery 还添加了确定 JavaScript 对象类型的方法，而且语言中奇怪地缺少它的功能。此外，它还添加了其他不适合分类的方法。
经过近 7 年的发展，jQuery 开始显示出它的时代。1.8 版本是一个主要版本，包括对 Sizzle 选择器引擎的重写和对动画的改进，但还需要更多。接口中存在一些不一致的地方，有很多不推荐的方法，还有很多代码需要彻底清理。因此，版本 1.9 由 jQuery 和 jQuery 迁移插件组成。
jQuery 开发团队认为 1.9 是一个巨大的变化，他们创建了 jQuery 迁移插件来帮助简化转换。Migrate 插件包含了所有不推荐使用的方法，这听起来很奇怪，但在其开发版本中，它的控制台记录了不推荐使用的方法的使用情况。这为开发人员提供了一个工作站点和一种了解需要修复哪些问题的方法。生产版本不做任何额外的日志记录。
2.0 版本几个月后发布，带来了一位朋友。开发团队继续关注平台的重量和速度，决定放弃对 9 以下所有版本 Internet Explorer 的支持。jQuery 中的大量代码是专门为旧版本的 InternetExplorer 编写的。差别是巨大的。jQuery1.10 的最小化版本为 93KB，而 jQuery2.0 的最小化版本为 83KB，大小减少了近 11%。
因此，在目前和可预见的未来，jQuery 将有两个版本：支持大多数浏览器的 1.x 版本，包括 InternetExplorer 版本 6、7 和 8。x 版本支持所有现代浏览器，包括 IE 9 及更高版本。需要注意的是两个版本都有相同的 API，尽管它们的内部结构不同。
jQuery 的每个分支都有两个版本：缩小版和未缩小版。未缩小的版本仅用于开发。它允许您在调试时轻松地单步执行 jQuery 代码，并提供更有意义的堆栈跟踪。应在生产中使用缩小版。它经过了缩小，删除了所有不必要的空白，并重命名了 JavaScript 变量和内部方法。缩小可缩短文件的下载时间。jQuery 2.1.1 的开发版本是 247KB，而生产版本只有 84KB。
如果需要调试 jQuery 的简化版本，可以下载源映射文件。源映射允许您访问原始调试信息，并且所有现代浏览器（包括 IE）都支持源映射。
您的站点加载速度越快，越鼓励更多的访问者稍后返回。另一种加快加载时间的方法是使用内容交付网络或CDN。CDN 的魔力是双重的。首先，CDN 通常位于边缘服务器上，这意味着它们不是托管在单个物理位置，而是位于 Internet 上的多个位置。这意味着可以更快地找到和下载它们。其次，浏览器通常会在用户的机器上缓存静态文件，加载本地文件比从互联网下载要快几个数量级。CDN 被许多大公司和小公司使用。因此，其中一个可能正在使用站点所需的 jQuery 副本，并且已经在用户机器上本地缓存了该副本。所以，当你的网站要求它的时候，瞧，它已经在那里了，你的网站免费获得了一个不错的性能提升。
现代浏览器的功能远远超过了几乎被遗忘的祖先。对于一个新的 web 开发人员来说，想知道 jQuery 为什么存在是很容易的。在本章中，我们通过查看 jQuery 之前的 web 开发情况来探讨其存在的原因。然后，我们将 jQuery 的 API 分解为易于消化的主要组件。我们了解了为什么 jQuery 有两个维护版本是有意义的，以及为什么每个版本有两种不同的形式。在下一章中，我们将开始深入研究 API，并学习如何编写选择器和过滤器。