轻松学会jQuery：打造10个实用实战项目，掌握前端开发必备技能

在当今的前端开发领域，jQuery 作为一种快速、简洁的 JavaScript 库，已经成为许多开发者首选的工具之一。通过使用 jQuery，我们可以简化 JavaScript 代码，提高开发效率，并实现丰富的交互效果。本文将带领你通过 10 个实用实战项目，轻松学会 jQuery，掌握前端开发必备技能。

项目一：图片轮播

图片轮播是网页中常见的交互效果，使用 jQuery 实现图片轮播可以让你更好地掌握 jQuery 的选择器和动画功能。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        .slider {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .slider ul {
            width: 100%;
            height: 300px;
            position: absolute;
            list-style: none;
            padding: 0;
        }
        .slider ul li {
            width: 500px;
            height: 300px;
            float: left;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="slider">
        <ul>
            <li><img src="image1.jpg" alt="image1"></li>
            <li><img src="image2.jpg" alt="image2"></li>
            <li><img src="image3.jpg" alt="image3"></li>
        </ul>
    </div>
    <script>
        $(document).ready(function() {
            var index = 0;
            var ul = $('.slider ul');
            var length = ul.children().length;
            var width = ul.children().width();

            function move() {
                ul.animate({ 'left': -index * width }, 500);
            }

            setInterval(function() {
                index = (index + 1) % length;
                move();
            }, 3000);
        });
    </script>
</body>
</html>

项目二：选项卡切换

选项卡切换是网页中常见的交互效果，使用 jQuery 实现选项卡切换可以让你更好地掌握 jQuery 的事件委托和 DOM 操作。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡切换</title>
    <style>
        .tab {
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        .tab ul {
            list-style: none;
            padding: 0;
        }
        .tab ul li {
            display: inline-block;
            width: 100px;
            text-align: center;
            border-right: 1px solid #ccc;
            cursor: pointer;
        }
        .tab ul li:last-child {
            border-right: none;
        }
        .tab ul li.active {
            background-color: #f00;
            color: #fff;
        }
        .tab .content {
            display: none;
        }
        .tab .content.active {
            display: block;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="tab">
        <ul>
            <li class="active">Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
        </ul>
        <div class="content active">Content 1</div>
        <div class="content">Content 2</div>
        <div class="content">Content 3</div>
    </div>
    <script>
        $(document).ready(function() {
            $('.tab ul li').click(function() {
                var index = $(this).index();
                $('.tab ul li').removeClass('active').eq(index).addClass('active');
                $('.tab .content').removeClass('active').eq(index).addClass('active');
            });
        });
    </script>
</body>
</html>

项目三：倒计时

倒计时是网页中常见的功能，使用 jQuery 实现倒计时可以让你更好地掌握 jQuery 的定时器。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="countdown">00:00:00</div>
    <script>
        $(document).ready(function() {
            var endtime = new Date('2023-12-31 23:59:59').getTime();
            var nowtime = new Date().getTime();
            var interval = endtime - nowtime;
            var h = Math.floor(interval / 3600 / 1000);
            var m = Math.floor((interval - h * 3600 * 1000) / 60 / 1000);
            var s = Math.floor((interval - h * 3600 * 1000 - m * 60 * 1000) / 1000);
            $('#countdown').html(h + ':' + m + ':' + s);
            setInterval(function() {
                endtime = new Date('2023-12-31 23:59:59').getTime();
                nowtime = new Date().getTime();
                interval = endtime - nowtime;
                h = Math.floor(interval / 3600 / 1000);
                m = Math.floor((interval - h * 3600 * 1000) / 60 / 1000);
                s = Math.floor((interval - h * 3600 * 1000 - m * 60 * 1000) / 1000);
                $('#countdown').html(h + ':' + m + ':' + s);
            }, 1000);
        });
    </script>
</body>
</html>

项目四：表单验证

表单验证是网页中常见的功能，使用 jQuery 实现表单验证可以让你更好地掌握 jQuery 的表单操作和事件监听。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <span id="username-error" style="color: red;"></span>
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <span id="password-error" style="color: red;"></span>
        <br>
        <input type="button" value="提交" onclick="validateForm()">
    </form>
    <script>
        function validateForm() {
            var username = $('#username').val();
            var password = $('#password').val();
            if (username === '') {
                $('#username-error').text('用户名不能为空');
                return false;
            }
            if (password.length < 6) {
                $('#password-error').text('密码长度不能少于 6 位');
                return false;
            }
            $('#username-error').text('');
            $('#password-error').text('');
            alert('验证成功！');
        }
    </script>
</body>
</html>

项目五：模态框

模态框是网页中常见的弹出框，使用 jQuery 实现模态框可以让你更好地掌握 jQuery 的 DOM 操作和事件监听。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 100px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="openModal">打开模态框</button>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>这是一个模态框。</p>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('#openModal').click(function() {
                $('#myModal').css('display', 'block');
            });
            $('.close').click(function() {
                $('#myModal').css('display', 'none');
            });
            $(window).click(function(event) {
                if (event.target === $('#myModal')[0]) {
                    $('#myModal').css('display', 'none');
                }
            });
        });
    </script>
</body>
</html>

项目六：瀑布流布局

瀑布流布局是网页中常见的布局方式，使用 jQuery 实现瀑布流布局可以让你更好地掌握 jQuery 的动画和 DOM 操作。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <style>
        .container {
            width: 100%;
            column-count: 3;
            column-gap: 10px;
        }
        .item {
            width: 100%;
            background-color: #f0f0f0;
            padding: 10px;
            box-sizing: border-box;
        }
        .item img {
            width: 100%;
            height: auto;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="item">
            <img src="image1.jpg" alt="image1">
        </div>
        <div class="item">
            <img src="image2.jpg" alt="image2">
        </div>
        <div class="item">
            <img src="image3.jpg" alt="image3">
        </div>
        <!-- 添加更多图片 -->
    </div>
    <script>
        $(document).ready(function() {
            var $container = $('.container');
            var $item = $('.item');
            var colHeight = [];
            var maxCol = 0;

            function waterfall() {
                $item.each(function(index) {
                    if (index === 0) {
                        colHeight[index] = $item.eq(index).outerHeight();
                        maxCol = 0;
                    } else {
                        colHeight[index] = $item.eq(index).outerHeight();
                        if (colHeight[index] > colHeight[maxCol]) {
                            maxCol = index;
                        }
                    }
                    $item.eq(index).css({
                        'position': 'absolute',
                        'top': colHeight[maxCol] + 'px',
                        'left': $item.eq(maxCol).offset().left + 'px'
                    });
                });
            }

            $(window).resize(function() {
                colHeight = [];
                maxCol = 0;
                waterfall();
            });

            waterfall();
        });
    </script>
</body>
</html>

项目七：无限滚动加载

无限滚动加载是网页中常见的功能，使用 jQuery 实现无限滚动加载可以让你更好地掌握 jQuery 的 AJAX 和事件监听。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无限滚动加载</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 图片列表 -->
    </div>
    <script>
        $(document).ready(function() {
            var page = 1;
            var isLoading = false;

            function loadImages() {
                if (isLoading) {
                    return;
                }
                isLoading = true;
                $.ajax({
                    url: 'https://api.example.com/images?page=' + page,
                    type: 'GET',
                    success: function(data) {
                        var images = data.images;
                        var $container = $('.container');
                        $.each(images, function(index, image) {
                            var $img = $('<img>').attr('src', image.url).attr('alt', image.description);
                            $container.append($img);
                        });
                        page++;
                        isLoading = false;
                    }
                });
            }

            $(window).scroll(function() {
                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                    loadImages();
                }
            });

            loadImages();
        });
    </script>
</body>
</html>

项目八：响应式导航菜单

响应式导航菜单是网页中常见的功能，使用 jQuery 实现响应式导航菜单可以让你更好地掌握 jQuery 的 CSS 操作和事件监听。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式导航菜单</title>
    <style>
        .nav {
            background-color: #333;
            overflow: hidden;
        }
        .nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav ul li {
            float: left;
        }
        .nav ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .nav ul li a:hover {
            background-color: #ddd;
            color: black;
        }
        .nav-resp {
            display: none;
        }
        @media screen and (max-width: 600px) {
            .nav ul li {
                float: none;
            }
            .nav ul li a {
                text-align: left;
            }
            .nav-resp {
                display: block;
            }
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系我们</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
        <div class="nav-resp">
            <input type="checkbox" id="nav-toggle">
            <label for="nav-toggle">&#9776;</label>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#news">新闻</a></li>
                <li><a href="#contact">联系我们</a></li>
                <li><a href="#about">关于我们</a></li>
            </ul>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('#nav-toggle').click(function() {
                $('.nav-resp ul').slideToggle();
            });
        });
    </script>
</body>
</html>

项目九：自定义滚动条

自定义滚动条是网页中常见的功能，使用 jQuery 实现自定义滚动条可以让你更好地掌握 jQuery 的 CSS 操作和事件监听。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条</title>
    <style>
        .scrollbar {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .scrollbar-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #f0f0f0;
            padding: 10px;
            box-sizing: border-box;
        }
        .scrollbar-track {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            cursor: pointer;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="scrollbar">
        <div class="scrollbar-content">
            <!-- 内容 -->
        </div>
        <div class="scrollbar-track"></div>
    </div>
    <script>
        $(document).ready(function() {
            var $scrollbar = $('.scrollbar');
            var $content = $('.scrollbar-content');
            var $track = $('.scrollbar-track');
            var contentHeight = $content.outerHeight();
            var trackHeight = $track.outerHeight();
            var ratio = contentHeight / trackHeight;

            $track.mousemove(function(event) {
                var y = event.pageY - $scrollbar.offset().top - ($scrollbar.outerHeight() - trackHeight) / 2;
                var contentTop = -y / ratio;
                $content.css('top', contentTop + 'px');
            });
        });
    </script>
</body>
</html>

项目十：购物车

购物车是电商网站中常见的功能，使用 jQuery 实现购物车可以让你更好地掌握 jQuery 的 DOM 操作和事件监听。

代码示例：

”`html <!DOCTYPE html>

<meta charset="UTF-8">
<title>购物车</title>
<style>
    .product {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .product img {
        width