jquery点击切换背景色的简单实例


Posted in Javascript onAugust 25, 2016

刚在自己的前端技术群里有个小伙伴儿问到这个问题,点击的时候进行红色背景和白色背景的切换,然后我就临时想到了一个解决方法,在这里记录一下吧,希望还有别的刚学习前端的小伙伴儿能用到,大神就请绕道咯!另外提一下,自己这个前端群都是一群热爱前端的小伙伴儿,如果你是一个人在自学的话,不妨来加入我们,把你遇到的前端问题尽管扔进群里哦,小伙伴儿们看到了会给你耐心解答的哦!

 不说了,上代码:

<!DOCTYPE html>
<html>
<head>
<style>
 .box {
  width: 100px;
  height: 100px;
  margin: 0;
  background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 var colorArr = ['white','red'];
 var count = 0;
 $('.box').click(function() {
  var $this = $(this);
   $this.css('backgroundColor', colorArr[count%2]);
   count++;
 });
});
</script>
</body>
</html>

以上这篇jquery点击切换背景色的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
浅析Javascript ES6中的原生Promise
Aug 25 #Javascript
微信JS接口大全
Aug 25 #Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 #Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 #Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 #Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 #Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 #Javascript
You might like
PHP函数getenv简介和使用实例
2014/05/12 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
分页栏的web标准实现
2011/11/01 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python抽象基类用法实例分析
2015/06/04 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python中一些深不见底的“坑”
2019/06/12 Python
pycharm的python_stubs问题
2020/04/08 Python
Python如何生成xml文件
2020/06/04 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
工程项目经理任命书
2014/06/05 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
《正比例》教学反思
2016/02/23 职场文书
创业计划书之校园超市
2019/09/12 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
Django drf请求模块源码解析
2021/06/08 Python
JavaScript文档对象模型DOM
2021/11/20 Javascript