jQuery 零基础学习第一天
目录
一、jQuery 基础准备
二、环境搭建（3 种方式）
1. 直接引入 CDN（推荐新手）
2. 本地下载
3. 验证是否引入成功
三、第一个 jQuery 程序
四、核心知识点
1. 选择器（和 CSS 选择器几乎一致）
2. DOM 操作
3. 事件处理
4. 动画效果
五、学习资源推荐
六、注意事项
七、学习网站推荐
jQuery 是 JavaScript 的一个优秀库，它简化了 DOM 操作、事件处理、动画效果等常见任务，非常适合零基础学习者入门前端开发。以下是一个从零开始学习 jQuery 的指南：
一、jQuery 基础准备
-
什么是 jQuery？
jQuery 是一个轻量级的 JavaScript 库，核心宗旨是 "Write Less, Do More"（写得更少，做得更多）。它解决了原生 JavaScript 在不同浏览器中的兼容性问题，提供了简洁的 API。 -
学习前提
不需要太多 JavaScript 基础，但建议了解：- 基本 HTML 标签和结构
- 简单的 CSS 选择器（如
#id、.class、tag） - 变量、函数等基础编程概念
二、环境搭建（3 种方式）
1. 直接引入 CDN（推荐新手）
不需要下载文件，直接在 HTML 中通过网络引入 jQuery：
html
预览
<!-- 引入 jQuery（建议放在 <head> 或 <body> 底部） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
注意：引入后，就可以使用
$或jQuery变量调用 jQuery 功能了。
2. 本地下载
- 从 jQuery 官网 下载最新版本（推荐
jquery-3.x.x.min.js，压缩版体积更小）。 - 在 HTML 中引入本地文件：
html
预览
<script src="jquery-3.6.0.min.js"></script>
3. 验证是否引入成功
在浏览器控制台（按 F12 打开）输入 $，
如果返回 function (a,b){return new m.fn.init(a,b)} 则表示引入成功。
三、第一个 jQuery 程序
html
预览
<!DOCTYPE html>
<html>
<head><title>第一个 jQuery 程序</title><!-- 引入 jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body><p id="demo">Hello, jQuery!</p><script>// 等待页面加载完成后执行（相当于原生 JS 的 window.onload）$(document).ready(function() {// 选中 id 为 demo 的元素，修改其内容和颜色$("#demo").text("Hello, World!").css("color", "red");});// 简化写法（推荐）$(function() {// 给元素添加点击事件$("#demo").click(function() {alert("点击了段落！");});});</script>
</body>
</html>
- 核心语法：
$(选择器).方法()$()：jQuery 的核心函数，用于选中元素（类似原生document.querySelector()）。.ready()：确保页面 DOM 加载完成后再执行代码，避免操作未加载的元素。
四、核心知识点
1. 选择器（和 CSS 选择器几乎一致）
| 选择器 | 作用 | 示例 |
|---|---|---|
#id | 选中 id 为指定值的元素 | $("#box") 选中 id="box" 的元素 |
.class | 选中 class 为指定值的元素 | $(".item") 选中 class="item" 的元素 |
tag | 选中指定标签的元素 | $("p") 选中所有 <p> 标签 |
* | 选中所有元素 | $("*") |
parent child | 选中父元素下的子元素 | $("ul li") 选中 <ul> 下的 <li> |
示例：
$("div.box")选中所有 class 为box的<div>元素。
2. DOM 操作
-
获取 / 修改内容：
javascript
let text = $("p").text(); // 获取文本内容 $("p").text("新内容"); // 设置文本内容let html = $("div").html(); // 获取 HTML 内容（包括标签） $("div").html("<strong>加粗文本</strong>"); // 设置 HTML 内容 -
属性操作：
javascript
let src = $("img").attr("src"); // 获取属性值 $("img").attr("src", "new.jpg"); // 设置属性值 $("a").removeAttr("href"); // 移除属性 -
样式操作：
javascript
$("div").css("color", "blue"); // 设置单个样式 $("div").css({ // 设置多个样式"font-size": "16px","background": "#f0f0f0" }); $("p").addClass("active"); // 添加类 $("p").removeClass("active");// 移除类
3. 事件处理
常见事件：click（点击）、mouseover（鼠标悬停）、keydown（按键按下）等。
javascript
// 点击事件
$("button").click(function() {$("p").toggle(); // 切换元素显示/隐藏
});// 鼠标悬停事件
$("div").mouseover(function() {$(this).css("background", "yellow");
}).mouseout(function() { // 链式调用$(this).css("background", "white");
});
4. 动画效果
jQuery 内置了多种动画：
javascript
$("div").show(1000); // 1秒内显示
$("div").hide(1000); // 1秒内隐藏
$("div").fadeIn(1000); // 淡入
$("div").slideDown(1000); // 下拉展开
$("div").animate({left: "200px"}, 1000); // 自定义动画（需先设置 position）
五、学习资源推荐
- 官方文档：jQuery 中文文档（清晰易懂，适合查 API）。
- 视频教程：
- B 站搜「jQuery 零基础教程」（推荐黑马程序员、尚硅谷等机构的免费课程）。
- 练习项目：
- 做一个简单的 TODO 列表（添加、删除、修改任务）。
- 实现一个图片轮播器（自动播放、点击切换）。
六、注意事项
- 版本选择：推荐使用 3.x 版本，不支持 IE 低版本（但现代浏览器都兼容）。
- 冲突问题：如果其他库也使用
$符号，可通过jQuery.noConflict()释放$：javascript
var jq = jQuery.noConflict(); jq("p").text("使用 jq 代替 $"); - 性能问题：避免频繁操作 DOM，可先缓存选中的元素：
javascript
let $p = $("p"); // 缓存 $p.text("内容1"); $p.css("color", "red");
通过以上步骤，你可以快速掌握 jQuery 的核心用法。关键是多写代码，尝试用 jQuery 重写原生 JavaScript 实现的功能，对比两者的差异，加深理解。
七、学习网站推荐
学习 jQuery 可以选择官方文档网站，也可以选择一些综合教程类网站，以下是具体推荐：
- jQuery 官方文档网站：可获取最权威的文档和更新信息，能了解到 jQuery 的最新版本及相关内容。其中文文档网站为http://jquery.cuishifeng.cn/，提供了详细的 API 文档和示例，涵盖选择器、DOM 操作、事件处理等方面。
- W3School：老牌的教程网站，内容丰富全面，提供了基础的 jQuery 教程和在线示例，适合初学者快速了解 jQuery 的基本概念和常用方法。
- 菜鸟教程：教程内容简洁明了，包含大量示例和练习题，还设有在线编辑器，方便学习者边学边练，通过实际操作加深对知识的理解，同样适合初学者入门。
- w3cschool：具有结构化的 jQuery 教程，包含微课、视频课程和实战练习，适合想要系统学习 jQuery 的学习者，无论是初学者还是有一定基础想进阶的人都能从中受益。
- Learning jQuery：一个非常好的 jQuery 资源博客，可跟随 jQuery 专家学习相关知识，获取实用的技巧和经验。
- jQuery4u：老牌的 jQuery 学习网站，有很多 jQuery 教程，还收集了丰富的 jQuery 插件，同时能了解到 jQuery 最新的流行趋势和新闻等内容。