[ 前端工具 ] - jQuery


Posted by krebikshaw on 2020-08-25

簡介

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


#jquery







Related Posts

Python Table Manners - 測試 (一)

Python Table Manners - 測試 (一)

 TuriCreate

TuriCreate

直播協定 hls 筆記

直播協定 hls 筆記


Comments