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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
Vue项目打包编译优化方案
Sep 16 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 应用程序安全防范技术研究
2009/09/25 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
给同事的道歉信
2014/01/11 职场文书
餐厅筹备计划书
2014/04/25 职场文书
团日活动总结书
2014/05/08 职场文书
奠基仪式策划方案
2014/05/15 职场文书
法律系毕业生求职信
2014/05/28 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
建议书的格式及范文
2015/09/14 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Python基础详解之邮件处理
2021/04/28 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android