jquery點擊切換背景色的簡單實例
剛在自己的前端技術(shù)群里有個小伙伴兒問到這個問題,點擊的時候進(jìn)行紅色背景和白色背景的切換,然后我就臨時想到了一個解決方法,在這里記錄一下吧,希望還有別的剛學(xué)習(xí)前端的小伙伴兒能用到,大神就請繞道咯!另外提一下,自己這個前端群都是一群熱愛前端的小伙伴兒,如果你是一個人在自學(xué)的話,不妨來加入我們,把你遇到的前端問題盡管扔進(jìn)群里哦,小伙伴兒們看到了會給你耐心解答的哦!
不說了,上代碼:
<!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點擊切換背景色的簡單實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jquery數(shù)組封裝使用方法分享(jquery數(shù)組遍歷)
JQuery對數(shù)組的處理非常便捷并且功能強(qiáng)大齊全,一步到位的封裝了很多原生js數(shù)組不能企及的功能。下面來看看JQuery數(shù)組的強(qiáng)大之處在哪。2014-03-03jQuery實現(xiàn)表格奇偶行顯示不同背景色 就這么簡單
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)表格奇偶行顯示不同背景色的方法,使表格更加美觀,便捷的查找同行數(shù)據(jù)更,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03非常實用的jQuery代碼段集錦【檢測瀏覽器、滾動、復(fù)制、淡入淡出等】
這篇文章主要介紹了非常實用的jQuery代碼段集錦,總結(jié)分析了包括jQuery檢測瀏覽器、滾動、復(fù)制、粘貼、淡入淡出等操作實現(xiàn)技巧,需要的朋友可以參考下2019-08-08jQuery模擬完美實現(xiàn)經(jīng)典FLASH導(dǎo)航動畫效果【附demo源碼下載】
這篇文章主要介紹了jQuery模擬完美實現(xiàn)經(jīng)典FLASH導(dǎo)航動畫效果,通過jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式實現(xiàn)flash切換的效果,非常經(jīng)典實用,文末還提供了demo源碼供讀者下載學(xué)習(xí)或使用,需要的朋友可以參考下2016-11-11jQuery實現(xiàn)div隨意拖動的實例代碼(通用代碼)
這篇文章主要介紹了jQuery實現(xiàn)div隨意拖動的實例代碼,涉及到j(luò)query div隨意拖動相關(guān)知識,感興趣的朋友一起學(xué)習(xí)吧2016-01-01