寫在行內,每個標籤裡面單獨設定
透過在開標籤中的事件屬性引用js的函數
(1)寫在標籤的事件屬性當中(以on開頭的屬性),如onclick【on+事件類型】
推薦:html使用雙引號,js使用單引號
例:
<input type="button" value="點我打開世界" onclick="alert('Hello World')" />
註:行內引入,在JS中沒用提升權重的概念,所以其不常用[基本不用]
示例如下:<html> <title>js樣式內嵌寫法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <!--js內嵌寫法01開始--> <!--滑鼠點擊圖片時跳出彈窗顯示1223--> <div class="img"> 單擊事件: <img src="images/001.jpg" onclick="alert(1223)"></img> </div> <!--js內聯寫法01結束--> </body> </html>
輸出結果:
寫在script標籤中
內部引用: 透過在script標籤中編寫js程式碼使用
script標籤可以寫在頁面任何位置
script標籤通常使用在body中的最後, 或body的後面
(1)可以寫在任意地方;
當需要我們在頭部引用腳本就放在頭部,否則則放在底部,因為放在頭部可能會影響瀏覽器渲染。
<script> alert('Hello World!'); </script>
註:一般在自己寫練習的時候,想偷懶不想設定js檔時使用[練習使用]
通常自己做專案的時候放在底部,不影響載入順序又可以和CSS檔案區分,不會影響瀏覽器渲染;若放在其他處最好用onload套起來用
範例如下:<html> <title>js樣式內嵌寫法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <!--js內嵌寫法02開始--> <div class="img"> 單擊事件: <img src="images/002.jpg" id='yuansu'></img> </div> <!--js內嵌寫法02結束--> </body> <script> //js程式碼//找到XX元素,一般都會給元素加id yuansuojb=document.getElementById('yuansu'); //給xx元素加事件yuansuojb.onclick=function(){ //程式碼段alert(1); } //觸發事件</script> </html>
輸出結果:
在script標籤中使用src引入外部文件
步驟:
編寫獨立的js文件
在頁面中透過script標籤引用
(1)引入外部JS檔案的script中不可以寫程式碼
(2)利用HTML頁面程式碼結構化,把多段JS程式碼獨立至HTML頁面外面,美觀,方便文件重複使用
<script src="main.js"></script>
注意:和行內樣式一樣放在底部和頭部需要分情況考慮[經常使用]
使用的是src不是href
範例如下:將js的程式碼寫到.js的檔案中,並在HTML中引用
.html文件內容如下:
<html> <title>js樣式外接寫法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <div class="img"> 外聯寫法--點選事件: <img src="images/003.jpg" id='yuansu'></img> </div> </body> <script src='js/index.js'></script> </html>
.js檔案內容如下:
//js程式碼//找到XX元素,一般都會給元素加id yuansuojb=document.getElementById('yuansu'); //給xx元素加事件yuansuojb.onclick=function(){ //程式碼片段var str="hello world !!!"; alert(str); }
輸出結果: