jQuery经典教程从哪学起？-杰瑞科技汇

jQuery 经典教程：从入门到精通

第一章：初识 jQuery

1 什么是 jQuery？

jQuery 是一个快速、小型、功能丰富的 JavaScript 库，它封装了大量复杂的原生 JavaScript 操作，让你能用更少的代码完成更多的任务。

核心理念： Write Less, Do More. (写得更少，做得更多)

2 为什么使用 jQuery？

跨浏览器兼容性：jQuery 处理了不同浏览器（如 IE, Chrome, Firefox, Safari）之间的差异，你无需为兼容性问题烦恼。
强大的选择器：以 CSS 选择器为基础，可以极其方便地找到页面上的任何一个或一组元素。
链式操作：可以对一个元素进行连续的多个操作，代码简洁优雅。
丰富的插件生态：有海量的第三方插件，可以轻松实现复杂的特效、表单验证、图表等。
简化 AJAX：将复杂的 AJAX 操作封装成简单的函数，让异步请求变得轻而易举。

3 如何引入 jQuery？

最简单的方式是通过 CDN（内容分发网络）引入，这样无需下载文件，速度也快。

在 HTML 文件的 <head> 或 <body> 标签结束前 <body> 加入以下代码：

<!-- 推荐使用最新稳定版 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

最佳实践：建议将 <script> 标签放在 </body> 之前，这样可以确保在 DOM 加载完成后再执行脚本，避免找不到元素。

第二章：jQuery 核心语法

jQuery 的语法非常简洁，核心是 $(selector).action()。

：这是 jQuery 的核心对象，是 jQuery 函数的别名。
selector：一个字符串，用于选择 HTML 元素，和 CSS 选择器一样（如 #id, .class, element）。
action()：一个 jQuery 方法，要对选中的元素执行的操作（如 click(), hide(), css()）。

示例：

// 隐藏所有 <p> 标签
$("p").hide();
// 隐藏 id 为 "test" 的元素
$("#test").hide();
// 隐藏 class 为 "demo" 的所有元素
$(".demo").hide();

第三章：文档就绪事件

这是一个非常重要的概念,我们需要确保在 DOM（文档对象模型）完全加载并解析后才执行我们的 jQuery 代码。

不推荐写法：

// 错误示例：如果脚本在 DOM 加载前就执行，$("p") 会找不到元素
$("p").click(function(){
    alert("段落被点击了！");
});

推荐写法（两种方式）：

使用 ready() 方法（传统方式）

$(document).ready(function(){
    // 在这里写你的 jQuery 代码
    $("p").click(function(){
        alert("段落被点击了！");
    });
});

使用简写形式（最常用）

$(function(){
    // 在这里写你的 jQuery 代码
    $("p").click(function(){
        alert("段落被点击了！");
    });
});

第四章：jQuery 选择器

这是 jQuery 的强大之处，它扩展了 CSS 的选择器，并增加了一些自定义选择器。

选择器	示例	描述
基本选择器
`#id`	`$("#test")`	选择 id 为 "test" 的元素
`.class`	`$(".demo")`	选择所有 class 为 "demo" 的元素
`element`	`$("p")`	选择所有 `<p>` 元素
		选择所有元素
`selector1, selector2`	`$("div,span,p")`	选择所有 `<div>`, `<span>`, `<p>` 元素
层级选择器
`ancestor descendant`	`$("div p")`	选择 `<div>` 内部的所有 `<p>` 元素
`parent > child`	`$("div > p")`	选择 `<div>` 的直接子元素 `<p>`
`prev + next`	`$("div + p")`	选择紧跟在 `<div>` 后面的第一个 `<p>` 元素
`prev ~ siblings`	`$("div ~ p")`	选择与 `<div>` 同级的所有 `<p>` 元素，跟在后面的
基本过滤选择器
`first`	`$("p:first")`	选择第一个 `<p>` 元素
`last`	`$("p:last")`	选择最后一个 `<p>` 元素
`even`	`$("tr:even")`	选择索引为偶数的所有 `<tr>` 元素 (从 0 开始)
`odd`	`$("tr:odd")`	选择索引为奇数的所有 `<tr>` 元素 (从 0 开始)
`eq(index)`	`$("td:eq(2)")`	选择索引等于 2 的 `<td>` 元素
`gt(index)`	`$("td:gt(4)")`	选择索引大于 4 的所有 `<td>` 元素
`lt(index)`	`$("td:lt(4)")`	选择索引小于 4 的所有 `<td>` 元素
`not(selector)`	`$("input:not(:checked)")`	选择所有不匹配给定选择器的元素
`contains(text)`	`$("div:contains('Hello')")`	选择包含 "Hello" 文本的所有 `<div>` 元素
`empty`	`$(":empty")`	选择所有不包含子元素或文本的空元素
`has(selector)`	`$("div:has(p)")`	选择包含 `<p>` 元素的所有 `<div>` 元素
`parent`	`$(":parent")`	选择包含子元素或文本的元素

第五章：jQuery 事件

jQuery 提供了简洁的事件处理方法。

事件方法	描述
`click()`	点击事件
`dblclick()`	双击事件
`mouseenter()`	鼠标进入事件
`mouseleave()`	鼠标离开事件
`mousedown()` / `mouseup()`	鼠标按下 / 释放事件
`hover()`	鼠标悬停事件（mouseenter + mouseleave 的组合）
`focus()` / `blur()`	元素获得 / 失去焦点
`on()`	通用事件绑定方法，可以绑定一个或多个事件，是现代 jQuery 的首选。

示例：

$(document).ready(function(){
    // click 事件
    $("#btn1").click(function(){
        alert("按钮1被点击了！");
    });
    // hover 事件
    $("#box").hover(
        function(){
            $(this).css("background-color", "lightblue"); // 鼠标进入
        },
        function(){
            $(this).css("background-color", "lightgray"); // 鼠标离开
        }
    );
    // 使用 on() 绑定多个事件
    $("#myInput").on({
        "focus": function(){
            $(this).css("border", "2px solid green");
        },
        "blur": function(){
            $(this).css("border", "1px solid #ccc");
        }
    });
});

第六章：jQuery 效果

jQuery 让添加动画效果变得非常简单。

1 隐藏和显示

hide(): 隐藏元素
show(): 显示元素
toggle(): 切换隐藏/显示状态

可以指定速度（slow, fast, 或毫秒数）和回调函数。

$("#hideBtn").click(function(){
    $("p").hide(1000); // 1秒内隐藏
});
$("#showBtn").click(function(){
    $("p").show("fast"); // 快速显示
});
$("#toggleBtn").click(function(){
    $("p").toggle(); // 切换
});

2 淡入淡出

fadeIn(): 淡入
fadeOut(): 淡出
fadeToggle(): 切换淡入淡出
fadeTo(): 调整到指定的透明度

$("#fadeinBtn").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});
$("#fadeoutBtn").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

3 滑动

slideDown(): 向下滑动显示
slideUp(): 向上滑动隐藏
slideToggle(): 切换滑动状态

$("#slideToggleBtn").click(function(){
    $("#panel").slideToggle("slow");
});

第七章：jQuery HTML 操作

1 获取和设置内容

text(): 获取或设置元素的文本内容（不包含 HTML 标签）。
html(): 获取或设置元素的 HTML 内容（包含 HTML 标签）。
val(): 获取或设置表单字段的值。

// 获取
var pText = $("p").text();
var pHtml = $("p").html();
var valInput = $("input#name").val();
// 设置
$("p").text("新的文本内容。");
$("p").html("<b>加粗的文本</b>");
$("input#name").val("张三");

2 获取和设置属性

attr(): 获取或设置属性值（如 id, src, href）。
removeAttr(): 移除属性。

// 获取
var linkHref = $("a").attr("href");
// 设置
$("a").attr({
    "href": "https://www.jquery.com",: "jQuery 官网"
});
// 移除
$("a").removeAttr("title");

3 添加和删除元素

append(): 在元素内部末尾。
prepend(): 在元素内部开头。
after(): 在元素后面添加兄弟元素。
before(): 在元素前面添加兄弟元素。
remove(): 删除被选元素（及其子元素）。
empty(): 清空被选元素的子元素。

<p id="p1">这是一个段落。</p>
<div id="div1">这是一个 div。</div>

// 添加
$("#p1").append("<span>（追加的文本）</span>");
$("#div1").prepend("<b>（前缀文本）</b>");
// 删除
$("#p1").remove();

第八章：jQuery CSS 操作

css(): 获取或设置 CSS 属性。
- css("property"): 获取单个属性的值。
- css("property", "value"): 设置单个属性的值。
- css({"property1":"value1", "property2":"value2"}): 同时设置多个属性。

// 获取
var pColor = $("p").css("color");
// 设置单个属性
$("p").css("background-color", "yellow");
// 设置多个属性
$("p").css({
    "font-size": "20px",
    "color": "blue",
    "border": "1px solid black"
});

第九章：jQuery AJAX

AJAX (Asynchronous JavaScript and XML) 允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

jQuery 的 $.ajax() 是最强大的方法，但通常使用简化的方法。

1 `$.load()` 方法

从服务器加载数据,并放入被选元素中。

$("#div1").load("demo_test.txt"); // 加载整个文件
$("#div1").load("demo_test.txt #p1"); // 加载文件中 id 为 p1 的内容

2 `$.get()` 和 `$.post()` 方法

用于通过 HTTP GET 或 POST 请求从服务器请求数据。

$.get() 示例：

$.get("demo_test.php", {name:"张三", age:30}, function(data, status){
    // data: 服务器返回的数据
    // status: "success" 或 "error"
    alert("数据: " + data + "\n状态: " + status);
});

$.post() 示例：

$.post("demo_test_post.php", {
    name:"李四",
    city:"北京"
}, function(data, status){
    alert("数据: " + data + "\n状态: " + status);
});

3 `$.ajax()` 方法

这是最底层、最灵活的方法。

$.ajax({
    url: "test.html", // 请求的 URL
    type: "GET", // 请求类型 (GET 或 POST)
    dataType: "html", // 预期服务器返回的数据类型
    data: {name:"王五"}, // 发送到服务器的数据
    success: function(response){
        $("#div1").html(response);
    },
    error: function(xhr, status, error){
        alert("发生错误: " + error);
    }
});

第十章：jQuery 插件

jQuery 的强大之处在于其丰富的插件生态，使用插件可以轻松实现复杂功能。

如何使用插件？

引入 jQuery 库（必须先引入）。
引入插件的 JS 和 CSS 文件。
按照插件的文档调用。

示例：使用一个简单的轮播图插件（假设为 mySlider.js）

<!-- 1. 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 2. 引入插件 -->
<link rel="stylesheet" href="css/mySlider.css">
<script src="js/mySlider.js"></script>
<!-- HTML 结构 -->
<div id="mySlider">
    <img src="img/slide1.jpg" alt="Slide 1">
    <img src="img/slide2.jpg" alt="Slide 2">
    <img src="img/slide3.jpg" alt="Slide 3">
</div>
<script>
    // 3. 调用插件
    $(document).ready(function(){
        $("#mySlider").mySlider({
            speed: 1000,
            autoplay: true
        });
    });
</script>

总结与学习建议

动手实践：教程看再多不如亲手敲一遍，创建一个 HTML 文件，把每个例子都运行一遍，修改参数看看效果。
理解和 `DOM：始终记住是在操作 DOM 元素，理解 DOM 是前端开发的基础。
善用官方文档：jQuery 官方文档是最权威的参考资料，遇到不熟悉的方法就去查。
从 jQuery 到原生 JS：学习 jQuery 是为了提高效率，但最终目标还是理解原生 JavaScript，当你能用 jQuery 实现功能后，尝试用原生 JS 实现一遍，你会对两者的差异有更深刻的理解。
拥抱现代前端框架：虽然 jQuery 依然强大，但对于大型单页应用，Vue, React, Angular 等现代框架已成为主流，jQuery 是你通往前端世界的一座坚实桥梁。

这份教程涵盖了 jQuery 的核心知识点，希望它能帮助你顺利入门并掌握这个强大的工具！

jQuery经典教程从哪学起？