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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JS搜狐面试题分析
Dec 16 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 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在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
获取body标签的两种方法
2011/10/13 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python http基本验证方法
2018/12/26 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
pytorch实现线性拟合方式
2020/01/15 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
护理工作感言
2014/01/16 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
班级学习计划书
2014/04/27 职场文书
保护水资源的标语
2014/06/17 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android