當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

用jQuery写开关灯案例

發布時間：2023/12/29 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了用jQuery写开关灯案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這次我們學習的是用jQuery方法寫快關燈案例，快關燈案例也就是點擊按鈕后切換頁面的背景顏色，當我們去寫案例的時候多數會使用到插件，而jQuery就是其中一種要使用插件的方法。

1.首先把快關按鈕寫上

<body>

????<input?type="button"?value="開/關"?id="btn">

</body>

2.把樣式類設置好

<style>

????????.cls?{

????????????background-color:?black;

????????}

</style>

3.帶入jQuery插件

4.寫上頁面加載事件后把要變更背景顏色的對象帶入點擊事件做判斷，判斷對象是否應用了樣式類，若應用了就移除則添加

?$(function(){

????????????$("#btn").click(function(){

????????????????//?判斷body是否應用了cls這個樣式類,應用了就移除,沒有就添加

????????????????if($("body").hasClass("cls")){

????????????????????$("body").removeClass("cls");

????????????????}else{

????????????????????$("body").addClass("cls");

????????????????};

????????????});

????????})

總結：主要的方法是jQuery在點擊事件內加入if…else判斷;注意：?hasClass()???判斷, addClass()???添加,removeClass()?移除,toggleClass()?切換;等方法屬于知識點要注意。

這是我所學到的jQuery案例，所以我要分享給你們，希望可以幫助到你們。

以上就是我的分享，新手上道，請多多指教。如果有更好的方法或不懂得地方歡迎在評論區教導和提問喔！

以上是生活随笔為你收集整理的用jQuery写开关灯案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。