Appearance
第2章：开发环境搭建（全程实操，新手无压力）
2.1 jQuery 的两种引入方式（重点掌握，按需选择）
方式1：CDN引入（推荐，无需下载，直接引用）
CDN（Content Delivery Network）是一种内容分发网络，可以提供更快的加载速度。使用CDN引入jQuery是最常用的方式，无需下载文件，直接通过URL引用即可。
常用CDN地址：
jQuery官方CDN：
html<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>百度CDN：
html<script src="https://apps.bdimg.com/libs/jquery/3.6.0/jquery.min.js"></script>谷歌CDN：
html<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>微软CDN：
html<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
方式2：本地引入（下载jQuery文件，本地引用，无网络也可用）
如果需要在无网络环境下使用jQuery，可以下载jQuery文件到本地，然后通过相对路径引用。
下载步骤：
- 访问jQuery官网
- 点击"Download jQuery"按钮
- 选择需要的版本（推荐3.x版本）
- 下载压缩版（minified）或未压缩版（uncompressed）
本地引用：
html
<!-- 假设jQuery文件放在js目录下 -->
<script src="js/jquery-3.6.0.min.js"></script>2.2 开发工具准备（VS Code + 必备插件：HTML CSS Support、Live Server）
VS Code 安装：
- 访问VS Code官网
- 下载并安装适合自己操作系统的版本
- 打开VS Code
必备插件：
- HTML CSS Support - 提供HTML和CSS的智能提示
- Live Server - 启动本地开发服务器，支持实时刷新
- JavaScript (ES6) code snippets - 提供JavaScript代码片段
- Prettier - Code formatter - 代码格式化工具
安装插件步骤：
- 打开VS Code
- 点击左侧的扩展图标（或按Ctrl+Shift+X）
- 在搜索框中输入插件名称
- 点击"安装"按钮
2.3 引入验证（简单代码测试，确认jQuery引入成功）
验证步骤：
- 创建一个HTML文件
- 引入jQuery
- 编写简单的jQuery代码
- 运行并测试
验证代码：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery引入验证</title>
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="test">jQuery引入测试</h1>
<button id="verifyBtn">点击验证</button>
<script>
// 验证jQuery是否引入成功
if (typeof jQuery !== 'undefined') {
console.log('jQuery引入成功！版本：' + jQuery.fn.jquery);
} else {
console.log('jQuery引入失败！');
}
// 测试jQuery功能
$(document).ready(function() {
$('#verifyBtn').click(function() {
$('#test').text('jQuery引入成功！').css('color', 'green');
});
});
</script>
</body>
</html>测试方法：
- 保存文件为
verify-jquery.html - 用浏览器打开该文件
- 打开浏览器控制台（按F12）
- 查看控制台输出
- 点击"点击验证"按钮
- 观察标题内容和颜色变化
2.4 jQuery 入口函数（核心，确保DOM加载完成后执行代码）
为什么需要入口函数？
- 确保DOM元素已经加载完成，否则可能无法选中元素
- 避免JavaScript代码在DOM未加载完成时执行
jQuery入口函数的几种写法：
写法1：标准写法
javascript
$(document).ready(function() {
// 代码逻辑
});写法2：简化写法
javascript
$(function() {
// 代码逻辑
});写法3：使用jQuery关键字
javascript
jQuery(document).ready(function() {
// 代码逻辑
});入口函数的执行时机：
- 当DOM树构建完成后执行
- 早于window.onload事件（window.onload需要等待所有资源加载完成）
对比window.onload：
javascript
// jQuery入口函数（DOM加载完成后执行）
$(document).ready(function() {
console.log('DOM加载完成');
});
// window.onload（所有资源加载完成后执行）
window.onload = function() {
console.log('所有资源加载完成');
};2.5 常见引入问题排查（引入失败、代码不生效、版本冲突等）
问题1：jQuery未引入或引入失败
症状：控制台报错 "$ is not defined" 或 "jQuery is not defined"
解决方案：
- 检查引入路径是否正确
- 检查网络连接（CDN引入需要网络）
- 检查jQuery版本是否存在
问题2：代码不生效
症状：jQuery代码没有执行，没有报错
解决方案：
- 确保代码写在入口函数内
- 检查选择器是否正确
- 检查事件绑定是否正确
- 查看控制台是否有其他错误
问题3：版本冲突
症状：页面中引入了多个版本的jQuery，导致冲突
解决方案：
- 只保留一个版本的jQuery
- 如果必须使用多个版本，使用jQuery.noConflict()方法
问题4：加载顺序问题
症状：jQuery代码在jQuery库之前执行
解决方案：
- 确保jQuery库在代码之前引入
- 将代码放在入口函数内
问题5：浏览器兼容性问题
症状：在某些浏览器中代码不生效
解决方案：
- 选择合适的jQuery版本（如需支持旧浏览器，使用1.x版本）
- 检查浏览器控制台是否有特定错误
调试技巧：
- 使用console.log：在关键位置添加console.log，查看代码执行情况
- 检查选择器：使用console.log($('selector'))查看是否选中元素
- 检查事件绑定：确认事件是否正确绑定
- 使用浏览器开发者工具：检查元素、网络请求和控制台错误
实例：排查选择器问题
javascript
$(document).ready(function() {
// 检查选择器是否选中元素
console.log('选中的元素数量：', $('#nonexistent').length);
// 如果选中元素，执行操作
if ($('#existing').length > 0) {
$('#existing').text('元素存在');
} else {
console.log('元素不存在');
}
});