jQuery 基本使用與語法

官網

jQuery https://jquery.com/

安裝

下載 -> 找 Google CDN -> 將下面的連接貼到靠近 </body>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

基本語法

$('CSS selector').action()

• $() 是 jQuery() 的縮寫，讓程式更簡化
• 函式內的字串為 CSS selector，用來找網頁中的 HTML element
• action() 是找到 HTML element 要執行的動作

開始執行

在執行 Javascript 時，最怕網頁還沒下載完成，就直接執行。jQuery有提供等待網頁全載入至記憶體後才開始執行方法

假設當網頁載入完成後，要執行的程式碼如下：

// 這是網頁載入完成後要執行的程式碼
var run = function(){
    // 程式碼
}

所以jQuery可以寫成如下：

$(document).ready(run)

由於 run 是變數，在記憶體內存放的是程式碼，所以也可以直接將 run 改成程式碼，自然就有下面的寫法

$(document).ready(function(){
    // 程式碼
})

function 又可簡化成 () => {} 的寫法，所以會改成如下

$(document).ready(()=>{
    // 程式碼
})

又因為這樣的寫法常常使用 document 和 ready 又是固定的要打的語法，所以又可簡化成

$(()=>{
    // 程式碼
})

tags: JavaScript