前面章节对 jQuery 进行了简单介绍，并且介绍了三种安装 jQuery 的方式，下面通过一个入门示例来敲开 jQuery 的大门，该示例通过 CDN 方式安装 jQuery。
🌈注意：
推荐将所有 jQuery 代码都建议写在 $(document).ready() 中（简写为 $(function(){})），确保页面 DOM 加载完成后再执行，避免操作未加载的元素。
该示例通过 $(document).ready() 等待 DOM 加载完成，然后选择 <h2> 元素，设置元素的字体为红色，并且将当前日期追加到 <h2> 元素内部。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 第一步：引入JQuery 库，这里采用 CDN 的方式引入，正式环境建议将库下载到本地 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<!-- 第二步：添加一些HTML元素，方便后续JQuery进行操作 -->
<div class="app">
<h2>欢迎学习JQuery库</h2>
</div>
<!-- 第三步：编写JQuery代码 -->
<script>
// $(document).ready() 可以确保文档加载完成后再执行 ready() 内部的代码
// 类似 window.onload = function(){}
$(document).ready(function(){
// 使用标签名选择器，选择所有的 h2 元素，并设置它们的颜色为红色
$("h2").css("color", "red").append("<br/>当前日期：" + new Date().toDateString());
});
</script>
</body>
</html>运行示例，效果如下图：
你也可以点击“自己动手试一试”自己去尝试一下。
上面示例总共分为三步：
第一步：引入 jQuery 库，即安装 jQuery。
第二步：添加一些 HTML 元素，方便后续JQuery进行操作。
第三步：编写 jQuery 代码，操作 HTML 元素，设置字体颜色，追加内容等。
jQuery广告
在原生 JavaScript 中，如果直接在 <script> 里操作 DOM 元素（比如获取 <div>、修改按钮文本），但脚本执行时元素还没加载出来，就会出现 null 或 undefined 错误。
例如：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 此时 <p id="test"> 还没加载，操作无效
$("#test").text("修改文本"); // 无效果，不会报错但也不会生效
</script>
<p id="test">原始文本</p>此时，我们就可以使用 $(document).ready() 来解决该问题，$(document).ready() 的核心作用就是：等待页面的 DOM 结构完全加载完成后，再执行里面的代码（无需等待图片、视频等外部资源加载），避免操作未加载的元素。
修改后的代码：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
// DOM 加载完成后执行，能正确找到并修改元素
$("#test").text("修改后的文本"); // 生效！
});
</script>
<p id="test">原始文本</p>注意，jQuery 提供了多种等价写法，最常用的是简写形式：
// 形式一：完整写法，语义最清晰，适合新手入门
$(document).ready(function() {
// 代码
});
// 形式二：简化版，省略 document 不推荐（语义模糊）
$().ready(function() {
// 代码
});
// 形式三：最简洁的简写形式，日常开发首选
$(function() {
// 代码
});很多新手会混淆 $(document).ready() 和 window.onload，两者核心差异如下表：
| 特性 | $(document).ready() | window.onload |
|---|---|---|
| 触发时机 | DOM 结构加载完成（无需等图片 / 视频） | 页面所有资源（DOM + 图片 + 视频）加载完成 |
| 执行速度 | 更快（早于 onload） | 更慢（要等所有资源） |
| 多次绑定 | 支持（可写多个，依次执行） | 不支持（后写的覆盖前写的） |
| 简写形式 | $(function(){}) | 无 |
🌈注意：$(document).ready() 只保证初始 DOM 加载完成，如果是后续通过 JS 动态添加的元素（比如 .append() 添加的按钮），需要用事件委托，而非依赖 ready。
如果页面中有其他库也用 $ 作为变量（比如 Prototype），可以给 ready 传参数 $，确保内部的 $ 是 jQuery：
<script>
// 避免 $ 冲突的写法
jQuery(document).ready(function($) {
// 这里的 $ 明确是 jQuery，不受外部影响
$("#test").text("避免冲突");
});
// 简写形式也支持
jQuery(function($) {
$("#test").css("color", "blue");
});
</script>如果你的项目支持 ES6，可以用箭头函数简化：
<script>
$(() => {
console.log("箭头函数版 ready");
$("#demo").text("ES6 写法");
});
</script>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098