用jQuery写开关灯案例

这次我们学习的是用jQuery方法写快关灯案例，快关灯案例也就是点击按钮后切换页面的背景颜色，当我们去写案例的时候多数会使用到插件，而jQuery就是其中一种要使用插件的方法。

1.首先把快关按钮写上

<body>

</body>

2.把样式类设置好

<style>

.cls {

background-color: black;

}

</style>

3.带入jQuery插件

4.写上页面加载事件后把要变更背景颜色的对象带入点击事件做判断，判断对象是否应用了样式类，若应用了就移除则添加

$(function(){

$("#btn").click(function(){

// 判断body是否应用了cls这个样式类,应用了就移除,没有就添加

if($("body").hasClass("cls")){

$("body").removeClass("cls");

}else{

$("body").addClass("cls");

};

});

})

总结：主要的方法是jQuery在点击事件内加入if…else判断;注意： hasClass() 判断, addClass() 添加,removeClass() 移除,toggleClass() 切换;等方法属于知识点要注意。

这是我所学到的jQuery案例，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

用jQuery写开关灯案例相关推荐

jquery开关灯案例_jquery图文开关灯切换特效
非常实用,从网站扣下来的,第一时间与大家分享,实现了jquery图文开关灯切换特效,使用非常简单,网友们下载下来看一下就明白了... 查看演示下载资源: 14 次下载资源下载积分: 20 积分 ...
jquery开关灯案例_jQuery实现开关灯效果
本文实例为大家分享了jQuery实现开关灯效果的具体代码,供大家参考,具体内容如下效果展示点击界面上的开灯关灯按钮,可以实现背景的调暗.方便晚上阅读. 开灯: 关灯: 分析这个功能很简单,其实就 ...
JavaScript -- jQuery网页开发案例笔记
视频地址:黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili 视频代码地址:JavaScript_jQuery测试案例: 本仓库是学习jQuery相关知识.视频网址: ...
用jQuery写的一个翻页，并封装为插件，
用jQuery写的一个翻页,并封装为插件, 1 *{ 2 margin:0; 3 padding: 0; 4 list-style: none; 5 text-decoration: none; 6 ...
为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过"$( "#slider" ).slider();"的方式 ...
jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
html自动轮播计时器不准,用jQuery写的图片轮播为何停止定时器只能停止一次？...
用jQuery写的图片轮播为何只有初次鼠标进入才能停止定时器?给我的感觉是后面无法停止自动播放,而且播放速度加快,调试很久不知问题出现在哪. 附上demo网址参考:http://huzerui.com ...
用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
jQuery选择器经典案例
jQuery选择器经典案例具体讲解内容参照上一篇: 选择器详细讲解基本选择器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu ...

用jQuery写开关灯案例

用jQuery写开关灯案例相关推荐

最新文章

热门文章