什么是jQuery？

我们构建了一个完整的指南来帮助您学习 javascript，无论您是刚开始作为 Web 开发人员还是想要探索更高级的主题。

所有关于 jquery

jQuery 由John Resig于 2006 年首次发布，它最初 是一个跨平台的 JavaScript 库，它使编写客户端解决方案变得更加容易。 

在发布时，它特别有用，因为 Internet Explorer、Firefox 和最终的 Google chrome（直到 2008 年才发布）中的 javaScript 实现之间存在不一致。

由维基百科定义：

jQuery 是一个跨平台的 JavaScript 库，旨在简化html的客户端脚本。jQuery 是当今最流行的 JavaScript 库，安装在 Web 上访问量最高的 1000 万个站点中的 65% 上。jQuery 是在 MIT 许可下获得许可的免费开源软件。

此外，jQuery网站本身说：

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使诸如 HTML 文档遍历和操作、事件处理、动画和ajax之类的事情变得更加简单，它具有易于使用的api，可在多种浏览器中运行。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。

但这对我们作为开发人员意味着什么？也许我们了解图书馆提供的所有内容的最佳方式是检查它声称提供的内容。

1. HTML文档遍历

当浏览器呈现网页时，它是所谓的dom（或文档对象模型）的可视化表示。该模型可以在概念上建模为树数据结构，其中存在某些节点，每个节点都具有根和叶。

例如，请参阅Web Step Book 提供的此图像：

当您使用 jQuery 时，您可以轻松地遍历 DOM 的内容，以便到达或找到您要检索的节点、元素或值。

这意味着如果您要查找div具有唯一 ID 的元素的文本，这很容易做到。

/**
 * This code looks for a div with the ID of "my unique element"
 * and then removes it from view.
 */
$( 'div#my-unique-element' ).hide();

如果您尝试遍历所有span元素，您也可以这样做：

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * allow you to iterate through them.
 */
$( 'span' ).each(function() {
    // Process the span element here
});

我们将在下一节中进一步回顾这个特定的功能，因为它会展示一些你可以做的额外的工作来操作页面。

当然，这些示例很简单，但事情 可能会变得更加复杂，尤其是当我们引入方法链时。例如：

$excerpt.on('keydown', function(evt) {
     if ( ( 17 === evt.keyCode || 91 === evt.keyCode ) || 86 === evt.keyCode ) {
if ( -1 === $.inArray( evt.keyCode, keymap ) ) {
keymap.push(evt.keyCode);
}
}
     }).on('keyup', function() {
if (user_has_pasted_content(keymap)) {
resize_textarea(this);
keymap = [];
}});

在这一点上，您不应该知道代码发生了什么，但它旨在通过使用辅助函数和方法链向您展示 jQuery 在某些情况下的有用性。

可以这么说，jQuery 的强大之处在于它能够查询 DOM（因此得名 jQuery），然后通过使用有据可查的 API对其进行调整（其中充满了如何使用每个函数的示例） .

有人可能会争辩说，其他一切都仅源于该功能。话虽如此，让我们继续看看它的一些样子。

2. HTML 文档操作

在实际操作 DOM 时，jQuery 有 很多函数可以让我们改变访问者看到的内容。 

其中一些功能很简单，例如允许我们show或hide在页面加载时不可见的元素。其他功能允许我们创建新元素并将append它们添加到现有元素，或者prepend将它们放在整个列表的前面。

如果您尝试遍历所有span元素以向它们添加类属性，您也可以这样做：

/**
 * This is the basic way to set up a loop in jQuery. It will
 * take all of the span elements on the page and then
 * add a custom class attribute to them.
 */
$( 'span' ).each(function() {
    $( this ).addClass( 'my-custom-class' );
});

这只是jQuery中可用的 DOM 操作功能的皮毛。通过查看 API，在Manipulation部分下，您可以看到有多少选项可供我们使用（以及很好的示例）。

为了进一步举例，我们还可以：

• 确定文档、窗口或任何给定元素的高度或宽度

• 从任何给定元素中获取值（假设它提供了这种能力）

• 切换类名

• 以及更多

请记住，使 jQuery 成为许多开发人员的有吸引力的解决方案的原因之一是我们在本文中看到的所有函数和示例都是跨浏览器兼容的。 

3. 事件处理

如果您是 JavaScript 的新手，那么了解它如何与 Web 浏览器中显示的页面一起工作的关键之一是它响应各种事件。

也就是说，当用户点击一个元素、进行击键或点击鼠标时，浏览器会发出与发生的事件相对应的信号。这使我们能够利用用户与浏览器的交互。 

具体来说，每次用户 对页面进行操作时，我们都可以使用自定义事件进行响应。问题是并非每个浏览器都以相同的方式实现事件（这就是为什么需要规范，但这是另一篇文章的内容）。 

幸运的是，jQuery 通过为所有事件定义一个一致的名称使这变得更加容易，这样我们就可以对我们试图响应的事件使用相同的名称，并且它可以在所有主要浏览器中工作。

4.动画

jQuery 刚出现时，Flash 还比较流行，网络上的一般动画还没有完全消亡。 

但是，当我们在 jQuery 的上下文中谈论动画时，我们谈论的并不是我们习惯于在旧技术中看到的相同类型的效果或行为。相反，我们谈论的是给用户反馈 屏幕上发生了某些事情的效果。此外，它的侵入性更小，并且在正确使用时可以为页面或应用程序增加一种很好的风格感（但任何东西都可能被滥用）。

您可以在此页面上查看整个效果 API ，但值得注意的是，jQuery 的效果可以在任何范围内处理，从处理简单的淡入淡出元素或将元素滑动到视图中，到更复杂的事情，例如操作已注册的效果队列向一个元素开火。

诚然，后一种情况假设您对效果 API 有一些经验，但只要有足够的时间使用库和文档，这是自然而然的事情。

5. 阿贾克斯

如果您不熟悉 Ajax，它本质上是一种网页可以调用服务器、处理响应并更新页面的一部分而无需刷新整个页面的方式。尽管该技术已经存在了很长一段时间，但它仍然非常酷，并且如果使用得当且有效，它可以在页面或 Web 应用程序的上下文中提供一些非常简洁的功能。

尽管对 Ajax 的支持不像五、十年前那么糟糕，但跨浏览器的 API 实现可能会略有不同。这意味着我们的任务是专门为 Microsoft 提供、Google 提供、Apple 提供、Chrome 提供等等的浏览器编写 Ajax 代码。

至少，在没有 jQuery 的情况下是这样。由于它对 Ajax 的支持，我们可以以多种不同的方式利用 Ajax，而不必解决跨浏览器的不一致问题。事实上，它非常容易处理GET和post请求，同时还能够使用该方法进行更高级的调用$.ajax。

一旦您习惯了在您的应用程序的核心中使用 API 或供您使用，就很难想象不使用它（或使用类似的东西）。

关于可扩展性的一句话

许多服务器端框架和库提供的一项功能是能够创建核心代码库的扩展。现代客户端库和框架允许这样做，jQuery 也不例外。

例如，假设您在一个特定的领域工作，您发现自己在其中为每个项目创建相同的功能。或者，如果您有一个正在销售的产品，并且您有一些需要与 jQuery 集成的自定义代码，但它可能需要不同的参数，具体取决于项目。

那你怎么办呢？

幸运的是，jQuery 支持插件。这意味着作为开发人员，我们不仅能够利用其他人编写的插件（其中一些在jQuery 网站上可用，其他在 GitHub 上可用），而且我们还能够开发自己的插件.

然后，我们可以在我们自己的项目中重用这些代码，或者在 GitHub 等网站上提供这些代码，以供其他人提供贡献、修复、功能等。

其他 jQuery 项目

自诞生以来，jQuery 已经发展成为不仅仅是一个 JavaScript 库，它为我们提供了以跨平台兼容的方式执行简单而强大的操作的能力。 

除了核心库之外，jQuery 还产生了另外两个值得注意的项目，在我们结束本文之前值得一提。虽然我们不打算查看每个项目提供的细节，但我们将对每个项目进行高级视图，如果没有其他原因，除了了解我们在未来工作中需要它时可以使用什么。

jQuery 用户界面

从 jQuery UI主页：

jQuery UI 是一组精心设计的用户界面交互、效果、小部件和主题，构建在 jQuery JavaScript 库之上。无论您是构建高度交互的 Web 应用程序，还是只需要向表单控件添加日期选择器，jQuery UI 都是完美的选择。

这个库于 2007 年首次发布，比 jQuery 本身晚了大约一年。它是 jQuery 的补充库，因为它利用库的跨平台兼容性来帮助创建可在整个网站中使用的小部件。

许多小部件包括常用的功能。例如：

• 日期选择器

• 对话框

• 进度条

• 工具提示

• 自动完成

• 和更多

还有一些高级功能，例如效果、实用程序和交互。到目前为止，我们所涉及的所有内容（以及我们尚未涉及的内容）都包括各种各样的回调、属性和函数，它们使我们能够最大程度地与它们进行交互。

所有上述功能还提供各种主题，以确保它们适合您网站的外观和感觉。最后，此处列出并包含在网站上的所有功能都有详细记录。

jQuery 移动

从jQuery Mobile主页：

jQuery Mobile 是一个基于html5的用户界面系统，旨在制作可在所有智能手机、平板电脑和桌面设备上访问的响应式网站和应用程序。

该库是 2010 年发布的库系列中的最新引入（最后一个稳定版本是在 2014 年）。

就像它的 UI 对应物一样，它提供了一个文档齐全的 API和自定义主题，非常适合您的项目可能针对的各种设备。

前两个库提供了一组跨平台功能，使我们能够以相对简单的方式编写 jQuery 和随附的小部件，而 jQuery Mobile 包含一个css 框架，使我们还可以设计适合我们的性质的用户界面。各自的项目。 

该框架包括：

• CSS 类

• 网格

• 响应式网格

• 默认主题

从那里，该库提供了您对项目的期望，该项目旨在使各种移动设备的 Web 开发变得更加容易。其中包括：

• 一致的图标集

• 在大量设备上运行的事件

• 活动页面的属性

• 许多非常适合移动界面的小部件

最后，仍然可用并在野外使用的浏览器数量很高。尽管我们看到旧版 Internet Explorer 的使用量有所减少，并且 Chrome 的使用范围更广，但出于多种原因，我们仍然有某些用户坚持使用旧版浏览器。

有时，由于公司内部网的性质，这些用户使用的是旧版浏览器。有时这与分配给他们工作的移动设备和/或电话有关。有时它只是与无法升级到更好的东西有关。

不过没关系。jQuery Mobile 支持大多数当前可用的浏览器和操作系统。如果您不确定库是否支持您的目标平台，您可以随时查看浏览器支持页面。

其他资源

• jQuery 学习中心

• 学习 jQuery，第四版

• jQuery in Action，第三版

• 简洁的 jQuery

• 为什么 jQuery 未定义？

• 20 个有用的 jQuery 滑块

• 不常见的 jQuery 选择器

• 在 jQuery 中创建查找和替换插件

结论

了解 jQuery 是什么（以及它不是什么）以及它与 JavaScript 的关系非常重要，这样您就可以知道正在为您做什么以及在需要使用该库时可以做什么。

如前所述，有些人可能会认为您需要先学习 JavaScript，然后再学习 jQuery；其他人可能会争辩说，学习 jQuery 是一种很好的方式来回溯 JavaScript。

无论如何，jQuery 是 JavaScript 经济中一个长期存在的库，并且被用于许多非常流行的项目（例如wordpress）中，因此学习它将使您以多种不同的方式获得优势。