JS_JQ開始

說明JavaScript(JS)_jQuery(JQ)文件ready

S1:準備工作

工具書:【W3Schools(英)】、【runoob菜鳥教程(中)】、【jQuery官網

<h1>開始JS</h1>
alert('訊息開始');
document.getElementsByTagName('h1').item(0).innerHTML = "開始JavaScript";

參考連結:JS輸出(alert)HTML DOM 元素對象 (  getElementsByTagName)

JavaScript可以做什麼?

S2:利用function 加入載入 onload事件,預寫程式

HTML 中的腳本必須位於 <script> 與 </script> 標籤之間。
腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

//在head之前
<script>
function myload(){
    alert('訊息開始');
    document.getElementsByTagName('h1').item(0).innerHTML = "開始JavaScript";
}
</script>
 
//在body載入
<body onload="myload()">
    <h1>開始JS</h1>
</body>

參考連結:JavaScript 用法(利用FN與事件加入結合)

S3:利用addEventListener監聽事項

//在head之前
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    alert('訊息開始');
    document.getElementsByTagName('h1').item(0).innerHTML = "開始JavaScript";
}
</script>

//在body 無須再載入
<body>
    <h1>開始JS</h1>
</body>

參考連結:HTML DOM addEventListener() 方法【說明1】【說明2

S4:利用jQuery加入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
//方式一
    $(document).ready(function(){
        alert('訊息開始');
        $('h1').html('開始JavaScript');
    });

//方式二
    $(function(){
        alert('訊息開始');
        $('h1').html('開始JavaScript');
    });
</script>

相關連結

(1) google CDN

(2)jQuery官網

參考連結:jQuery的ready事件