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

最新推荐文章于 2024-05-06 21:13:22 发布

程序员小王java

最新推荐文章于 2024-05-06 21:13:22 发布

阅读量912

点赞数 7

分类专栏： javaWeb java笔试 mybatis 文章标签： jquery java 前端

程序员小王

本文链接：https://blog.csdn.net/weixin_44385486/article/details/120890607

版权

javaWeb 同时被 3 个专栏收录

25 篇文章 3 订阅

订阅专栏

java笔试

18 篇文章 0 订阅

订阅专栏

mybatis

11 篇文章 0 订阅

订阅专栏

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>

gittee灯泡开关源码：（包含灯泡图片，js文件，源码）：

https://gitee.com/wanghengjie563135/java-web-notes.git

程序员小王java

关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
JQuery实现灯泡开关【文末附源码】

JQuery实现灯泡开关【文末附源码】???? Java学习路线：搬砖工的Java学习路线???? 作者：程序员小王???? 程序员小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF???? 扫描主页左侧二维码，加我微信一、实现灯泡开关操作对象的知识点：1、jquery修改class属性值的方法1. 添加class属性值 addClass("class属性值")2. 删除class属性值 removeClas
复制链接

扫一扫