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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
javascript void(0)的妙用
Oct 21 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
js跑步算法的实现代码
Dec 04 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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文件下载类
2006/12/06 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
详解vue v-model
2020/08/31 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python变量访问权限控制详解
2019/06/29 Python
Python图片的横坐标汉字实例
2019/12/04 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
2014年乡镇妇联工作总结
2014/12/02 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
早会开场白台词大全
2015/06/01 职场文书
校运会广播稿
2015/08/19 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript