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

简介: 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("");


二、实现灯泡开关

2.png


效果图:

3.gif

注:由于制作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之后),用于实战开发

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

4.png


绝对路径地址:

5.png


源码

 

 

<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


相关文章
|
6月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
60 1
jQuery+CSS3自动轮播焦点图特效源码
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
133 0
|
4天前
|
JavaScript
jQuery制作的3D冰块立方时钟动态特效源码
jQuery制作的3D冰块立方时钟动态特效源码是一段基于jQuery实现的3D魔方立方时钟效果代码,该设计非常特别,且支持数字颜色的变化,提供8款颜色选择,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
19 8
|
4天前
|
JavaScript
jQuery制作的网站首页宽屏导航轮播图特效源码
jQuery制作的网站首页宽屏导航轮播图特效源码是一段基于jQuery制作的可用于商城首页 微商城 互联网公司或某些电子商城的首页特效,自带有二级菜单栏、轮播图滚动、登录注册按钮等等,非常全面,欢迎对此段代码感兴趣的朋友前来下载使用。
11 4
|
4天前
|
JavaScript
jQuery实现的手风琴四季场景变换特效源码
jQuery实现的手风琴四季场景变换特效源码是一段基于jQuery实现的手风琴四季场景变换效果代码,拥有春夏秋冬四季转场特效,鼠标可放大每个季节的图像,欢迎对此段代码感兴趣的朋友前来下载使用。
10 1
|
26天前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
43 0
|
5月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
38 0
|
5月前
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
114 0
|
6月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
88 0
|
12月前
|
JavaScript
jQuery实现点击开关图片切换
jQuery实现点击开关图片切换
63 0