学 jQuery: 编程课程 应用图标

学 jQuery: 编程课程

教育 · 免费 · iOS & Android · CoddyKit

学 jQuery: 编程课程 — 在手机上学习 jQuery:编写链式代码,观看真实页面响应

学 jQuery: 编程课程 是一款可免费开始使用的 iOS 和 Android 应用,面向初学者、学生以及维护 jQuery 网站的开发者,教授 jQuery JavaScript library — DOM 操作、事件、效果和 AJAX。每节课程都配有实时编辑器和页面预览,并内置 jQuery 3.7.1,因此你编写的代码可直接在手机上运行,即使离线也可以。AI Mentor 可解答有关选择器、错误或 AJAX 调用的问题。

App Store — 免费下载Google Play — 免费下载
价格
免费,可升级至 Pro
平台
iOS 和 Android
语言
22
年龄分级
4+
需要
iOS 15.1 或更高版本
商店宣传图:主屏幕上方显示“Learn jQuery Like a Pro”,下方是 jQuery Academy 学习路径“JavaScript 入门”课程概览页面,显示总体进度以及标有“免费”的课程
22课程,A1 至 C1
3.7.1内置 jQuery
20调试任务
如果你会使用 CSS 选择器,就已经掌握了 jQuery 的大部分基础。

jQuery 借用了 CSS 的选择器语法,让你可以对选择结果连续执行操作。这使它成为接触 DOM、事件和异步代码的温和起点,也是一项实用技能,因为许多现有网站仍然依赖它。

这是什么

学 jQuery: 编程课程 是一款面向 iOS 和 Android 的 jQuery JavaScript library 课程应用。它包含 22 门课程、48 节从 A1 到 C1 的课程内容;配备实时 JavaScript 编辑器和页面预览,设备内置 jQuery 3.7.1,可直接运行代码;此外还有 20 个调试任务、20 个 HTML 和 CSS 引导项目、50 道面试题、50 道测验题,以及一份包含 91 项内容的速查表。AI Mentor 会用通俗易懂的语言解释选择器、错误和 AJAX 调用。

应用内

界面展示

商店宣传图:主屏幕上方显示“Learn jQuery Like a Pro”,下方是 jQuery Academy 学习路径
学习路径主屏幕显示 jQuery Academy 课程、“开始第一课”按钮、每日目标和技能中心。
“JavaScript 入门”课程概览页面,显示总体进度以及标有“免费”的课程
课程概览课程页面显示总体进度和编号课程列表;免费的课程带有“免费”标签,“更换课程”按钮可切换课程。
代码编辑器中显示一个 JavaScript 函数和一排符号按键,并配有“代码库”和“生成代码”按钮
代码编辑器编辑器带有用于括号和引号的符号栏,代码上方还有“代码库”“生成代码”和“AI 增强”按钮。
AI 聊天页面提供解释概念、给出建议、进行测验和制定学习路线等推荐提示词
AI 导师AI 聊天标签页提供一键提示词:解释关键概念、提供更快学习的建议、考考我,或创建学习路线。
浅色主题主屏幕,显示 jQuery Academy 卡片、每日目标和功能建议
每日目标在浅色主题下,主屏幕将 jQuery Academy 课程卡片、“开始第一课”按钮、每日目标和功能建议快捷入口集中在一起。

课程

jQuery 课程涵盖哪些内容

内容取自 CoddyKit 的 jQuery 课程列表,从第一个 $ 调用开始,涵盖插件、测试,以及与现代 JavaScript 协同工作。

  1. 认识 jQuery 和第一步

    了解 jQuery 是什么、它解决了什么实际问题,以及为什么仍有这么多网站在使用它;随后学习第一个链式调用和面向初学者的基础知识。

  2. 选择元素和遍历 DOM

    学习选择元素,进而掌握高级属性选择器和伪类选择器,并在 DOM 中从一个元素移动到下一个元素。

  3. DOM 操作和样式设置

    通过两门课程学习创建、插入、移动和删除元素,并使用代码修改 CSS 和类。

  4. 事件和事件委托

    学习事件管理,随后掌握针对后续添加元素的事件委托和自定义事件管理。

  5. 动画和效果

    从基础动画开始,进一步学习复杂动画和自定义效果,例如链式序列和自定义缓动。

  6. 表单、数据和模板

    学习使用数据属性和模板创建动态内容,以及高级表单处理和验证。

  7. AJAX、Deferred 对象和 promises

    学习 AJAX 操作和远程数据处理,随后使用 Deferred 对象和 promises 管理异步代码。

  8. 插件、性能和测试

    学习自定义选择器和筛选、开发稳定可靠的插件、性能优化和最佳实践,将 jQuery 与现代 JavaScript 集成,并测试 jQuery 应用。

工作原理

课程如何进行

每节课程都会将简短讲解与可亲自运行的代码并列呈现,让你在继续学习之前先验证这个概念。

  1. 阅读一节简短课程

    打开一个主题,阅读有关选择器、事件或效果的简短讲解。课程足够短,适合在乘坐公交时学习,并会从第一个链式调用一直讲到插件和测试。

  2. 编写链式代码,观看页面响应

    在实时编辑器中编写 HTML、CSS 和 jQuery,然后立即运行。你停止输入后,编辑器会重新运行代码,无需服务器,也无需构建步骤;页面预览会显示结果。

  3. 修复错误,然后询问导师

    任务会交给你一段有问题的代码,并要求你找出故障:this 变成 window 的点击处理程序、不断滑动的菜单,或触发两次的保存操作。当某个概念或错误难以理解时,AI Mentor 会用更简单的语言再次解释。

包含内容

应用包含的内容

22

课程,A1 至 C1

22 门课程,共 48 节内容,从 $ 函数和第一个链式调用开始,逐步学习选择器、DOM 操作、事件、动画、表单、AJAX、插件和性能。

3.7.1

内置 jQuery

页面预览会在设备上运行,并包含 jQuery 3.7.1,因此编辑器也支持离线使用。

20

调试任务

修复各种仿佛真实发生的错误,例如链式调用最终变成字符串,或删除按钮只对前几行有效。

20

引导式页面项目

20 个 HTML 和 CSS 项目,用于构建之后由选择器操作的标记结构。

91

速查表和测验

一份包含 91 项内容的速查表,涵盖选择器、事件、效果和 AJAX 方法,此外还有 50 道测验题和 50 道面试题。

AI

AI Mentor

询问有关选择器、错误或 AJAX 调用的问题,并获得通俗易懂的回答。免费方案每天包含 3 个问题。

背景

jQuery 现在还值得学习吗?它可以用来做什么?

jQuery 是一个 JavaScript library,可以更简洁地选择网页元素、修改元素、响应点击,以及在不重新加载页面的情况下加载数据。虽然较新的框架已经接管了许多新项目,但大量现有网站仍在使用 jQuery,因此阅读、修复和扩展这类代码依然是实用的 Web 开发技能。在学习更大型的工具之前,它也是了解 DOM、事件和异步 JavaScript 的温和方式。

$ 函数与链式调用一行代码,执行多个操作

使用选择器调用 $ 会返回一个 jQuery 对象,而几乎每个方法都会再次返回这个对象。因此,你可以把选择列表、添加类名和淡入显示串成一条易读的代码,而不必写成四条独立语句。

选择器CSS 知识可以直接迁移

类、id、属性和伪类选择器的用法与样式表中的基本相同。遍历方法则可以从一个元素找到它的父元素、子元素或兄弟元素;当页面中有数百个相似行时,你就能借此找到正确的那一行。

事件委托解决后添加元素问题的方法

绑定在按钮上的处理程序只对代码运行时已经存在的按钮有效。将处理程序绑定到父元素,再通过选择器进行筛选,就能让它对之后添加的行同样生效。这正是删除按钮只对旧行有效这一经典问题的解决方法。

this 指的是什么一个常见错误

在 jQuery 处理程序中,this 指的是接收到事件的元素,但箭头函数或放置不当的回调可能会改变这一点。当 this 变成 window 时,调试这样的处理程序就是最典型的初次实战错误之一。

AJAX 与 promises无需重新加载即可获取数据

$.ajax() 会发送请求,并在收到响应后让页面更新。Deferred 对象和 promises 可以组织多个此类请求,让后续步骤等待前一步完成,而不是层层嵌套回调。

是否适合

适合哪些人——不适合哪些人

如果你符合以下情况,就很适合

  • 了解一些 HTML 和 CSS,想让页面响应点击和表单操作
  • 维护基于 jQuery 构建的网站,需要阅读并修复其中的代码
  • 正在准备前端面试,而老旧 jQuery 仍可能出现在面试中
  • 想在手机上编写代码,并立即查看页面预览
  • 喜欢用短时间学习,也希望有一位可以随时提问的导师

如果你符合以下情况,这不是适合你的工具

  • 想学习 React 等现代框架;这款应用教授的是 jQuery 和 DOM
  • 希望所有课程都免费:第一门课程、第一个项目和两个任务免费,Pro 可解锁其余内容
  • 期待无广告的免费版本,因为 Pro 会移除广告

问题

常见问题

在手机上学习 jQuery 的最佳方式是什么?

最有效的方法是编写代码并查看页面变化,而不只是阅读选择器相关内容。学 jQuery: 编程课程 为每节短课配备带页面预览的实时编辑器,内置 jQuery 3.7.1,因此可以直接在设备上运行;AI 导师还会解释任何不清楚的内容。该应用可在 iOS 和 Android 上免费开始使用。

jQuery 和 JavaScript 是一样的吗?

不是。JavaScript 是编程语言;jQuery 是用 JavaScript 编写的库,可以简化选择元素、响应点击和发送 AJAX 请求等常见任务。学 jQuery: 编程课程 在 JavaScript 编辑器中教授 jQuery,让你同时练习两者,并了解链式调用如何对应到原生 DOM 代码。

现在学习 jQuery 还值得吗?

对于新项目,许多团队会选择其他工具,但大量现有网站仍在运行 jQuery,因此阅读和修复这类代码是一项实用技能。它也是学习 DOM、事件和异步 JavaScript 的简单切入点。学 jQuery: 编程课程 包含面向前端职位的面试题,因为这类职位中仍可能遇到老旧 jQuery。

学 jQuery: 编程课程 支持 iPhone 和 Android 吗?

支持。学 jQuery: 编程课程 可在 App Store 上供 iPhone 使用(iOS 15.1 或更高版本),也可在 Google Play 上供 Android 使用。界面支持 22 种语言,包括英语、西班牙语、德语、法语、葡萄牙语、日语、韩语、阿拉伯语、印地语和土耳其语;无论使用哪种界面语言,你编写的代码始终是 jQuery 和 JavaScript。

我可以在应用中离线运行 jQuery 代码吗?

编辑器支持。学 jQuery: 编程课程 内置 jQuery 3.7.1,因此页面预览可以直接在设备上运行,即使处于离线状态也可以。依赖 AI 导师的功能需要互联网连接。

jQuery 课程涵盖哪些主题?

22 门课程从 $ 函数和选择器开始,涵盖 DOM 操作、样式、事件和事件委托、动画、表单、AJAX、Deferred 对象和 promises,之后继续学习自定义选择器、编写插件、性能优化、将 jQuery 与现代 JavaScript 集成以及测试。

什么是调试任务?

这些任务包含 20 个练习,会提供有问题的 jQuery 代码,让你像在实际工作中一样找出错误。示例包括 this 指向 window 的点击处理程序、以字符串结尾的链式调用、只能作用于旧行的删除按钮、离开后仍不断滑动的菜单,以及触发两次的保存操作。

我需要先了解 JavaScript 或 HTML 吗?

了解一些 HTML 和 CSS 会有所帮助,因为 jQuery 选择器作用于标记,并借鉴了 CSS 的写法。学 jQuery: 编程课程 还提供 20 个有指导的 HTML 和 CSS 页面项目,让你构建选择器将要使用的标记。课程从第一个链式调用开始。

学 jQuery: 编程课程 免费吗?

你可以免费开始:第一门课程、第一个有指导的项目、两个任务、编辑器、测验、面试题、速查表,以及每天 3 个 AI 导师问题。免费版本会显示广告。Pro 可解锁所有课程、项目和任务、证书考试以及无限次 AI 导师使用,并移除广告。Pro 提供每周、每月或每年的订阅,也可以一次性购买终身使用权。课程结束时的证书考试包含在 Pro 中。

这款应用与 jQuery 有关联吗?

不。jQuery 是 OpenJS Foundation 的商标,而 学 jQuery: 编程课程 是一款独立的学习应用,与 OpenJS Foundation 没有任何关联,也未获其认可。

开始使用

今天就编写你的第一个 jQuery 链式调用

在 iOS 和 Android 上均可免费开始使用,支持 22 种语言。

App Store — 免费下载Google Play — 免费下载
最近审核日期 · 由 CoddyKit 发布 · 隐私政策
可在 iOS 和 Android 上使用。