jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法
生活随笔
收集整理的這篇文章主要介紹了
jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
jQuery版本的網(wǎng)頁開關燈
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.cls{background-color: black;}</style> </head> <body> <input type="button" value="開關" id="btn"> <script src="jquery-1.12.1.js"></script> <script>// $("#btn").click(function(){// if($("body")[0].className=="cls"){// $("body")[0].className = "";// }else{// $("body")[0].className = "cls";// }// });$("#btn").click(function(){// 判斷body標簽是否應用了cls的樣式if($("body").hasClass("cls")){// 此處應用了cls類樣式,那么就移除這個類樣式$("body").removeClass('cls');$("#btn").val('關燈');}else{// 此處沒有應用類樣式,那么就應用類樣式$("body").addClass('cls');$('#btn').val('開燈');}});</script></body> </html>jQuery版本網(wǎng)頁開關燈的另一種寫法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.cls{background-color: black;}</style> </head> <body> <input type="button" value="關燈" id="btn"> <script src="jquery-1.12.1.js"></script> <script>// 表單標簽DOM操作中設置和獲取value屬性的值---->對象.value// jQuery中:/*** jQuery對象.val();---->表示的是獲取該元素的value的值* jQuery對象.val('值');---->表示的是設置該元素value的值* jQuery對象.css("css的屬性名字","屬性的值");---->設置元素的樣式屬性值* 注意:* .css('屬性','值');屬性的寫法可以是DOM操作的js寫法,也可以是css中的寫法*/// 根據(jù)id屬性值獲取按鈕,注冊點擊事件(添加點擊事件,調用點擊事件的方法)$("#btn").click(function(){// 判斷這個按鈕的值來修改body的樣式// 此處的this是當前的按鈕DOM對象// 判斷按鈕的value值是不是關燈if($(this).val()=='關燈'){// 修改body的背景顏色$('body').css('backgroundColor','black');$(this).val('開燈');}else{$('body').css('backgroundColor','');$(this).val('關燈');}});// $('#btn').click(function(){// // 獲取按鈕的value屬性的值// console.log($(this).val());// $(this).val('哈哈,我又變帥了');// });</script></body> </html>?
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的jQuery版本的网页开关灯、jQuery版本网页开关灯的另一种写法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery对象和DOM对象互转的问题、
- 下一篇： 网页加载的不同的方式、点击按钮显示一句话