jQuery 教程学习笔记

介绍

jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画制作和 Ajax 交互的过程。在本教程中，我们将深入探讨 jQuery 的各种方法和用法。

安装 jQuery

在开始学习 jQuery 之前，您需要先下载并安装它。您可以从 jQuery 官方网站（https://jquery.com/）上下载最新版本的 jQuery，也可以使用下面的 CDN 链接：

htmlCopy Code
<!-- 最新稳定版 -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

<!-- 最新开发版 -->
<script src="https://cdn.jsdelivr.net/jquery/edge/jquery.min.js"></script>

选择器

jQuery 使用一种称为“选择器”的语法来获取 HTML 元素。选择器使用 CSS 样式来匹配元素，然后执行操作。

基本选择器

以下是一些基本的 jQuery 选择器：

$(selector)：选取所有匹配的元素。
$(this)：选取当前元素。
$("p")：选取所有 <p> 元素。
$(".class")：选取所有具有 "class" 属性为 "class" 的元素。
$("#id")：选取所有具有 "id" 属性为 "id" 的元素。

层级选择器

层级选择器允许您选择嵌套的元素：

jsCopy Code
$("ul li")  // 选择所有嵌套在 <ul> 元素内的 <li> 元素
$("#myDiv p")  // 选择 ID 为 "myDiv" 的元素内的所有 <p> 元素

过滤器

过滤器允许您进一步缩小选择器的范围。以下是一些常见的过滤器：

:first：选择第一个匹配的元素。
:last：选择最后一个匹配的元素。
:even：选择偶数位置的元素。
:odd：选择奇数位置的元素。
:eq(n)：选择索引值为 n 的元素。
:gt(n)：选择索引值大于 n 的元素。
:lt(n)：选择索引值小于 n 的元素。
:header：选择所有标题元素（<h1> 到 <h6>）。

示例

以下示例演示如何使用 jQuery 选择器：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h1>选择器示例</h1>

<p id="p1">这是段落 1。</p>
<p class="test">这是段落 2。</p>
<p class="test">这是段落 3。</p>
<p>这是段落 4。</p>

<script>
$(document).ready(function(){
    // 选取 id="p1" 的元素
    $("#p1").css("color", "red");
    
    // 选取 class="test" 的所有元素
    $(".test").css("background-color", "yellow");
    
    // 选取第一个 <p> 元素
    $("p:first").css("border", "1px solid black");
    
    // 选取所有偶数位置的 <p> 元素
    $("p:even").css("background-color", "lightblue");
});
</script>

</body>
</html>

事件处理

接下来，我们将学习如何使用 jQuery 处理事件。

绑定事件

您可以使用 $(selector).on(event, function) 方法绑定事件处理程序：

jsCopy Code
$("button").on("click", function(){
    alert("按钮被单击了。");
});

解除绑定

您可以使用 $(selector).off(event) 方法解除绑定：

jsCopy Code
$("button").off("click");

示例

以下示例演示如何使用 jQuery 处理事件：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h1>事件处理示例</h1>

<button>单击我</button>

<script>
$(document).ready(function(){
    $("button").on("click", function(){
        alert("按钮被单击了。");
    });
});
</script>

</body>
</html>

动画

jQuery 使制作动画变得非常简单。以下是一些基本的动画方法：

$(selector).hide(speed,callback)：将元素隐藏。
$(selector).show(speed,callback)：显示一个已隐藏的元素。
$(selector).toggle(speed,callback)：切换显示隐藏元素。
$(selector).fadeIn(speed,callback)：淡入元素。
$(selector).fadeOut(speed,callback)：淡出元素。

示例

以下示例演示如何使用 jQuery 制作动画效果：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h1>动画示例</h1>

<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
<br><br>
<img id="pic" src="https://via.placeholder.com/150">

<script>
$(document).ready(function(){
    $("#hide").on("click", function(){
        $("#pic").hide("slow");
    });
    
    $("#show").on("click", function(){
        $("#pic").show("slow");
    });
    
    $("#toggle").on("click", function(){
        $("#pic").toggle("slow");
    });
});
</script>

</body>
</html>

Ajax

jQuery 使 Ajax 交互变得非常简单。以下是一些基本的 Ajax 方法：

$.ajax(options)：执行异步 HTTP (Ajax) 请求。
$.get(url,data,callback)：通过 HTTP GET 请求载入数据。
$.post(url,data,callback)：通过 HTTP POST 请求提交数据。

示例

以下示例演示如何使用 jQuery 进行 Ajax 交互：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<h1>Ajax 示例</h1>

<button id="load">载入数据</button>
<div id="result"></div>

<script>
$(document).ready(function(){
    $("#load").on("click", function(){
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/todos/1",
            method: "GET",
            success: function(data){
                $("#result").html(JSON.stringify(data));
            },
            error: function(){
                alert("出错了！");
            }
        });
    });
});
</script>

</body>
</html>

总结

jQuery 是一款功能强大且易于使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画制作和 Ajax 交互的过程。本教程介绍了 jQuery 的选择器、事件处理、动画和 Ajax 方法，并提供了示例代码来帮助您更快地上手 jQuery。