欢迎来到KnowledgeCity的课程 在高级JavaScript上。 在本课程的这一章中,我们将研究jQuery。 让我们先谈谈您可能想要的原因 考虑使用jQuery,因为有很多 的JavaScript库。 这一个有什么好处? 好吧,首先,它很受欢迎。 前几天我读了一个统计数字, 使用JavaScript的所有网站中有96%使用jQuery, 占所有网站总数的75%以上。 因此,它非常受欢迎。 一定有原因 是的,这是有原因的。 您可以用更少的代码来做更多的事情。 首先,操纵文档对象模型。 例如,使用常规JavaScript, 我想选择DOM中的所有段落, 我会用document.querySelectorAll来做到这一点。 使用jQuery,这就是我要做的。 而且我们可以编写的代码更少, 我们可以踢出更多代码并提高生产力, 而且我们确实希望如此。 因此,jQuery在DOM操作方面表现出色。 这也大大简化了AJAX调用 比quote-unquote更好,常规的JavaScript可以做到。 它确实有一个相当大的效果库 利用CSS的效果。 最重要的是 因为我们也不想为此担心 它抽象出了跨浏览器的问题。 jQuery只是一个库, 这是一个非常广泛的图书馆 正如您在本课程中安装后所看到的。 但是它做的一件事 是否抽象出了跨浏览器的问题, 这样我们就不必担心。 我们的jQuery代码也应同样运行 在任何类型的浏览器中,而无需我们 担心世界上大多数浏览器特性。 说了这么多, 希望我们提出了你要去的情况 对此感兴趣。 让我们看一下我们安装它的方式。 现在,对于本课程, 我将使用Visual Studio。 这是完整的Visual Studio, 我在这里拥有的是Community Edition。 因此,这里提供了所有工具, 如果没有它,可以免费下载。 现在,我意识到有很多 您可能想为jQuery编写不同位置的信息 或来自您所使用的不同技术, 所以我将在这里展示几种不同的方法 然后我们将讨论我们需要做什么 使其成为应用程序的一部分 我在这里跑。 但首先,最简单的事情 就是去得到它。 所以我们可以去jquery.com, 那里有文件, 关于如何使用它的很好的例子。 但是您可以直接从此处下载jQuery。 截至目前的最新版本 该记录的是3.5.1, 这就是我将在项目中使用的内容。 如果您不想直接安装它, 与大多数流行的图书馆一样, 您也可以使用CDN。 因此,您只是链接到任何最接近的版本, 并使用jQuery,它们确实为您提供了这四个选项。 未压缩,缩小,苗条 和苗条缩小。 因此,根据您在项目中的位置, 您将在这里使用其他的。 通常,我们使用未压缩的版本 在开发时,以便我们可以进行一些调试, 然后在生产时将其缩小,以便我们的应用 性能更高,运行更流畅,文件更小。 所有这些东西。 如果您想使用CDN, 您只需单击该链接,然后就有您的脚本链接。 所以我可以复制到那里 正如它所说的那样,交叉源和完整性就在那里 用于SRI检查。 所以,如果我要这样做,那就是我所要做的 在任何我想提供的文档中。 其他选项,如果您使用的是NPM, 我们可以从Visual Studio中做到这一点。 我需要做的是在此处打开命令行, 还有我为此提供的一个不错的小工具, 打开命令行。 这是可以添加到Visual Studio的扩展。 因此,如果您不是专门使用Visual Studio, 不用太担心这部分。 但我喜欢将此作为扩展 你可以在这里添加扩展 通过扩展菜单。 但是Open Command Line给了我PowerShell 或我的Dev命令提示符或Default命令提示符。 对于这一点,这并不重要。 但是我没有的好东西 担心我什么时候做 注意到它把我放在那里 在我需要放入的文件夹中, 因为我要在这里做 只是使用NPM安装jQuery,所以是Node Package Manager。 包的名称只是jQuery。 您可以看到, 好像我们没有安装NPM。 好吧,这很容易解决。 好了 您可以同时获得Node js和NPM。 所以我要继续安装那个。 我们将让它做它的事情,然后再返回。 好吧,我们又回到了视频的魔力中。 让我们看看当前是否已安装NPM。 很好,我们获得了文档。 并确保jQuery进入该目录, 再说一遍,这很简单 该软件包的名称仅为jQuery 这应该为我们安装了所有东西。 因此,在这个特定的项目中, 最终为我做了什么 正在创建节点模块文件夹。 现在,如果这在您的项目中显示为灰色 或者,如果您根本看不到它, 这是我们在Visual Studio中获取它的方法。 首先,我们要确保显示所有文件 显示所有文件。 而且您会在此处看到文件夹和文件 实际上不属于您的解决方案的一部分 但它们在目录中。 因此,举例来说,如果您的人出现了, 然后我们要在其中包含在项目中, 使其成为项目的一部分。 这就是我们所有节点程序包的最终结果。 这就是jQuery所在的位置。 现在,对于这种特殊的项目, 我正在做一个ASP.NET Core应用程序。 对于这种特定的项目类型, 为了提供静态文件, 我必须在startup.cs文件中进行一项更改。 所以,再次,如果您不使用Visual Studio 或核心应用程序项目的构建方式, 不用担心这部分 让NPM安装jQuery,但是您可以做到 然后继续使用它。 但是对于这种特定的应用程序类型, 我们需要此调用才能使用静态文件, 这只是应用程序需要的东西。 而我只是走我的应用程序的根路径, 将节点模块文件夹固定在该文件夹上, 这样它将为jQuery提供服务 该特定位置的位置。 现在,当我最终这样做时,请回到页面上 为了获得参考, 它仍然只是脚本参考。 来源是我们要去 从节点模块上向下。 因此,我们在其中有了jQuery包。 而且,让我们来看一下,我相信它在另一个子文件夹中。 所以有dist,我要用 无论那里有什么jQuery文件。 这样就是jQuery.js。 因此,这些方式中的任何一种都可以。 但是,您想在那里获取该脚本, 任何适合您的方法,那都很好。 让我们测试并确保 我们实际上得到了一些东西。 我们一直称呼的是jQuery函数。 因此,您可以使用实际的单词jQuery。 但是您可能会看到大多数人在做什么 正在使用美元符号。 因此,我们可以选择其中之一,这很好。 现在有可能 其他图书馆会使用美元符号 作为重要的东西。 那你该怎么办 基本上是放弃对美元符号的控制 到其他图书馆(如果有的话) 您可以执行无冲突模式。 因此,例如,我可以将其命名为其他名称, jq很标准, 然后我们将调用jquery.noConflict。 现在,在接下来的工作中, jq调用jQuery函数 然后我们可以做我们需要做的任何事情。 准备好文档是您会发现自己使用的东西 在jQuery应用程序中经常出现。 这是一切加载完毕时运行的。 因此,我不需要任何冲突模式, 我只是在这里简单地使用jQuery函数。 我们正在做的是查看文档对象 然后所有这些都在我们的文档加载时运行。 因此,让我们在这里快速做个小小的问候世界, 并确保我们选择的方法有效。 我现在就继续使用此CDN。 我们会保存一切 我们应该有一个页面。 准备好迎接有史以来最令人难忘的世界了吗? 比您见过的所有其他产品都要好。 好了 你好。 看,它的拼写错误,非常令人难忘。 因此,在本课程中,我们研究了多种方法 在您的项目中安装jQuery。 敬请期待下一堂课, 我们将更多地关注jQuery函数 以及包装好的元素集以及如何使用选择器。