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 网页水印(非图片水印)实现代码
Mar 01 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
js实现移动端吸顶效果
Jan 08 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学习之PHP变量
2006/10/09 PHP
PHP与javascript的两种交互方式
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python解析xml模块封装代码
2014/02/07 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
道德大讲堂实施方案
2014/05/14 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js