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传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
JavaScript数组复制详解
Feb 02 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Angular2数据绑定详解
Apr 18 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
浅析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
基于mysql的论坛(7)
2006/10/09 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python:print格式化输出到文件的实例
2018/05/14 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
化工专业个人的求职信范文
2013/11/28 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2016中秋节问候语
2015/11/11 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
python Polars库的使用简介
2021/04/21 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
python manim实现排序算法动画示例
2022/08/14 Python