jquery教程实例：jQuery教程实例，轻松上手前端开发的利器

来源：网络作者：日期：2025-11-14 22:53:45

jQuery是一个快速、简洁的JavaScript库，它封装了浏览器的差异性，简化了HTML、CSS和JavaScript的操作，无论是初学者还是有经验的开发者，掌握jQuery都能大大提升前端开发的效率，本文将通过多个实例,带你轻松入门jQuery。

jQuery基础入门

1 什么是jQuery？

jQuery是一个开源的JavaScript库，由John Resig于2009年创建，它提供了丰富的DOM操作、事件处理、动画效果等功能,兼容所有现代浏览器。

2 引入jQuery

在HTML文件中引入jQuery库非常简单，只需在<head>标签中添加以下代码：

jquery教程实例：jQuery教程实例，轻松上手前端开发的利器

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQuery实例解析

1 页面加载效果

当页面加载完成后,执行一段动画效果。

<!DOCTYPE html>
<html>
<head>jQuery示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <script>
        $(document).ready(function() {
            $("#demo").animate({
                top: "100px"
            }, 1000);
        });
    </script>
</body>
</html>

解析：

jquery教程实例：jQuery教程实例，轻松上手前端开发的利器

$(document).ready() 确保页面加载完成后执行代码。
$("#demo") 选择ID为demo的元素。
animate() 方法执行动画效果，将元素垂直移动100px,耗时1000毫秒。

2 点击事件处理

当用户点击按钮时,显示一段文字。

<!DOCTYPE html>
<html>
<head>jQuery点击事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="clickBtn">点击我</button>
    <p id="message"></p>
    <script>
        $(document).ready(function() {
            $("#clickBtn").click(function() {
                $("#message").text("你点击了按钮！");
            });
        });
    </script>
</body>
</html>

解析：

jquery教程实例：jQuery教程实例，轻松上手前端开发的利器

$("#clickBtn") 选择ID为clickBtn的按钮。
click() 方法绑定点击事件。
$("#message").text() 设置段落的文本内容。

3 表单验证

验证用户输入的邮箱格式是否正确。

<!DOCTYPE html>
<html>
<head>jQuery表单验证</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="text" id="email" placeholder="请输入邮箱">
        <button type="submit">提交</button>
    </form>
    <p id="error"></p>
    <script>
        $(document).ready(function() {
            $("#myForm").submit(function(event) {
                event.preventDefault(); // 阻止表单提交
                var email = $("#email").val();
                if (email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
                    alert("邮箱格式正确！");
                } else {
                    $("#error").text("请输入正确的邮箱地址！");
                }
            });
        });
    </script>
</body>
</html>

解析：

submit() 方法绑定表单提交事件。
event.preventDefault() 阻止表单默认提交行为。
使用正则表达式验证邮箱格式。

jQuery高级应用

1 AJAX请求

使用jQuery发送AJAX请求获取数据。

<!DOCTYPE html>
<html>
<head>jQuery AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="loadData">加载数据</button>
    <div id="result"></div>
    <script>
        $(document).ready(function() {
            $("#loadData").click(function() {
                $.ajax({
                    url: "https://api.example.com/data",
                    type: "GET",
                    success: function(response) {
                        $("#result").html(response.message);
                    },
                    error: function(xhr) {
                        $("#result").text("请求失败：" + xhr.status);
                    }
                });
            });
        });
    </script>
</body>
</html>

解析：