[ 前端工具 ]

簡介

jQuery 是曾經的 library 屆前端霸主，原因是在 2006 年左右，Chrome 才剛誕生的時代，各家瀏覽器百家爭鳴 (IE, Firefox, Chrome, Safari, Opera)，各瀏覽器都有愛用的使用者，一但你的網站在某個瀏覽器不支援，就會導致使用該瀏覽器的用戶沒辦法看到你的網站，所以為了要使你的網站能跑在不同瀏覽器上，可能相同的功能在 5 種瀏覽器就要寫出 5 種版本的程式碼，非常的麻煩！jQuery 的誕生解決了這個「跨瀏覽器」的問題，讓你可以用相同的語法來支援不同的瀏覽器。

到了現今這個時代，瀏覽器的更新速度越來越快，功能也越來越完整，jQuery 的優勢不再這麼明顯，但是由於 jQuery 的語法相較原生的寫法還是比較精簡，所以小型專案的開發上，使用 jQuery 還是相當方便的。

引入方式

引用 jQuery 的方式很容易，先到官網上面看到 Download 的頁面，裡面會提供不同的版本給你選用（壓縮過 or 未壓縮過）

我們可以選擇 Download the uncompressed, development jQuery 3.5.1 這個開發用的版本，然後右鍵「複製連結位置」
再回到我們的 HTML 檔案中，在 head 的部分加入 script 標籤，把剛剛複製的連結貼上 <script>https://code.jquery.com/jquery-3.5.1.js</script>
引入成功後，會多出一個變數叫做 jQuery，所以可以利用指令 console.log(jQuery) 來確認是否有引入成功

想使用任何 jQuery 語法，都可以在 API Documentation 裡面做搜尋

簡單示範

document.querySelector('.btn').addEventListener('click', function(){ //... }) 使用 jQeury 寫法
- jQuery('.btn').click( (e) => { //... } )
因為它為了讓語法更簡化，所以設定了一個變數 var $ = jQuery，所以寫法可以改成這樣
- $('.btn').click( (e) => { //... } )

原生程式碼 vs JQuery 程式碼

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

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

各式方便語法

$('.btn').text('I am a btn');：改變 innerText
$('.btn').hide();：把按鈕隱藏 (幫你把元素加上 display: none;)
$('.btn').show();：把按鈕顯示出來 (幫你拿掉 display: none;)
$('.btn').fadeIn();：把按鈕漸層顯示出來 (括號裡可以傳入秒數，單位毫秒)
$('.btn').fadeOut();：把按鈕漸層隱藏起來
$('.input').val();：取得 input 的 value (沒傳參數代表 GET)
$('.input').val('str');：設定 input 的 value 為 'str' (傳參數代表 SET)
$('.todo').append("<div>test</div>")：新增 div 元素在最下方
$('.todo').prepend("<div>test</div>")：新增 div 元素在最上方
$('.todo').remove("<div>test</div>")：拿掉 div 元素
$('.todo').addClass(".btn")：加上 class
$('.todo').removeClass(".btn")：拿掉 class
事件代理

<div class="todos">
    <div class="todo">
       <button class="btn-mark">標記完成</button>
       <button class="btn-delete">刪除</button>
     </div>
</div>  

$('.todos').on('click', '.btn-delete', function(e) {
    $(e.target).parent().fadeOut()
})

// 在外層的 todos 加上監聽器做事件代理，監聽 click 事件發生在 btn-delete 時要把 e.target 的父層元素拿掉

以 Todo List 示範

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">

  <title>FE201</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script>
    $(document).ready(function() {
      $('.btn').click(function(e) {
        const value = $('.todo-input').val()
        $('.todo-input')
        $('.todo-input').val('')
        $('.todos').append(`
          <div class="todo">
            ${value}
            <button class="btn-mark">標記完成</button>
            <button class="btn-delete">刪除</button>
          </div>`
        )
      })

      $('.btn-remove-all').click(() => {
        $('.todos').empty();
      })

      $('.todos').on('click', '.btn-delete', function(e) {
        $(e.target).parent().fadeOut()
      })

      $('.todos').on('click', '.btn-mark', function(e) {
        const todo = $(e.target).parent();
        // 變成未完成
        if (todo.hasClass('completed')) {
          todo.css('color', 'black')
          todo.removeClass('completed')
          $(e.target).text('標記完成')
        } else {
          todo.css('color', 'green')
          todo.addClass('completed')
          $(e.target).text('標記未完成')
        }

      })
    })

  </script>
  <style>
      .todo {
        padding: 12px;
        border: 1px solid grey;
      }
  </style>
</head>

<body>
  <input class="todo-input"/>
  <button class="btn">Add todo</button>
  <button class="btn-remove-all">Remove all todos</button>
  <div class="todos">

  </div>
</body>
</html>

jQuery Ajax 範例

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">

  <title>Ajax</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script>
    $(document).ready(() => {
      $('.btn').click(() => {
        const value = $('input[name=country-name]').val()
        if (value === '') {
          alert('必須輸入名稱')
          return
        }

        $('.list').empty()

        $.ajax({
          method: 'GET',
          url: 'https://restcountries.eu/rest/v2/name/' + value,
          success: countries => {
            for(let country of countries) {
              $('.list').append(
                `<div>${country.alpha2Code} ${country.name} ${country.nativeName}</div>`
              )
            }
          },
          error: err => alert('系統不穩定')
        })
      })
    })

  </script>
  <style>

  </style>
</head>

<body>
  Name: <input name="country-name" /> <button class="btn">送出</button>
  <div class="list">
  </div>
</body>
</html>

更多 ajax 參考範例：You might not need jQuery