适合初学者的 jQuery
适合初学者的 jQuery
适合初学者的 jQuery 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 1 节课。
简介
您好，
欢迎参加 jQuery 初学者 课程。
在本节中，我们将开始学习 jQuery 的详细信息。
简介 2
在开始本课程之前，
您需要先完成以下课程。
- HTML 入门
- CSS 入门
- JavaScript 核心
- 如果您已经掌握这些主题的知识，就可以 继续学习本课程。
让我们开始吧
让我们开始吧。
首先，让我们回答 jQuery 用来做什么这个问题。
在回答问题之前，让我们重温一下基础知识
在回答问题之前，让我们重温一下基础知识。
HTML 是一种标记语言。也就是说，它是用于标记文本的语言，而不是编程语言。它与面向对象等概念相去甚远。换句话说，它的结构中没有对象；我们熟悉的是 HTML 标签、属性等。
JavaScript 对 DOM 执行操作
很多时候，我们需要对网页中的 HTML 元素执行操作。为了实现这一点，并让 JS 可以访问 HTML 元素，我们使用一种称为 DOM（文档对象模型）的模型来表示它们。
JavaScript 会对作为网页对象等价表示的 DOM 执行操作。我们将其称为 DOM 操作。
示例
让我们来看一个示例。
我们有一个如下例所示的按钮元素，它包含“Not Clicked” 文本。点击按钮时，我们将把按钮文本改为“Clicked”。
要实现这一点，我们需要使用 JavaScript 语言执行 DOM 操作。
在 JavaScript 入门课程中，我们学习了如何使用 JavaScript 管理网页文档。jQuery 是一个库，可以让我们使用 JavaScript 执行 DOM 操作时编写出更简洁的代码。
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>问题
这里有一个问题要问您！
示例 2
在下面的示例中，我们定义了一个 id 为 my-button 的按钮。
现在，让我们通过 DOM 使用 JavaScript 访问这个元素。
点击按钮时，我们将通过 JS 代码访问 DOM，并把 id 为 my-button 的元素的 innerHTML 属性改为 click。
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>警告
jQuery 本质上只是一个用于简化 JS Core 中函数和方法使用的库。
换句话说，它让我们能够以更简单、更易读的语法完成许多使用 VanillaJS 可以完成的操作。
示例讲解
让我们讲解一下这段代码。
let myButton = document.getElementById('my-button');
我们使用 getElementById 方法，将 JavaScript 的 document 对象赋值给名为 myButton 的变量。
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
随后，我们监听了按钮的 click 事件，并修改了按钮。
我们使用语言的核心功能完成了 DOM 操作，没有使用任何库或框架，这通常称为原生或 VanillaJS。
让我们使用 jQuery 编写相同的代码，并利用 jQuery 库为我们提供的功能。
警告
这个概念在许多地方被称为 VanillaJS，实际上指的是纯粹、原生的 JavaScript 核心对象、方法和函数，以及浏览器提供的功能。
jQuery 示例
下面我们使用 jQuery 完成了之前的示例。
不过请注意，不要为了缩短代码而忽略语法。
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>恭喜
恭喜您 🎉
在本节中，我们开始学习 jQuery，并了解了 jQuery 能在多大程度上让我们的工作变得更轻松。
下一节见！
常见问题解答
「适合初学者的 jQuery」课时是免费的吗？
是的 — 「适合初学者的 jQuery」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 1 节课。
「适合初学者的 jQuery」这节课中我会学到什么？
适合初学者的 jQuery 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「适合初学者的 jQuery」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。