jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法

jQuery版本的网页开关灯

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.cls{background-color: black;}</style>
</head>
<body>
<input type="button" value="开关" id="btn">
<script src="jquery-1.12.1.js"></script>
<script>// $("#btn").click(function(){//     if($("body")[0].className=="cls"){//        $("body")[0].className = "";//     }else{//        $("body")[0].className = "cls";//     }// });$("#btn").click(function(){// 判断body标签是否应用了cls的样式if($("body").hasClass("cls")){// 此处应用了cls类样式,那么就移除这个类样式$("body").removeClass('cls');$("#btn").val('关灯');}else{// 此处没有应用类样式,那么就应用类样式$("body").addClass('cls');$('#btn').val('开灯');}});</script></body>
</html>

jQuery版本网页开关灯的另一种写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.cls{background-color: black;}</style>
</head>
<body>
<input type="button" value="关灯" id="btn">
<script src="jquery-1.12.1.js"></script>
<script>// 表单标签DOM操作中设置和获取value属性的值---->对象.value// jQuery中:/*** jQuery对象.val();---->表示的是获取该元素的value的值* jQuery对象.val('值');---->表示的是设置该元素value的值* jQuery对象.css("css的属性名字","属性的值");---->设置元素的样式属性值* 注意:* .css('属性','值');属性的写法可以是DOM操作的js写法,也可以是css中的写法*/// 根据id属性值获取按钮,注册点击事件(添加点击事件,调用点击事件的方法)$("#btn").click(function(){// 判断这个按钮的值来修改body的样式// 此处的this是当前的按钮DOM对象// 判断按钮的value值是不是关灯if($(this).val()=='关灯'){// 修改body的背景颜色$('body').css('backgroundColor','black');$(this).val('开灯');}else{$('body').css('backgroundColor','');$(this).val('关灯');}});// $('#btn').click(function(){//   // 获取按钮的value属性的值//   console.log($(this).val());//   $(this).val('哈哈,我又变帅了');// });</script></body>
</html>

jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法相关推荐

jQuery对象和DOM对象互转的问题、jQuery文件引入问题、DOM版本的网页开关灯
jQuery对象和DOM对象互转的问题 <!DOCTYPE html> <html lang="en"> <head><meta char ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
Jquery Uploadify3.21.与2.1版本使用中存在的问题--记录三
Jquery Uploadify是个上传插件. 2.1版本与3.2.1版本有很大区别,方法名跟参数变动较大 1.uploader:该属性是用来存放swf的路径,这个swf就是一个Flash的一个图标, ...
r语言从网页下载东西内容 r安装特定版本的r包 r从网页下载安装包
加载 library(RCurl) getBinaryURL(url, -, .opts = list(), curl = getCurlHandle(), .buf = binaryBuffer(. ...
html文本通常由版本信息组成,第 2 章网页版面设计.ppt
3. 插入水平线 4. 插入特殊字符 (1)通过菜单插入.先将光标放置到需要插入特殊字符的位置,在"HTML"/"特殊字符"的级联菜单中选择需要插入的特殊字符. ...
jQuery.NiceScroll - 有史以来最好的 nicescroll 版本——在现代浏览器和移动设备上极其流畅和一致，资源使用率低(中文文档)
jQuery.NiceScroll 特征依赖关系使用配置参数有史以来最好的 nicescroll 版本--在现代浏览器和移动设备上极其流畅和一致,资源使用率低官网:nicescroll.ar ...
多功能网页幻灯片jQuery Cycle
多功能网页幻灯片jQuery Cycle demo演示下载
JavaScript交互式网页设计——jQuery
<一>.jQuery概述 <1>.概述:由于不同浏览器对JavaScript解析方式有所区别,随着浏览器的不断更新,JavaScript出现了兼容性问题.为解决此问题,出现了许 ...
动态瀑布流网页布局 Jquery 源码
动态瀑布流网页布局jQuery代码,效果超酷,自适应网页宽度,动态缩略图排列效果, 本代码包含两种演示效果, 一种是缩略图布局效果一种是文字布局效果下载地址: http://download.cs ...

jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法

jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法相关推荐

最新文章

热门文章