JS/jQuery如何實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果

這篇文章主要介紹JS/jQuery如何實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

本文實(shí)例講述了JS/jQuery實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果。分享給大家供大家參考，具體如下：

實(shí)現(xiàn)效果:

html結(jié)構(gòu)只有兩個(gè)button標(biāo)簽

<button id="left">開(kāi)燈</button>
<button id="right">關(guān)燈</button>

方法一:用原生js來(lái)做

<script>
  //1.獲取頁(yè)面元素
  var left=document.getElementById('left');
  var right=document.getElementById('right');
  //注意獲取body的方式有兩種
  //第一種:直接使用document的點(diǎn)語(yǔ)法
  //var body1=document.body;
  // console.log ( body1 )
  //第二種:通過(guò)標(biāo)簽名來(lái)獲取,但要注意去標(biāo)簽名后要添加下標(biāo),因?yàn)橛脴?biāo)簽名獲取的是數(shù)組
  var body=document.getElementsByTagName('body')[0]//因?yàn)橥ㄟ^(guò)標(biāo)簽名獲取的是數(shù)組,一定要求取下標(biāo)才可以
  console.log ( body )
  //2.注冊(cè)事件
  left.onclick=function ( ) {
    body.style.backgroundColor="white";
  }
  right.onclick=function ( ) {
   body.style.backgroundColor = "black";
  }
</script>

方法二:用JQuery來(lái)做

<script>
$ ( function () {
 //獲取按鈕們
 var buttons=$('button');
 //2.開(kāi)燈
 $ (buttons[ 0 ]).click(function () {
   $('body').css("backgroundColor",'white');
 })
 // $ ( 'body' ).css('backgroundColor','white')
 //3.關(guān)燈
 buttons[ 1 ].onclick=function ( ) {
   $('body').css('backgroundColor','black');
 }
} )
</script>

javascript是一種什么語(yǔ)言

javascript是一種動(dòng)態(tài)類型、弱類型的語(yǔ)言，基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性并廣泛用于客戶端網(wǎng)頁(yè)開(kāi)發(fā)的腳本語(yǔ)言，同時(shí)也是一種廣泛用于客戶端Web開(kāi)發(fā)的腳本語(yǔ)言。它主要用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

以上是“JS/jQuery如何實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！