jQuery 开源项目教程

2026-01-16 10:32:41作者：吴年前Myrtle

项目介绍

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它通过简洁的 API 使得 HTML 文档遍历、事件处理、动画和 Ajax 操作更加简单。jQuery 兼容多种浏览器，包括 Chrome、Edge、Firefox、IE、Safari 等，适用于桌面和移动端开发。

项目快速启动

下载 jQuery

你可以从 jQuery 官方网站下载 jQuery 库，或者通过 CDN 引入。以下是通过 CDN 引入 jQuery 的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery 快速启动</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <button id="btn">点击我</button>

    <script>
        $(document).ready(function() {
            $('#btn').click(function() {
                alert('Hello, jQuery!');
            });
        });
    </script>
</body>
</html>

基本使用

在上面的示例中，我们通过 CDN 引入了 jQuery，并在页面加载完成后，为按钮添加了一个点击事件，点击按钮时会弹出一个提示框。

应用案例和最佳实践

案例一：表单验证

jQuery 可以方便地进行表单验证。以下是一个简单的表单验证示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="myForm">
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <button type="submit">提交</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#myForm').submit(function(event) {
                var username = $('#username').val();
                var password = $('#password').val();

                if (username === '' || password === '') {
                    alert('用户名和密码不能为空');
                    event.preventDefault();
                }
            });
        });
    </script>
</body>
</html>