JavaScript学习教程，从入门到精通，jQuery快速入门指南（30）

原创于 2025-04-29 13:54:03 发布 · 775 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #jquery #html5 #开发语言 #ajax #ecmascript

前端开发同时被 3 个专栏收录

262 篇文章

订阅专栏

网页开发

235 篇文章

订阅专栏

JavaScript

42 篇文章

订阅专栏

jQuery快速入门指南

什么是jQuery

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。jQuery的设计宗旨是"Write Less, Do More"（写得更少，做得更多）。

jQuery的主要特点：

轻量级
强大的选择器
出色的DOM操作
可靠的事件处理
完善的Ajax支持
丰富的插件生态
良好的浏览器兼容性

下载和引入jQuery

下载jQuery

可以从jQuery官网下载最新版本：https://jquery.com/

引入jQuery

有两种方式引入jQuery：

从本地引入：

<script src="jquery-3.6.0.min.js"></script>

使用CDN引入（推荐）：

<!-- 使用Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 或使用Microsoft CDN -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

jQuery的简单使用

基本语法

jQuery的基本语法是：$(selector).action()

$ 符号定义jQuery
selector 用于"查询"和"查找"HTML元素
action() 执行对元素的操作

文档就绪事件

为了防止文档在完全加载之前运行jQuery代码，所有jQuery代码都应该放在文档就绪事件中：

$(document).ready(function(){
   // jQuery代码写在这里
});

// 简写形式
$(function(){
   // jQuery代码写在这里
});

jQuery对象

当使用jQuery选择器选择元素时，返回的是一个jQuery对象，而不是DOM元素。jQuery对象是一个包含零个或多个DOM元素的集合，并提供了许多方法来操作这些元素。

jQuery对象与DOM对象的转换

// DOM对象转jQuery对象
var domObj = document.getElementById("id");
var $jQueryObj = $(domObj);

// jQuery对象转DOM对象
var domObj1 = $jQueryObj[0];  // 方式一
var domObj2 = $jQueryObj.get(0);  // 方式二

语法知识点及案例代码

1. 选择器

jQuery使用CSS样式选择器来选取HTML元素。

// 元素选择器
$("p")  // 选择所有<p>元素

// id选择器
$("#test")  // 选择id="test"的元素

// class选择器
$(".test")  // 选择class="test"的元素

// 更多选择器示例
$("*")          // 选择所有元素
$("p.intro")    // 选择class="intro"的<p>元素
$("p:first")    // 选择第一个<p>元素
$("ul li:first") // 选择第一个<ul>元素的第一个<li>元素
$("ul li:first-child") // 选择每个<ul>元素的第一个<li>元素
$("[href]")     // 选择带有href属性的元素
$("a[target='_blank']") // 选择target="_blank"的<a>元素
$("a[target!='_blank']") // 选择target不是"_blank"的<a>元素
$(":button")    // 选择所有type="button"的<input>元素和<button>元素
$("tr:even")   // 选择偶数位置的<tr>元素
$("tr:odd")    // 选择奇数位置的<tr>元素

2. 事件处理

// 点击事件
$("#btn").click(function(){
    alert("按钮被点击了!");
});

// 鼠标悬停事件
$("p").hover(
    function(){
        $(this).css("background-color", "yellow");
    },
    function(){
        $(this).css("background-color", "white");
    }
);

// 表单事件
$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});

// 文档加载完成事件
$(document).ready(function(){
    console.log("文档加载完成");
});

// 简写形式
$(function(){
    console.log("文档加载完成(简写形式)");
});

3. DOM操作

// 获取内容
var text = $("#test").text();  // 获取文本内容
var html = $("#test").html();  // 获取HTML内容
var val = $("#input").val();   // 获取表单字段的值

// 设置内容
$("#test").text("Hello world!");  // 设置文本内容
$("#test").html("<b>Hello world!</b>");  // 设置HTML内容
$("#input").val("John Doe");  // 设置表单字段的值

// 获取属性
var href = $("a").attr("href");

// 设置属性
$("a").attr("href", "https://www.newwebsite.com");

// 添加元素
$("p").append("追加文本");  // 在元素内部末尾追加内容
$("p").prepend("前置文本"); // 在元素内部开头插入内容
$("p").after("<div>之后插入</div>");  // 在元素之后插入内容
$("p").before("<div>之前插入</div>"); // 在元素之前插入内容

// 删除元素
$("#div1").remove();  // 删除元素及其子元素
$("#div1").empty();   // 删除元素的子元素

// 操作CSS
$("p").addClass("important");  // 添加类
$("p").removeClass("important");  // 删除类
$("p").toggleClass("important");  // 切换类
$("p").css("color", "red");  // 设置CSS属性
$("p").css({"color":"red","background-color":"yellow"});  // 设置多个CSS属性

4. 效果和动画

// 显示和隐藏
$("#hide").click(function(){
    $("p").hide();  // 隐藏元素
});
$("#show").click(function(){
    $("p").show();  // 显示元素
});
$("#toggle").click(function(){
    $("p").toggle();  // 切换显示/隐藏状态
});

// 淡入淡出
$("#fadeIn").click(function(){
    $("div").fadeIn();
});
$("#fadeOut").click(function(){
    $("div").fadeOut();
});
$("#fadeToggle").click(function(){
    $("div").fadeToggle();
});
$("#fadeTo").click(function(){
    $("div").fadeTo("slow", 0.5);  // 淡出到指定透明度
});

// 滑动
$("#slideDown").click(function(){
    $("div").slideDown();
});
$("#slideUp").click(function(){
    $("div").slideUp();
});
$("#slideToggle").click(function(){
    $("div").slideToggle();
});

// 自定义动画
$("#animate").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '+=150px',
        width: '+=150px'
    }, "slow");
});

// 停止动画
$("#stop").click(function(){
    $("div").stop();
});

5. AJAX

// 加载内容
$("#load").click(function(){
    $("#div1").load("demo_test.txt");  // 从服务器加载数据并放入元素中
});

// GET请求
$("#get").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("数据: " + data + "\n状态: " + status);
    });
});

// POST请求
$("#post").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("数据: " + data + "\n状态: " + status);
    });
});

// AJAX完整方法
$("#ajax").click(function(){
    $.ajax({
        url: "demo_test.txt",
        type: "GET",
        dataType: "text",
        success: function(result){
            $("#div1").html(result);
        },
        error: function(xhr, status, error){
            alert("错误: " + error);
        }
    });
});

6. 遍历

// 祖先
$("span").parent();  // 返回直接父元素
$("span").parents();  // 返回所有祖先元素
$("span").parentsUntil("div");  // 返回介于两个给定元素之间的所有祖先元素

// 后代
$("div").children();  // 返回所有直接子元素
$("div").find("span");  // 返回被选元素的后代元素，一路向下直到最后一个后代

// 同胞
$("h2").siblings();  // 返回所有同胞元素
$("h2").next();  // 返回下一个同胞元素
$("h2").nextAll();  // 返回所有跟随的同胞元素
$("h2").nextUntil("h6");  // 返回介于两个给定参数之间的所有跟随的同胞元素
$("h2").prev();  // 返回上一个同胞元素
$("h2").prevAll();  // 返回所有前面的同胞元素
$("h2").prevUntil("h6");  // 返回介于两个给定参数之间的所有前面的同胞元素

// 过滤
$("div").first();  // 返回被选元素的第一个元素
$("div").last();  // 返回被选元素的最后一个元素
$("p").eq(1);  // 返回被选元素中带有指定索引号的元素
$("p").filter(".intro");  // 返回匹配标准的所有元素
$("p").not(".intro");  // 返回不匹配标准的所有元素

综合案例

案例1：简单的jQuery应用

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 隐藏所有段落
    $("#hide").click(function(){
        $("p").hide();
    });
    
    // 显示所有段落
    $("#show").click(function(){
        $("p").show();
    });
    
    // 改变段落样式
    $("#style").click(function(){
        $("p").css({"color": "red", "font-size": "20px"});
    });
    
    // 添加新段落
    $("#add").click(function(){
        $("body").append("<p>这是新添加的段落</p>");
    });
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

<button id="hide">隐藏段落</button>
<button id="show">显示段落</button>
<button id="style">改变样式</button>
<button id="add">添加段落</button>

</body>
</html>

案例2：AJAX加载内容

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 加载外部内容
    $("#loadContent").click(function(){
        $("#content").load("demo_ajax_load.txt", function(responseTxt, statusTxt, xhr){
            if(statusTxt == "success")
                alert("外部内容加载成功!");
            if(statusTxt == "error")
                alert("错误: " + xhr.status + ": " + xhr.statusText);
        });
    });
    
    // 获取JSON数据
    $("#getJSON").click(function(){
        $.getJSON("demo_ajax_json.js", function(result){
            $.each(result, function(i, field){
                $("#content").append(field + " ");
            });
        });
    });
});
</script>
</head>
<body>

<div id="content" style="height:100px;width:300px;border:1px solid black;padding:10px;"></div>

<button id="loadContent">加载内容</button>
<button id="getJSON">获取JSON数据</button>

</body>
</html>

案例3：表单验证

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 表单提交验证
    $("form").submit(function(event){
        var name = $("#name").val();
        var email = $("#email").val();
        var isValid = true;
        
        // 验证姓名
        if(name == ""){
            $("#nameError").text("姓名不能为空");
            isValid = false;
        }else{
            $("#nameError").text("");
        }
        
        // 验证邮箱
        if(email == ""){
            $("#emailError").text("邮箱不能为空");
            isValid = false;
        }else if(!isValidEmail(email)){
            $("#emailError").text("请输入有效的邮箱地址");
            isValid = false;
        }else{
            $("#emailError").text("");
        }
        
        if(!isValid){
            event.preventDefault(); // 阻止表单提交
        }
    });
    
    // 邮箱验证函数
    function isValidEmail(email) {
        var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return pattern.test(email);
    }
});
</script>
<style>
.error { color: red; font-size: 12px; }
</style>
</head>
<body>

<form action="/submit" method="post">
    <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name">
        <span id="nameError" class="error"></span>
    </div>
    <div>
        <label for="email">邮箱:</label>
        <input type="text" id="email" name="email">
        <span id="emailError" class="error"></span>
    </div>
    <button type="submit">提交</button>
</form>

</body>
</html>

案例4：图片轮播

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var currentIndex = 0;
    var images = $("#slider img");
    var totalImages = images.length;
    
    // 隐藏所有图片，只显示第一张
    images.hide();
    $(images[currentIndex]).show();
    
    // 下一张按钮
    $("#next").click(function(){
        $(images[currentIndex]).fadeOut(500);
        currentIndex = (currentIndex + 1) % totalImages;
        $(images[currentIndex]).fadeIn(500);
    });
    
    // 上一张按钮
    $("#prev").click(function(){
        $(images[currentIndex]).fadeOut(500);
        currentIndex = (currentIndex - 1 + totalImages) % totalImages;
        $(images[currentIndex]).fadeIn(500);
    });
    
    // 自动轮播
    var interval = setInterval(function(){
        $("#next").click();
    }, 3000);
    
    // 鼠标悬停时暂停轮播
    $("#slider").hover(
        function(){
            clearInterval(interval);
        },
        function(){
            interval = setInterval(function(){
                $("#next").click();
            }, 3000);
        }
    );
});
</script>
<style>
#slider {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
}
#slider img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#controls {
    text-align: center;
    margin-top: 10px;
}
button {
    padding: 5px 15px;
    margin: 0 5px;
}
</style>
</head>
<body>

<div id="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</div>

<div id="controls">
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>

</body>
</html>