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 撑出页面文字换行
Jun 15 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
学习Vue组件实例
Apr 28 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
详解Vue的列表渲染
Nov 20 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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
php实现算术验证码功能
2018/12/05 PHP
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python3基础之基本运算符概述
2014/08/13 Python
Python显示进度条的方法
2014/09/20 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
大学生自我鉴定范文
2013/12/28 职场文书
运动会入场词50字
2014/02/20 职场文书
开学典礼演讲稿
2014/05/23 职场文书
幼师求职信
2014/06/23 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库