从零开始学jQuery：打造10个小程序实战经验分享

引言

jQuery，作为一款流行的JavaScript库，极大地简化了前端开发。对于初学者来说，从零开始学习jQuery并实践小程序是一个很好的入门方式。本文将分享10个小程序实战经验，帮助您逐步掌握jQuery。

第一个小程序：点击切换显示与隐藏

目标：学会使用jQuery选择器和基本操作来实现点击切换显示与隐藏效果。

实现步骤：

HTML部分：

<button id="toggleBtn">切换显示/隐藏</button>
<div id="content">这是一个需要切换显示/隐藏的元素。</div>

CSS部分：

#content {
    display: none;
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
}

jQuery部分：

$(document).ready(function() {
    $("#toggleBtn").click(function() {
        $("#content").toggle();
    });
});

第二个小程序：制作一个简单的图片轮播

目标：掌握jQuery实现图片轮播效果。

实现步骤：

HTML部分：

<div id="carousel" class="carousel">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <button class="prev">上一张</button>
    <button class="next">下一张</button>
</div>

CSS部分：

.carousel {
    position: relative;
    width: 400px;
    height: 300px;
}
.carousel img {
    width: 100%;
    height: 100%;
}

jQuery部分：

$(document).ready(function() {
    var current = 0;
    var $carousel = $("#carousel");
    var $images = $carousel.find("img");
    var $prev = $carousel.find(".prev");
    var $next = $carousel.find(".next");


    $prev.click(function() {
        current--;
        if (current < 0) {
            current = $images.length - 1;
        }
        updateCarousel();
    });


    $next.click(function() {
        current++;
        if (current >= $images.length) {
            current = 0;
        }
        updateCarousel();
    });


    function updateCarousel() {
        $images.removeClass("active");
        $images.eq(current).addClass("active");
    }
});

第三个小程序：制作一个简单的导航菜单

目标：学会使用jQuery实现导航菜单的切换效果。

实现步骤：

HTML部分：

<div class="menu">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</div>

CSS部分：

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.menu ul li {
    float: left;
}
.menu ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

jQuery部分：

$(document).ready(function() {
    $(".menu ul li a").click(function() {
        $(this).parent().siblings().find("a").removeClass("active");
        $(this).addClass("active");
    });
});

第四个小程序：制作一个简单的倒计时

目标：掌握jQuery实现倒计时功能。

实现步骤：

HTML部分：

<div id="countdown">10秒后自动跳转到首页</div>

CSS部分：

#countdown {
    font-size: 24px;
    color: #f00;
}

jQuery部分：

$(document).ready(function() {
    var countdown = 10;
    setInterval(function() {
        countdown--;
        $("#countdown").text(countdown + "秒后自动跳转到首页");
        if (countdown <= 0) {
            window.location.href = "index.html";
        }
    }, 1000);
});

第五个小程序：制作一个简单的图片放大镜

目标：学会使用jQuery实现图片放大镜效果。

实现步骤：

HTML部分：

<div class="magnifier">
    <img src="image1.jpg" alt="image">
    <div class="zoom"></div>
</div>

CSS部分：

.magnifier {
    position: relative;
    width: 300px;
    height: 300px;
}
.magnifier img {
    width: 100%;
    height: 100%;
}
.zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    border: 1px solid #f00;
    overflow: hidden;
}

jQuery部分：

$(document).ready(function() {
    $(".magnifier img").mousemove(function(e) {
        var $zoom = $(this).next(".zoom");
        var offset = $(this).offset();
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;
        x = Math.min(Math.max(x, 0), $(this).width() - $zoom.width());
        y = Math.min(Math.max(y, 0), $(this).height() - $zoom.height());
        $zoom.css({ "top": y, "left": x });
        $zoom.find("img").css({ "top": -y, "left": -x });
    });
});

第六个小程序：制作一个简单的评分插件

目标：掌握jQuery实现评分插件。

实现步骤：

HTML部分：

<div class="rating">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

CSS部分：

.rating {
    display: inline-block;
    position: relative;
}
.rating span {
    cursor: pointer;
    font-size: 24px;
    color: #f00;
    margin-right: 10px;
}

jQuery部分：

$(document).ready(function() {
    $(".rating span").hover(function() {
        var value = $(this).index() + 1;
        $(this).prevAll("span").css({ "color": "#f00" });
        $(this).nextAll("span").css({ "color": "#333" });
        $(this).css({ "color": "#f00" });
        console.log("评分：" + value);
    }, function() {
        var value = $(this).index() + 1;
        $(this).prevAll("span").css({ "color": "#333" });
        $(this).nextAll("span").css({ "color": "#333" });
        $(this).css({ "color": "#333" });
    });
});

第七个小程序：制作一个简单的模态框

目标：学会使用jQuery实现模态框功能。

实现步骤：

HTML部分：

<button id="myModalBtn">打开模态框</button>
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>这是一个模态框！</p>
    </div>
</div>

CSS部分：

.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);
}
.modal-content {
    background-color: #fefefe;
    margin: 15% 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;
}

jQuery部分：

$(document).ready(function() {
    $("#myModalBtn").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");
        }
    });
});

第八个小程序：制作一个简单的下拉菜单

目标：掌握jQuery实现下拉菜单功能。

实现步骤：

HTML部分：

<div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
    </div>
</div>

CSS部分：

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

jQuery部分：

$(document).ready(function() {
    $(".dropbtn").click(function() {
        $(".dropdown-content").toggle();
    });
});

第九个小程序：制作一个简单的表单验证

目标：掌握jQuery实现表单验证功能。

实现步骤：

HTML部分：

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <button type="submit">提交</button>
</form>

CSS部分：

input[type="text"],
input[type="password"] {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
}
button {
    padding: 10px 20px;
    background-color: #f00;
    color: white;
    border: none;
    cursor: pointer;
}

jQuery部分：

$(document).ready(function() {
    $("form").submit(function() {
        var username = $("#username").val();
        var password = $("#password").val();
        if (username == "" || password == "") {
            alert("用户名或密码不能为空！");
            return false;
        }
        // TODO：此处可以添加其他验证逻辑
        return true;
    });
});

第十个小程序：制作一个简单的幻灯片

目标：掌握jQuery实现幻灯片效果。

实现步骤：

HTML部分：

<div class="slideshow-container">
    <div class="mySlides fade">
        <img src="image1.jpg" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="image2.jpg" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="image3.jpg" style="width:100%">
    </div>
</div>

CSS部分：

.slideshow-container {
    position: relative;
    max-width: 1000px;
    margin: auto;
}
.mySlides {
    display: none;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

jQuery部分：

$(document).ready(function() {
    var slideIndex = 1;
    showSlides(slideIndex);


    function plusSlides(n) {
        showSlides(slideIndex += n);
    }


    function currentSlide(n) {
        showSlides(slideIndex = n);
    }


    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex - 1].style.display = "block";
    }
});

总结

本文通过10个小程序实战经验，帮助您从零开始学习jQuery。这些小程序涵盖了jQuery的基本操作、选择器、事件处理、动画、DOM操作等各个方面。希望您在学习和实践过程中不断进步，成为一名优秀的jQuery开发者。

正文

从零开始学jQuery：打造10个小程序实战经验分享