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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
下拉框select的绑定示例
Sep 04 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
javascript如何写热点图
Dec 08 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
electron踩坑之remote of undefined的解决
Oct 06 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/30 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python对象转JSON字符串的方法
2016/04/27 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python 将md5转为16字节的方法
2018/05/29 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
授权委托书格式模板
2014/04/03 职场文书
考博导师推荐信范文
2015/03/27 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js