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实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
中止javascript执行的方法
2014/02/14 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python发展史及网络爬虫
2019/06/19 Python
Django视图类型总结
2021/02/17 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
工作自荐信
2013/12/11 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
2016年十一促销广告语
2016/01/28 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
我的收音机情缘
2022/04/05 无线电