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初学困境—js初学
Dec 29 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
浅析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与javascript对多项选择的处理
2006/10/09 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
yii2安装详细流程
2018/05/23 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
详解JS模块导入导出
2017/12/20 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
怎么使用pipenv管理你的python项目
2018/03/12 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python判断设备是否联网的方法
2018/06/29 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
项目经理岗位职责
2013/11/11 职场文书
高中生自我评语大全
2014/01/19 职场文书
超市端午节活动方案
2014/01/23 职场文书
师范生自荐信模板
2014/05/28 职场文书
《所见》教学反思
2016/02/23 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python