曾經的前端 library 霸主 : jQuery

官網 : https://jquery.com/

直接去官網看他套件寫說在做什麼，這樣認識套件比較快
官網強調的三件事情

1. Lightweight Footprint

Only 30kB minified(把它變最小化) and gzipped(壓縮). Can also be included as an AMD module

2. CSS3 Compliant

Supports CSS3 selectors to find elements as well as in style property manipulation

3. Cross-Browser

Chrome, Edge, Firefox, IE, Safari, Android, iOS, and more

Huli 講古時間 :
2006 年 IE7 與 Firefox (百家爭鳴的年代)
2007 年 iphone 登場
2008 年 Chrome 推出
因為 IE、Firefox、Chrome、Safari、Opera 都有一定市佔率，再加上早期規範還沒那麼多，所以一種功能有可能 5 種寫法，這時救世主就來了 jQuery ，當時最強大的點就是 Cross-Browser ，只要用同樣的介面，在任何瀏覽器都不會出錯

jQuery 基礎示範

官網下載

• Download the compressed, production jQuery 3.5.1
• Download the uncompressed, development jQuery 3.5.1
  這兩個差別只是在於有沒有 minified，有最小化就會連空格都壓縮
  所以選擇 Download the uncompressed, development jQuery 3.5.1 比較好
  在 HTML 檔案 ，在 head 裡面引入 <script src = "https://code.jquery.com/jquery-3.5.1.js">
  在 body 裡面就可以新增 jQuery 寫法

原本一個 btn 要新增監聽事件

document.querySelector('.btn').addEventListener('click',() => {....});

jQuery 寫法，function 放在 click()裡面

jQuery('.btn').click(() => {....});

console.log( $ === jQuery) 答案是 true
因為 $ 太方便了，所以之後都用 $ 來表示
變成

$('.btn').click(() => {....});

DOMContentLoaded 、click和監聽事件
原生寫法

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

jQuery 寫法

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

不是一定要 jQuery 用到底，所以可以先來這網站查一查，看一下原生的寫法
You-Dont-Need-jQuery
You might not need jQuery

jQuery API