[ 第 12 週] 認識 JQuery

JQuery 是一個 JavaScript 的 library。
把很多東西都用 function 包好，可以更方便使用，避免掉寫一大串程式碼佔記憶體的問題。
早期會那麼夯的點是可以跨瀏覽器的支援，只要用一個寫法，就可以在不同的瀏覽器上跑。

使用示範

點擊一個按鈕後，會跳出警告視窗。
原本寫法：

document.addEventListener('DOMContentLoaded', function() {  
     document.querySelector('.btn').addEventListener('click', function() {
    alert('click!') 
     })
})

JQuery 寫法

jQuery(document).ready(function() {
  jQuery('.btn').click(function(e) {
    alert('click JQ!')
  })
})

因為在 JQuery 裡定義了 var $ =jQuery
所以上面的寫法可以改成：

$(document).ready(function() {
      $('.btn').click(function(e) {
        alert('click JQ!')
        })
    })

常用語法

可以直接改變 css
.hide() 隱藏
.show() 顯示
.fadeIn(秒數) 淡入
.fadeOut(秒數) 淡出

.val() 取出該值，get 的概念
.val(abc) 給一個 abc 的值， set 的概念

其他可以參考：
You might not need jQuery
jQuery
You-Dont-Need-jQuery