快捷導(dǎo)航

js在HTML的三種引用方式詳解

更新時(shí)間：2020年08月29日 10:27:02 作者：NotFoundObject

這篇文章主要介紹了js在HTML的三種引用方式詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1.內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式分為兩種，一是直接寫入元素的標(biāo)簽內(nèi)部

<html>
  <title>js樣式內(nèi)聯(lián)寫法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js內(nèi)聯(lián)寫法01開始-->
    <!--當(dāng)鼠標(biāo)點(diǎn)擊圖片時(shí)跳出彈窗顯示1223-->
    <div class="img">
    單擊事件：
      <img src="images/001.jpg" onclick="alert(1223)"></img>
    </div>
  <!--js內(nèi)聯(lián)寫法01結(jié)束-->
  </body>
</html>

二是寫入到<script></script>標(biāo)簽中

給元素添加id

通過getElementById('XX');方法定位到該元素，給該元素添加觸發(fā)事件

注意：<script></script>標(biāo)簽應(yīng)該放在</body>之后

<html>
  <title>js樣式內(nèi)聯(lián)寫法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js內(nèi)聯(lián)寫法02開始-->
  <div class="img">
    單擊事件：
      <img src="images/002.jpg" id='yuansu'></img>
  </div>
  <!--js內(nèi)聯(lián)寫法02結(jié)束-->
  </body>
  <script>
    //js代碼
    //找到XX元素，一般給元素加id 
    yuansuojb=document.getElementById('yuansu');    
    //給xx元素加事件
    yuansuojb.onclick=function(){
      //代碼段
      alert(1);
    }
    //觸發(fā)事件
  </script>
</html>

2.外聯(lián)樣式

將js的代碼寫到.js的文件中，并在HTML中引用

.html文件內(nèi)容如下：

<html>
  <title>js樣式外聯(lián)寫法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <div class="img">
    外聯(lián)寫法--單擊事件：
      <img src="images/003.jpg" id='yuansu'></img>
  </div>
  </body>
  <script src='js/index.js'></script>
</html>

.js文件內(nèi)容如下：

//js代碼
//找到XX元素，一般給元素加id 
yuansuojb=document.getElementById('yuansu');    
//給xx元素加事件
yuansuojb.onclick=function(){
  //代碼段
  var str="hello world !!!";
  alert(str);
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)獲取準(zhǔn)確的騰訊定位地址功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)獲取準(zhǔn)確的騰訊定位地址功能,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序使用騰訊地理位置接口的相關(guān)注冊(cè)、操作步驟及接口使用技巧,需要的朋友可以參考下
2019-03-03
小程序視頻列表中視頻的播放與停止的示例代碼
本篇文章主要介紹了小程序視頻列表中視頻的播放與停止的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
javascript之函數(shù)進(jìn)階詳解
這篇文章主要為大家介紹了javascript函數(shù)進(jìn)階，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
2021-12-12
通過網(wǎng)頁查看JS源碼中漢字顯示亂碼的解決方法
這篇文章給大家主要介紹了通過網(wǎng)頁查看JS源碼的時(shí)候，發(fā)現(xiàn)漢字顯示是亂碼的解決方法，文中通過圖文詳解的介紹了解決的步驟，詳細(xì)會(huì)對(duì)大家很有幫助，有需要的朋友們下面來一起看看吧。
2016-10-10
js實(shí)現(xiàn)上傳圖片預(yù)覽方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳照片預(yù)覽的方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
如何用js獲取當(dāng)前域名、Url、相對(duì)路徑和參數(shù)
這篇文章主要給大家介紹了關(guān)于如何用js獲取當(dāng)前域名、Url、相對(duì)路徑和參數(shù)的相關(guān)資料,用Javascript可以單獨(dú)獲取當(dāng)前域名、Url相對(duì)路徑和參數(shù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
在微信小程序中使用mqtt服務(wù)的方法
這篇文章主要介紹了在微信小程序中使用mqtt服務(wù)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
ES6?關(guān)鍵字?let?和?ES5?及關(guān)鍵字?var?的區(qū)別解析
var可以穿透控制語句、條件語句這樣的作用域，導(dǎo)致變量沖突經(jīng)常發(fā)生，這篇文章主要介紹了ES6?關(guān)鍵字?let?和?ES5?及關(guān)鍵字?var?的區(qū)別,需要的朋友可以參考下
2022-09-09
詳解Nuxt.js 實(shí)戰(zhàn)集錦
這篇文章主要介紹了Nuxt.js 實(shí)戰(zhàn)集錦,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
詳解在IDEA中將Echarts引入web兩種方式(使用js文件和maven的依賴導(dǎo)入)
這篇文章主要介紹了在IDEA中將Echarts引入web兩種方式(使用js文件和maven的依賴導(dǎo)入),本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07