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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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
PHP与SQL注入攻击[三]
2007/04/17 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
jQuery中读取json文件示例代码
2013/05/10 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
详解Document.Cookie
2015/12/25 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
总监职责范文
2013/11/09 职场文书
大学活动策划书范文
2014/01/10 职场文书
支部书记四风对照材料
2014/08/28 职场文书
个人自查自纠材料
2014/10/14 职场文书
行为规范主题班会
2015/08/13 职场文书
导游词之包公祠
2019/11/25 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
python装饰器代码解析
2022/03/23 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android