jquery点击切换背景色的简单实例_jquery

刚在自己的前端技术群里有个小伙伴儿问到这个问题,点击的时候进行红色背景和白色背景的切换,然后我就临时想到了一个解决方法,在这里记录一下吧,希望还有别的刚学习前端的小伙伴儿能用到,大神就请绕道咯!另外提一下,自己这个前端群都是一群热爱前端的小伙伴儿,如果你是一个人在自学的话,不妨来加入我们,把你遇到的前端问题尽管扔进群里哦,小伙伴儿们看到了会给你耐心解答的哦!

 不说了,上代码:

<!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点击切换背景色的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
切换背景色
jquery闭包的简单实例、jquery简单实例、jquerymobile简单实例、jquery ajax 简单实例、jquery点击切换图片,以便于您获取更多的相关知识。

时间: 2024-08-02 18:26:30

jquery点击切换背景色的简单实例_jquery的相关文章

jQuery实现图片向左向右切换效果的简单实例_jquery

jQuery实现图片向左向右切换效果的简单实例 <div class="imageRotation container"> <div class="imageBox"> <img src="images/chugui.jpg"> <img src="images/ad_auto.jpg"> <img src="images/ad_home.jpg">

jquery实现无刷新验证码的简单实例_jquery

1. 思路: 页面上的验证码图片是servlet,采用jquery实现异步校验信息 2. 所用到的文件 VerifyCodeServlet.java   --用于生成图片的servlet ResultServlet.java          --用于校验验证码正确性的servlet verifyCode.js                  --校验的js文件 jquery.js                         --jquery包里的源文件 verifyCode.jsp   

JQuery Ajax WebService传递参数的简单实例_jquery

Asp.NET中利用jQuery实现Ajax时,在服务器端可以使用aspx,ashx,以及WebService等方式.最近研究了一下WebService方式,jQuery Ajax 方法调用 jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码这篇帖子给出了很详细的例子,不过没有给出详细解释.其中有几个细节问题开始没注意,费老劲才调通: 1)客户端data数据中的key字段名称必须和服务器端方法参数严格一致. 如客户端: //有参数调用 $(document).r

Jquery跨域获得Json的简单实例_jquery

这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值, 一般跨域用到的两个方法为:$.ajax 和$.getJSON 最后,仔细安静下来,细读 json 官方文档后发现这么一段: JSON数据是一种能很方便通过JavaScript解析的结构化数据.如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=?

jQuery焦点图切换特效插件封装实例_jquery

网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频道首页版面,因为是通过图片的形式,所以有一定的吸引性.视觉吸引性.容易引起访问者的点击,据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字,转化率高于文字标题5倍.由此看来焦点图的能让游客对企业的第一印象大大提升,下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图.如下图所示: 可

jquery中get和post的简单实例_jquery

例子: test.html页面引用<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 内容有:<div id="divMsg">Hello World!</div> 用法1:(页面载入时读取远程页面内容到divMsg) $("#divMsg").load(http://localhost:8012/

jquery实现图片滚动效果的简单实例_jquery

复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <title>jquery 图片自动无缝滚动</title>      

JS实现点击事件统计的简单实例_javascript技巧

JS实现网站点击事件的统计功能. 点击事件上报,分为立即上报和延时上报,延时上报通过cookie存储. 一.配置参数,主要用于定义上报的一些配置信息.通过在外部定义_clickc对象重置参数. 参数名称       类型          默认值             说明     selector:      string        '_click_rp'        点击触发的选择器,支持ID.class     prefix:        string        '_rp_'

原生js实现jquery函数animate()动画效果的简单实例_javascript技巧

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参