JQuery 筆記：You might not need JQuery doesn't mean you can't try it

為何要用 JQuery？

JQuery 是一套 JavaScript 函式庫，有以下三種優點：

輕量化
支援 CSS 3 選取器
跨瀏覽器

在早期瀏覽器百家爭鳴的時代，一種功能可能會需要寫五種寫法以支援不同的瀏覽器，而且當時原生的 JavaScript 也沒有現在這麼好用。

所以使用 JQuery，不但可以解決跨瀏覽器的問題，也可以簡化語法，這讓 JQuery 在稱霸了一陣子，直到原生 JavaScript 愈發完備且現代框架出現以後，JQuery 的使用才逐漸變少，然而，在一些小型的項目中，使用 JQuery 還是不錯的選擇。

JQuery API

JQuery === $ return true

$ 只是 Jquey 裡面定義的一個變數名稱，不是什麼高深的符號，如果程式碼裡面用到別的庫也使用這個 $，就可以用 JQuery 來代替。

Events

用法：

$(document).ready(() => {
    //shorthand
  $('.btn').click((e) => {
    alert('click jq!')
  })

  $('.btn').on('click', (e) => {
    alert('click jq!')
  })
})

// Vanilla JavaScript
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('.btn');
  btn.addEventListener('click', () => {
    alert('hi');
  })
})

.click
.dblclick
.hover

More...

DOM Manipulation

.show() / 顯示 .hide() / 隱藏 .toggle() 切換
.remove 刪除元素本身
.empty / 清空元素內的所有東西
.append / 新增子元素到最後項
.prepend / 新增子元素到最前項
.css() 設定 CSS
.addClass() / 增加 class .removeClass() 移除 class / toggleClass() 切換 class
.text() 控制 DOM 的 text 內容
.html() / 設定或抓取元素內的 html
More...

Effect

.fadeIn() / 淡入 fadeOut() / 淡出 fadeToggle() / 切換淡入淡出

第一個參數為動畫時間，第二個參數可帶 function。

Ajax

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});

More...

同一個 API 有無參數會有不同功能

以 .val() 為例：

// 賦值
$(document).ready(() => {
    $('.todo-input').val('abc');
})

//抓取
$(document).ready(() => {
    $('.btn').click((e) => {
      const value = $('.todo-input').val();
  })
})