jquery點(diǎn)擊切換背景色的簡單實(shí)例
更新時(shí)間：2016年08月25日 09:00:24 投稿：jingxian
下面小編就為大家?guī)硪黄猨query點(diǎn)擊切換背景色的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
剛在自己的前端技術(shù)群里有個(gè)小伙伴兒問到這個(gè)問題，點(diǎn)擊的時(shí)候進(jìn)行紅色背景和白色背景的切換，然后我就臨時(shí)想到了一個(gè)解決方法，在這里記錄一下吧，希望還有別的剛學(xué)習(xí)前端的小伙伴兒能用到，大神就請繞道咯！另外提一下，自己這個(gè)前端群都是一群熱愛前端的小伙伴兒，如果你是一個(gè)人在自學(xué)的話，不妨來加入我們，把你遇到的前端問題盡管扔進(jìn)群里哦，小伙伴兒們看到了會(huì)給你耐心解答的哦!
不說了，上代碼：
<!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點(diǎn)擊切換背景色的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)多級(jí)下拉菜單jDropMenu的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級(jí)下拉菜單jDropMenu的方法,涉及jquery鼠標(biāo)事件及頁面元素遍歷的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jquery 表單 多選框的一種巧妙寫法 ,需要的朋友可以參考下2015-09-09
動(dòng)態(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法
下面小編就為大家?guī)硪黄獎(jiǎng)討B(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
jQuery為iframe的body添加click事件的實(shí)現(xiàn)代碼
jQuery為iframe的body添加click事件的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-04-04
JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端示例代碼
這篇文章主要介紹了JQuery如何以JSON方式提交數(shù)據(jù)到服務(wù)端,需要的朋友可以參考下2014-05-05
jquery進(jìn)行數(shù)組遍歷如何跳出當(dāng)前的each循環(huán)
通過 jquery 的循環(huán)方法進(jìn)行數(shù)組遍歷，但是當(dāng)不符合條件時(shí)，怎么跳出當(dāng)前循環(huán)，解決方法如下,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了jquery拖動(dòng)改變div大小的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
寫了一小段代碼讓非HTML5瀏覽器支持placeholder屬性。零配置零css支持IE62011-05-05
使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
用jquery實(shí)現(xiàn)的對checkbox和radio控件的美化，非常不錯(cuò)，大家可以通過修改圖片來實(shí)現(xiàn)更漂亮的效果。2010-11-11
這篇文章主要介紹了jquery ztree異步搜索，即搜葉子實(shí)踐，使用jquery ztree開發(fā)的樹控件經(jīng)常需要進(jìn)行一些異步查找葉子節(jié)點(diǎn)的操作，感興趣的小伙伴們可以參考一下2016-02-02