JQuery实现灯泡开关【文末附源码】-阿里云开发者社区

JQuery实现灯泡开关【文末附源码】

2023-02-09 164

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JQuery实现灯泡开关【文末附源码】🍅 Java学习路线：搬砖工的Java学习路线🍅 作者：程序员小王🍅 程序员小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF🍅 扫描主页左侧二维码，加我微信

一、实现灯泡开关操作对象的知识点：

1、jquery修改class属性值的方法

1. 添加class属性值 addClass("class属性值")
2. 删除class属性值 
    removeClass(); 没有参数，删除所有class
    removeClass(""); 删除其中一个class

2、修改标签的属性（attribute）

1、获取标签的属性：attr("");
2、修改标签的属性:attr("","");
类似于Tomcat服务器Servlet中的获取作用域，创建作用域的方法
  request.setAttribute("","");
  request.getAttribute("");

二、实现灯泡开关

效果图：

注：由于制作gif时，没买会员，导致有水印

实现原理，操作img的src改变灯泡。css样式主要控制原来图片的大小（attr获取路径是相对路径）

<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>灯泡开关</title>
    <style>
        .c1 {
            height: 250px;
            width: 150px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        function test() {
            var src = $("#img").attr("src");
            if (src == "img/close.png") {
                $("#img").attr("src", "img/open.png").addClass("c1")
            } else {
                $("#img").attr("src", "img/close.png").addClass("C1");
            }
        }
    </script>
</head>
<body>
<center>
    <h3><font color="red">jQuery实现灯泡开关展示</font></h3>
    <img src="img/close.png" id="img" class="c1"></br>
    <input type="button" value="开/关" onclick="test()">
</center>
</body>
</html>

prop相对于attr相对严谨获取的路径是绝对路径（1.6之后），用于实战开发

获取当前图片的绝对路径：

绝对路径地址：

源码

<head>
    <meta charset="UTF-8">
    <title>灯泡开关</title>
    <style>
        .c1 {
            height: 250px;
            width: 150px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        function test() {
            var src = $("#img").prop("src");
            //alert(src);获取图片的绝对路径
            if (src == "http://localhost:63342/JQery/Jqery_day1/web/img/close.png") {
                $("#img").prop("src", "img/open.png").addClass("c1")
            } else {
                $("#img").prop("src", "img/close.png").addClass("C1");
            }
        }
    </script>
</head>
<body>
<center>
    <h3><font color="red">jQuery实现灯泡开关展示</font></h3>
    <img src="img/close.png" id="img" class="c1"></br>
    <input type="button" value="开/关" onclick="test()">
</center>
</body>
</html>