jQuery学习线路图：如何学习jQuery？分步指南

2021年11月28日18:22:52 发表评论 775 次浏览
如何学习 JQuery
如何学习jQuery？

jQuery学习指南介绍

JQuery是一个 JavaScript 库。它快速、丰富、易于学习，并且是一个“多写少做”的库。在 JQuery 的帮助下，你可以将用 JS 编写的多行代码包装成只需一小段代码即可调用的函数。它简化了许多复杂的任务，例如 DOM 操作、事件处理、动画、HTML 文档遍历和 AJAX。完美定义且易于使用的 JQuery API 可在许多 Web 浏览器上运行，并使 JavaScript 编程变得容易-peasy-lemon-squeezy。此外，JQuery 的插件可以执行几乎所有使用纯 JavaScript 执行时需要大量代码的任务。 

为什么要学习 JQuery？

jQuery学习线路图：目前，大量开发人员都在加入 JQuery 的潮流，为什么不呢？JQuery 将跨浏览器的怪癖、互操作性问题和标准化问题归零。它创建了一个抽象层，负责所有的变通方法。让我们先来看看为什么 JQuery 在企业级如此受欢迎的一些原因。

  • 它促进了简单性：任何进入 JavaScript 世界的人都会发现学习 JQuery 非常直观且易于学习。它具有简单的语法和开放的编码标准，可让你创建出色的网站。
  • 即使禁用 JS，它也会显示：如果在任何浏览器上都没有安装 Adob​​e Flash，可能会出现许多渲染问题。因此，开发人员必须花费大量时间为那些缺少 Flash 插件的浏览器编码。但是有了 JQuery，他们就不必再这样做了。
  • 它可以创建动画应用程序：就像 Flash 一样，JQuery 使用 o、HTML、CSS、JS 和 AJAX 的组合，可以让你实现漂亮的效果。因此，你不必单独聘请 Flash 开发人员。
  • 页面加载速度更快：页面加载时间如果较慢，则会降低你网站的性能和在搜索引擎中的排名。实现更快加载时间的最佳方法是采用需要很少代码行并且仍然可以达到预期结果的编码实践。JQuery 为你提供了仅在需要时加载标签的选项，从而提高了速度。
  • 它是 SEO 友好的：有大量可用的插件可以帮助你优化搜索引擎的 JQuery 片段。你可以使用简单的无序列表嵌入所有元素，这是提高 SEO 排名的一种良好而健康的做法。

不用说，你应该在下一个 Web 开发项目中采用 JQuery 的原因有很多。首先，它免费且易于使用；它通过向客户端推送内容来减少等待时间；它比闪存小，因此播放更流畅。此外，它可以在任何地方使用，消除了兼容性问题并且学习曲线低。最重要的是，它对 SEO 友好且符合 CSS。

虽然 JQuery 的使用在过去确实显着下降，但由于 ReactJs 和 AngularJs 获得了巨大的普及，但它仍然被认为是遗留技术并受到许多人的青睐。

   来源：https://insights.stackoverflow.com/trends?tags=jquery%2Cangular%2Cangularjs%2Creactjs%2Cvue.js

JQuery 确实不可能恢复其突出地位。但是，它的遗产将继续存在。这背后的主要原因是 Bootstrap 在其几乎所有代码片段中仍然使用 JQuery。因此，如果你是 bootstrap 的粉丝，那么你也必须学习 JQuery。 

此外，从工作的角度来看，除了 Vue、React、Angular 等现代框架之外，在你的投资组合中包含 JavaScript 和 JQuery 总是好的。当你申请 web 开发角色，甚至是前端开发人员时，他们都希望你对 JS、JQuery 和 AJAX 有基本的了解。尽管如此，JQuery 仍然有它自己的用途。它仍然用于许多项目，从企业级电子商务应用程序到简单而时尚的登录页面。如果你不擅长 CSS，它仍然适用于快速原型制作甚至动画。它可能已经过时，但它肯定没有死。 

先决条件

在接触 JQuery 之前，你需要对以下主题有更深入的了解。

  • 你应该了解并使用过CSS和HTML的基础知识。你应该具有创建简单网站的实践经验并理解 CSS 中的选择器，例如类、ID 和伪元素。
  • 你还应该有一个基本的理解，并且已经研究过编程的基础知识。也可以在没有JavaScript高级知识的情况下开始使用 JQuery 。尽管如此，强烈建议你熟悉基础知识，例如对象、变量、数据类型等。 
  • 你还应该了解 DOM 操作，因为 JQuery 主要用于操作 HTML DOM 元素。

jQuery学习指南：如何安装 JQuery？

主要有两种方法可以在网页中嵌入 JQuery。请注意，JQuery 只不过是一个需要与 HTML 文件链接的 JavaScript 文件。你可以：

  • 从官方网页下载 JQuery 库。
  • 或者，你可以通过 CDN 链接到该文件。一个内容交付网络或CDN是一组多台服务器相结合，提供网页内容基于其地理位置的用户。通过 CDN 链接到 JQuery 文件比将其托管在你自己的服务器上更快到达并有效加载。

下载 JQuery 的副本

有两个版本的 JQuery 文件可供下载。

  • 生产版本，用于实时网站，因为它被压缩和缩小。
  • 开发版，主要用于测试和开发，因为它是可读和未压缩的。

请访问JQuery网站下载。

下载后，你可以使用 HTML 文件中 head 部分中的 <script> 标记引用它。

<head>
<script src="jquery-3.5.1.min.js">
</script>
</head>

使用谷歌 CDN

你可以通过简单地将源代码嵌入到脚本标记中来将 Google CDN 用于 JQuery 库。

请注意，你应该始终在结束正文标记之前链接到 JQuery CDN，然后是你在项目中使用的自定义 JavaScript 文件。

<!doctype html>
<html lang="en">
<head>
  <title>Welcome to Hackr.io</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>


IDE（集成开发环境）

要充分利用 JQuery，你必须使用真正欣赏 JQuery 真正功能的 IDE。有大量的 IDE 为 JQuery 提供了巨大的支持和插件。但是选择正确的方法可以帮助你遵循编码的最佳实践、错误提示、具有自动完成功能等。使用 IDE 总是比文本编辑器更容易，因为 IDE 可以帮助你自动生成标准代码。他们帮助你进行编译。它们包含有用的插件，并且允许你无缝导入库。让我们来看看一些可用于处理 JQuery 文件的流行 IDE。

Visual Studio Code： Visual Studio 无疑是最流行的 IDE，不仅适用于 JavaScript 和 JQuery，而且适用于所有流行的编程语言。它支持语法高亮，具有由 IntelliSense 支持的自动完成功能（提供智能完成）、函数定义、大量插件等。你可以轻松使用扩展来添加新语言、安装调试器、主题等。所有重要的功能已经内置，并为管理文件提供了巨大的支持。

Sublime Text：它是一个复杂的下一代文本编辑器，具有流畅的用户界面、非凡的功能和一流的性能。它利用了一个定制的工具包，旨在实现速度和优雅。用户喜欢的一些功能包括 - GoTo 任何按键即可打开文件、GoTo 定义以生成项目索引、多项选择、命令面板、强大的 API 和包生态系统、易于定制、拆分编辑、即时项目切换，以及可在所有平台上使用。

Atom： Atom 文本编辑器由 GitHub 开发，高度可定制，让你轻松安装软件包。要针对 JavaScript 编码优化 Atom，请安装 JavaScript 包。由于是开源的，它的核心是可破解的。它具有独立于平台的编辑、管理包的实用程序、智能代码自动完成、浏览文件系统的浏览器、多个窗格、数以千计的包、优雅漂亮的主题以及高度可定制的流行功能。

在线编译器

如果你不想经历在系统中下载和安装 IDE 的麻烦，你可以随时使用在浏览器上运行的在线编译器。它们与任何其他桌面 IDE 一样有用，但可定制性相对较低。Tutorialspoint是一个免费、快速且安全的在线编译器，用于开发 JavaScript 和 JQuery 脚本。 

如何学习jQuery？

JQuery 简单易学，几个小时就能学会。但是，始终建议你在接触 JQuery 之前先了解 HTML、CSS 和 JavaScript 的基本知识。JQuery 只是一个 JS 库。简单来说，它有 4 个基本用途。这些包括：

  • 它使 JavaScript 代码非常短。它可以在 2 行中实现与 JavaScript 在 6-7 行中所做的相同的事情。 
  • 它可以在几行代码内执行复杂的任务，例如 DOM 操作。
  • 与普通 JavaScript 相比，JQuery 的事件处理是小菜一碟。
  • 它使 AJAX 调用变得非常简单。

jQuery学习线路图：从初学者的角度来看，最好加入并尝试诸如测试 JQuery 提供的各种功能及其性能之类的事情，而不是通过理论。让我们看一下你可以立即开始使用 JQuery 的 4 个步骤。

步骤 1. 添加 JQuery 库

之前，我们已经讨论了如何在我们的 HTML 文件中使用 JQuery 库。有两种方法可以这样做 - 直接从网站下载 JQuery JavaScript 文件并使用脚本标签包含它，或者你可以使用像 Google 这样的 CDN 来引用库。 

使用 CDN 是更好的选择，因为它比下载文件并将它们托管在我们自己的服务器上加载速度更快。此外，它还减少了项目中的文件数量。

步骤 2. 使用 JQuery 处理事件。

在 JQuery 的帮助下，你可以轻松地对按钮点击、鼠标进入、焦点、按键等事件进行编程。例如，在下面的代码中，单击按钮时，它会显示一条警报消息。


<button id="alertButton">Click Here To Generate Alert</button>

<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#alertButton").click(function (e) {
        alert("This is an alert for the Button")
    });
});
</script>

在上面的代码中，按钮点击事件是放在函数内部的。这告诉服务器首先完全加载页面；之后，单击按钮时会调用一个函数，显示警报消息。

步骤 3. 使用 JQuery 进行 DOM 操作。

jQuery学习指南：使用 JavaScript 进行 DOM 操作是一项艰巨的任务。然而，JQuery 使它成为小菜一碟。我们举一个简单的例子。

假设在单选按钮中显示了 5 个状态的列表。当一个人选择正确的美国首都时，它会显示“正确”消息。当他选择错误的状态时，它会显示“错误”消息。我们可以通过使用单选按钮添加单击事件来执行此操作。 

<ul style="list-style:none">
    <li><input type="radio" value="Alaska" name="rdo">Alaska</li>
    <li><input type="radio" value="Buffalo" name="rdo">Buffalo</li>
    <li><input type="radio" value="Chicago" name="rdo">Chicago</li>
    <li><input type="radio" value="Boston" name="rdo">Boston</li>
    <li><input type="radio" value="DC" name="rdo">DC</li>
</div>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("input[type='radio']").click(function (e) {
        if($(this).val()=="DC")
            $(this).parent().append('<p style="margin:0;padding-left:10px;color:red;">Right</p>');
        else
            $(this).parent().append('<p style="margin:0;padding-left:10px;color:red;">Wrong</p>');
    });
});
</script>

在上面的示例中，我们检查单击的单选按钮的值并将其与正确答案进行比较。然后我们找到被点击的按钮的父列表标签，并附加一个带有一些 CSS 和适当文本的段落标签。

步骤 4. JQuery AJAX。

使用JQuery，我们可以很容易地通过AJAX请求调用服务器端函数，并将返回的数据显示到HTML页面。我们甚至可以使用 AJAX 和 JQuery 使用部分回发来查询我们的数据库。

上面提到的所有四个步骤都足以让你开始使用 JQuery。一旦你对这些步骤有了实践经验，你就可以向前迈出一步，学习如何优化代码以获得更好的性能。

JQuery 课程和教程（免费和付费）

1.完整的 jQuery 课程：从初学者到高级！

如何学习jQuery？通过本课程，你将学习如何创建可以与专业网站竞争的优雅、响应式、动态的网站。它将帮助你将对该主题的理解从初学者提升到高级/专家级别。你可以学习重要的主题，例如动画和效果、事件处理、DOM 操作、验证等。 

关键点：

  • 主题从头开始。
  • 你将学习为你的网站添加漂亮的效果和动画。
  • 你可以添加快速反馈和表单验证。
  • 你将学习如何使用 AJAX 使用 TheMovieDB 和 Flickr 等 API 动态添加内容。
  • 你将处理用户事件，例如单击鼠标按钮、滚动、按下键盘上的键等。 
  • 你将学习操纵网页的外观和任何元素的内容。

长度： 51讲

时长：  6h 4m

评分：  4.6

本课程由密歇根大学提供，由 Coursera 提供。你将从 JS 语言及其遵循的面向对象模式开始。然后，你将了解 JQuery 库并执行浏览器内操作、DOM 和事件处理。你还将了解 JSON 在服务器和浏览器中的代码之间交换数据。 

关键点：

  • JS 和 PHP 的快速概览。
  • 随时随地执行浏览器内操作。
  • 带有测验和实验的动手示例。
  • 灵活的截止日期。
  • 分级作业。
  • 证书。

长度：  4 门课程，4 周

持续时间： 26 小时近似
评分：  4.6

这是作为初学者开始的最佳课程。无需了解任何先决条件即可开始此 JQuery 课程。它将为你打下坚实的基础，你将获得足够的信心继续获得高级认证。 

关键点：

  • 不需要任何先决条件。
  • 每个概念的示例代码。
  • 你将构建可用于增强投资组合的项目。
  • JQuery 介绍、效果和鼠标事件的测验。
  • 你将学习 JQuery 定位、链接和方法，
  • 你将学习如何将动画附加到 HTML 标签。
  • 你将学习如何处理用户事件和使用样式方法。
  • 你可以掌握 DOM 操作。

时长：  3 周（大约）

时长： 9 小时。

评分： 4.5 分（满分 5 分）。

这是你可以在任何地方找到的最好的免费 JQuery 资源之一。它包含一系列文本教程，每个概念的示例都得到了很好的解释。你将以最详细的方式学习每个概念。 

关键点：

  • 你从基本介绍和语法开始，然后转到选择器和事件。
  • 你将学习隐藏/显示、淡入淡出、滑动、停止、回调等效果。
  • 你将获得有关使用 JQuery 操作 HTML 的知识。
  • 你将学习如何遍历祖先、兄弟姐妹、后代等元素。
  • 你将学习如何使用 JQuery 处理 AJAX 请求。

时长：  2 周（大约）

持续时间：自定进度。

评级： NA

JQuery 官方文档

你可以通过官方JQuery API 文档了解JQuery API。你将更好地了解所有已发布的版本。它包含有关所有方法、函数、触发器、事件等的丰富信息，可以与 JQuery 一起使用来操作 HTML。你将通过详细且易于理解的示例了解属性、回调、CSS 效果、浏览器事件、文档加载、表单、DOM 操作、选择器、遍历等。

jQuery学习线路图：jQuery 项目

学习 JQuery 的最好方法是立即开始构建项目。一旦开始从事项目，你将学习到许多新功能、技巧和有用的资源。一旦你掌握了理论知识，你就可以从一个你感兴趣的初学者项目开始并进行尝试。你必须从一个有趣的项目开始，才能在整个项目中保持正轨。 

如果你尝试寻找替代和更好的方法来执行任务而不是已经提到的方法，那么你可以学习得更好。这将使你扩大视野并超越现有的思考。 

在 JQuery 上的一些顶级初学者级别项目中先睹为快。

  • 贪吃蛇游戏

你可以从创建一个简单的蛇游戏开始，在该游戏中你控制一条蛇，目标是通过走正确的轨道让蛇吃掉水果。蛇每次吃掉水果都会变得更大更长。你必须防止蛇咬自己，一旦它咬了，你的游戏就结束了。你可以使用多个动画、障碍物和新功能。

  • 自定义灯箱

Lightbox 是一个 JS 库，可以帮助你通过填充屏幕来显示图像。它是最著名的 JQuery 插件之一。你可以利用 JQuery 构建你自己的自定义灯箱，模仿按钮上的灯箱，以及执行更多操作。

  • 密码强度检查

这是一个很常见的项目，并且使用 JQuery；你也可以建立一个。你可以利用 AJAX 进行表单验证、为弱密码添加警报、添加功能以使其更具吸引力、添加动画、工具提示等。

  • 页面滑动

你可以使用 JQuery 创建一个简单的页面滑块，新页面会滑入而不是刷新。这是取悦新访问者的好方法，因为它使网页有趣且美观。这是一种吸引更多用户的真实且引人入胜的方式。

  • 有趣的开场动画

你可以使用 JQuery 制作很酷的动画。你可以利用此功能为网站主页创建有趣且有利可图的打开动画。查看此网站以了解 JQuery 可以帮助你实现的目标。

认证

虽然有许多JQuery 课程和教程可供初学者使用，但一旦你了解了这些概念并获得了足够的经验，就可以继续前进并尝试一些高级认证。认证将使你的简历更上一层楼，并使你在申请相同工作的大量其他候选人中占据优势。

可用于 JQuery 的认证并不多。但是，你可以使用下面列出的认证来测试你的知识。

CancanIT 提供此认证，并在更深层次上测试你的技能和理解。它有两部分 - 理论和实践。理论考试有20道题（单选题和多项选择题），每题1.5分钟。接下来是实际任务，你将被要求完成一个现实生活中的任务，你将被分配 45 分钟来完成。

它涵盖了元素选择器、通用框架、元素事件、Ajax 调用、DOM 操作、动画和效果等元素。

认证费用约为 120 美元。

Mindmajix 提供此认证和培训，以培养你使用 JQuery 构建交互式网站、动画等所需的技能。你将能够掌握基础知识并从事实时项目。

课程时长为 30 小时，由讲师指导。你将获得大约 20 小时的实验室课程、认证甚至工作帮助。

你有三种培训选择 - 自定进度学习、在线实时培训和企业培训。 

jQuery学习指南：jQuery 面试题

一旦你精通 JQuery，就可以开始重要的一天了。你现在必须将所有知识和准备结合在一起，以出色地完成工作面试。在参加面试之前，你必须复习所有重要的概念——理论和实践。这将帮助你获得自信，并展现出你的最佳状态。让我们讨论一些在 JQuery 面试中经常被问到并且很可能出现在你的面试中的问题。

  • 问题：通过引用它的用途来解释 jQuery。
  • 问题：你能解释一下 JS 和 jQuery 的区别吗？
  • 问题：请告诉我 jQuery 中用于效果的方法。
  • 问题：列出 jQuery 的一些主要功能。
  • 问题：你能告诉我使用 jQuery 的一些优点吗？
  • 问题：详细解释Jquery中Ajax这个话题。
  • 问：能说说Jquery中Ajax方法的用法吗？
  • 问题：讲解JQuery中load ajax方法的用法。
  • 问题：请告诉我 Ajax 中的一些 Jquery 事件。
  • 问题：讲解ajaxJQuery中ajaxComplete方法的用法。

查看排名前 50 的 JQuery 面试问题，你可以使用这些问题轻松准备和破解最难的面试。

重要提示

如何学习jQuery？如果你非常认真地选择 JS 或 JQuery 开发人员的职业道路，那么你肯定需要花大量时间找出最合适的途径，以便快速彻底地掌握它。必须将所有不必要的障碍归零，这样你就不会分心并找到学习 JQuery 的最佳方式。下面列出了你在使用 JQuery 的过程中必须采用的一些技巧。

  • 提示 #1 - 尝试让自己参加在线提供的顶级实用课程。
  • 提示 #2 - 确保你对 JavaScript、HTML 和 CSS 有透彻的了解。
  • 提示 #3 - 你可以查看备忘单以快速学习 JQuery。
  • 提示 #4 - 确保你清楚地了解 ID 和类及其用例之间的区别。
  • 提示 #5 - 你应该了解缓存选择器以及如何使用它们。
  • 提示 #6 - 了解 Attributes 和 Properties 之间的区别。
  • 提示 #7 - 在开发者社区寻求帮助。
  • 提示 #8 - 使用最新版本的 JQuery 并始终关注最新更新。
  • 技巧 #9 - 利用 JQuery 插件。
  • 提示 #10 - 始终与其他 JQuery 开发人员保持联系。

jQuery学习线路图总结

总之，在本分步指南中，我们涵盖了以下主题。

  • 我们首先简要介绍了 JQuery 以及如何利用它来使你的开发体验无缝。然后，我们讨论了为什么你应该学习 JQuery，并通过几点说明其优点和用例。我们讨论了为什么它的受欢迎程度逐渐下降，但它仍然被用于创建动态 Web 应用程序。
  • 然后我们继续讨论学习 JQuery 需要哪些先决条件。我们讨论了学习 HTML、CSS 和 JavaScript 如何帮助你更好地理解 JQuery。我们看到了可以在脚本中使用 JQuery 的两种不同方式。
  • 在那之后，我们讨论了一些流行的 IDE，你可以使用它们来增强使用 JQuery 的体验并利用它们来安装有用的插件。我们还讨论了如何使用在线编译器而不是下载独立的 IDE。
  • 之后，我们讨论了 4 个简单的步骤，你可以通过这些步骤快速彻底地学习 JQuery。我们看到了每个示例和示例代码。我们讨论了 JQuery 如何在实现相同 JavaScript 功能的同时显着减少代码行数。
  • 接下来，我们讨论了一些流行的免费和付费 JQuery 课程和教程，它们将帮助你获得 JQuery 的实践经验并建立你的投资组合。我们讨论了一些很酷的项目，你可以通过这些项目来更好地理解这些主题并使用 JQuery。我们还看到了如何使用 JQuery 官方文档。
  • 我们讨论了 JQuery 中的认证如何帮助你获得优于其他候选人的优势，并让你在参加工作面试时充满信心。我们讨论了一些关于 JQuery 的重要面试问题，以帮助你在面试前做好最后一分钟的 JQuery 准备。
  • 最后，我们讨论了一些你需要采用的重要技巧，以确保你遵循正确的轨道并以更好的方式学习 JQuery。

我们当然希望你喜欢我们的分步指南，它将帮助你以现代方式学习 JQuery。本指南肯定会帮助你在进入企业界之前找到正确的资源，采用正确的路径，并在 JQuery 中获得深入的知识和经验。

在下面的评论中让我知道你对这篇文章的反馈。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: