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 相关文章推荐
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
微信小程序实现分页加载效果
Nov 19 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
新闻分类录入、显示系统
2006/10/09 PHP
php printf输出格式使用说明
2010/12/05 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
详解jquery和vue对比
2019/04/16 jQuery
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Pandas分组与排序的实现
2019/07/23 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
市场营销专业求职信
2014/06/17 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
护理医院见习报告
2014/11/03 职场文书
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL