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 克隆数组最简单的方法
Feb 12 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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
PHP4中实现动态代理
2006/10/09 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
js 通用javascript函数库整理
2011/08/14 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
js转换对象为xml
2017/02/17 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python getpass模块用法及实例详解
2019/10/07 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
毕业生写求职信的要点
2014/03/04 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
运动会致辞稿
2015/07/29 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python