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 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
vue实现todolist单页面应用
Apr 11 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
详解Python字符串切片
2019/05/20 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
numpy.array 操作使用简单总结
2019/11/08 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
给同学的道歉信
2014/01/16 职场文书
中学自我评价
2014/01/31 职场文书
社区春季防火方案
2014/06/02 职场文书
电影雷锋观后感
2015/06/10 职场文书
创业计划书之个人工作室
2019/08/22 职场文书