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


Posted by Nicolakacha on 2020-09-12

為何要用 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();
  })
})

範例 To do List

https://codepen.io/nicolas-cheng/pen/abNydvP

範例 Countries Searcher

https://codepen.io/nicolas-cheng/pen/gOrxPar

JQuery 還有很多豐富的 API 可以使用,上述已涵蓋一般常用的 API,如果有原生 JS 基礎學起來會很好上手,其他 API 有需要用到時再查文件就好,不要用人腦死記硬背 XDD。

文件 & 相關資源

比較原生 JS 以及 JQuery 用法:
You Might Not Need jQuery

JQuery 官方文件:
jQuery API

JQuery 免費課程:
JQuery Crash Course
Traversy Media
https://www.youtube.com/watch?v=3nrLc_JOF7k&list=PLgT1LClcgVzFMNgCvv2ar0ZEg_ORBv2bw&index=2&t=412s


#jquery







Related Posts

物件參考觀念 小試身手

物件參考觀念 小試身手

W12_Bootstrap 筆記

W12_Bootstrap 筆記

Conda 常用指令整理

Conda 常用指令整理


Comments