JQuery实现灯泡开关【文末附源码】
一、实现灯泡开关操作对象的知识点：
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
