jQuery简单小案例，自学必看，前端app开发

作者：System 时间：2024年08月17日分类：所有,jquery 字数：1206

以下是一个使用jQuery实现的简单小案例，展示了如何点亮一个LED灯。

HTML部分:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LED灯控制</title>
    <style>
        #led {
            width: 100px;
            height: 100px;
            background-color: #000;
            border-radius: 50%;
            position: relative;
            top: 20px;
            left: 20px;
        }
        .on {
            background-color: #ff0;
        }
        .off {
            background-color: #000;
        }
    </style>
</head>
<body>
    <div id="led"></div>
    <button id="btn-on">开启</button>
    <button id="btn-off">关闭</button>
 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分 (jQuery):




$(document).ready(function() {
    var $led = $('#led');
 
    $('#btn-on').click(function() {
        $led.addClass('on').removeClass('off');
    });
 
    $('#btn-off').click(function() {
        $led.addClass('off').removeClass('on');
    });
});

这个例子中，我们有一个LED灯的HTML元素和两个按钮，一个用于打开LED灯，另一个用于关闭。我们使用jQuery的click事件处理器来处理按钮点击事件，并使用addClass和removeClass方法来切换LED灯的状态（亮或灭）。

jQuery简单小案例，自学必看，前端app开发

评论已关闭

推荐阅读