正文

学会jQuery，打造实用网页：8个实战项目轻松入门

/0 浏览量
1010

在数字化时代，掌握前端技术至关重要。jQuery作为一种优秀的JavaScript库，因其简洁的语法和强大的功能，受到了众多开发者的青睐。本文将带你通过8个实战项目，轻松入门jQuery，并学会如何将其应用于实际网页开发中。

项目一：简单的轮播图

轮播图是网页中常见的元素，用于展示多张图片。以下是一个简单的轮播图实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .slider {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .slide {
            width: 300px;
            height: 200px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="slide" style="background-image: url('image1.jpg');"></div>
        <div class="slide" style="background-image: url('image2.jpg');"></div>
        <div class="slide" style="background-image: url('image3.jpg');"></div>
    </div>

    <script>
        var currentSlide = 0;
        var slides = $('.slide');
        var totalSlides = slides.length;

        function nextSlide() {
            slides.eq(currentSlide).fadeOut();
            currentSlide = (currentSlide + 1) % totalSlides;
            slides.eq(currentSlide).fadeIn();
        }

        setInterval(nextSlide, 3000);
    </script>
</body>
</html>

项目二：响应式导航栏

响应式导航栏能够根据屏幕大小自动调整布局。以下是一个简单的响应式导航栏实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .navbar {
            overflow: hidden;
            background-color: #333;
        }
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        @media screen and (max-width: 600px) {
            .navbar a {
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
</head>
<body>

<div class="navbar">
    <a href="#home">首页</a>
    <a href="#news">新闻</a>
    <a href="#contact">联系我们</a>
    <a href="#about">关于我们</a>
</div>

</body>
</html>

项目三：动态表单验证

表单验证是网页开发中的重要环节。以下是一个简单的动态表单验证实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <form>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name">
        <span class="error" id="nameError"></span>
        <br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email">
        <span class="error" id="emailError"></span>
        <br>
        <input type="submit" value="提交">
    </form>

    <script>
        $('#name').on('input', function() {
            var name = $(this).val();
            if (name.length < 2) {
                $('#nameError').text('姓名长度至少为2个字符');
            } else {
                $('#nameError').text('');
            }
        });

        $('#email').on('input', function() {
            var email = $(this).val();
            if (!email.includes('@')) {
                $('#emailError').text('请输入有效的邮箱地址');
            } else {
                $('#emailError').text('');
            }
        });
    </script>
</body>
</html>

项目四：折叠面板

折叠面板是一种常见的交互元素，用于展示或隐藏内容。以下是一个简单的折叠面板实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .panel {
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        .panel-title {
            cursor: pointer;
            padding: 10px;
            background-color: #f1f1f1;
        }
        .panel-content {
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="panel">
        <div class="panel-title">标题1</div>
        <div class="panel-content">
            内容1
        </div>
    </div>
    <div class="panel">
        <div class="panel-title">标题2</div>
        <div class="panel-content">
            内容2
        </div>
    </div>

    <script>
        $('.panel-title').on('click', function() {
            var content = $(this).next('.panel-content');
            if (content.is(':visible')) {
                content.slideUp();
            } else {
                $('.panel-content').slideUp();
                content.slideDown();
            }
        });
    </script>
</body>
</html>

项目五：倒计时

倒计时是一种常见的功能，用于展示活动开始或结束的时间。以下是一个简单的倒计时实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="countdown">00:00:00</div>

    <script>
        var endTime = new Date('Dec 31, 2023 23:59:59').getTime();
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = endTime - now;
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 "
            + minutes + "分钟 " + seconds + "秒 ";
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("countdown").innerHTML = "活动已结束";
            }
        }, 1000);
    </script>
</body>
</html>

项目六：图片懒加载

图片懒加载是一种优化网页性能的技术，用于延迟加载图片。以下是一个简单的图片懒加载实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .lazyload {
            opacity: 0;
            transition: opacity 0.3s;
        }
        .lazyload.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <img src="placeholder.jpg" data-src="image1.jpg" class="lazyload">
    <img src="placeholder.jpg" data-src="image2.jpg" class="lazyload">
    <img src="placeholder.jpg" data-src="image3.jpg" class="lazyload">

    <script>
        $('.lazyload').on('load', function() {
            $(this).addClass('loaded');
        });
    </script>
</body>
</html>

项目七：AJAX请求

AJAX请求是前端与后端交互的重要手段。以下是一个简单的AJAX请求实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button id="btn">获取数据</button>
    <div id="data"></div>

    <script>
        $('#btn').on('click', function() {
            $.ajax({
                url: 'data.json',
                type: 'GET',
                success: function(data) {
                    $('#data').html('<pre>' + JSON.stringify(data, null, 2) + '</pre>');
                },
                error: function() {
                    $('#data').html('请求失败');
                }
            });
        });
    </script>
</body>
</html>

项目八：自定义弹窗

弹窗是网页中常见的提示元素。以下是一个简单的自定义弹窗实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% 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>
</head>
<body>

<button id="myBtn">打开弹窗</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>这是一个弹窗</p>
    </div>
</div>

<script>
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function() {
        modal.style.display = "block";
    }
    span.onclick = function() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

</body>
</html>

通过以上8个实战项目，相信你已经对jQuery有了初步的了解。在实际开发中，你可以根据需求选择合适的项目进行学习和实践。祝你学习愉快！

-- 展开阅读全文 --