切換 active 類別

$('ul>li').click(function () {
  $(this).addClass('active').siblings().removeClass('active')
})

迭代工具

.each()

如果想要逐一查用 jQuery 物件中所有的元素，可以呼叫 each()方法，而不用撰寫 for 迴圈，$().each() 是 jQuery 的 for 迴圈。each()類似 ECMAScript 5 的 forEach()陣列方法。預期一個回呼函式作為唯一的引數，並為 jQuery 物件中每個元素呼叫一次那個 callback 函式（以文件順序）。

彈性盒（FlexBox）

「彈性盒」是 CSS 裡很重要的觀念，如同名稱，是一種靈活佈局的盒子，至今 2020 主流的排版方式，許多著名 CSS FrameWork 都以它為佈局基礎。彈性盒的使用方式是在宣告一個元素容器為彈性盒 flex 或 inlne-flex 時，該容器就成為彈性容器（flex container）。而此彈性容器裡面的子元素，無論它們是區塊（block）或是行內（inline）類型，全部都會變成彈性項目（flex item）。當然，一些區塊元素預設的外距還是會造成些許差異（移除外距大家就一樣了），但不影響其成為彈性項目。在彈性盒裡面，有屬於它自己佈局的方式，自成領域。

AJAX

同步（Synchronous）

在瀏覽器處理 script 標籤時，傳統上會先停止頁面其他內容的處理，直到程式碼均載入且處理完成為止。這樣的模式稱為「同步處理模型」（synchronous processing model）。換句話說，也就是等我做完，你才能進行。因此，當頁面正進行載入時，若程式需要自伺服器要求資料，瀏覽器不只需要等待程式的載入和執行，還需要等待伺服器回傳程式需呈現資料的時間。

動畫設定

jQuery 的 animate 只支援任何「數字 + 單位」的屬性，且均為單個數值，例如 width、height、left，它們都可以是數字 + 單位（例如：100px），background-color 就不行，除非使用 jQuery.Color 或 jQuery UI來擴充功能，jQuery UI 還可以擴充 easing 動畫速率使用種類（jQuery 只提供 swing 與 linear）。

選擇器（Selectors）

jQuery 的選擇器以 CSS 為規範，以最快速、便捷的方式選擇到元素，是 jQuery 的強項之一，並且自訂了許多屬於自己的偽類過濾器來擴展選擇，不過，這些偽類並不是 CSS 的規範，不能被 querySelectorAll 所獲取，因此在 3.4 不推薦使用，改由相對應的方法進行篩選。

事件處理

事件處理是網頁互動行為很重要的核心，通常當一個事件發生時，會去呼叫一個事件處理程序（event handler）的回呼函式，也就是事件發生時要做的事情。jQuery 對事件有許多特別的貼心設定。

寬度、高度相關

width() 與 height()

在 jQuery，width()與 height()方法回傳元素的內容區域寬度與高度，不包括內距（padding）、邊框（border），它與 box-sizing 設定值的有關係。

css(‘width’) 與 width() 在 box-sizing:content-box，兩者取的值一樣（因為都是指內容區域的寬度），差別在於 css(‘width’)是有數字的字串 ‘px’，width() 只有數字。在設定為 box-sizing:border-box 時，css(‘width’)依舊是直接取得 css 設定的 width 值（會包含 border、padding），而 width() 則必須要扣除掉 padding、border，依舊指的是取得內容區域的寬度。

設定 width(value) 與 height(value) 時，可以是 數字、px、%、auto。如果傳入的是數字（未設定單位），視為預設以 px 為單位的尺寸大小，如果傳入的是字串值，會被用作 CSS width 或 height 屬性的值，因此可以套用任何 CSS 允許的單位，但不能設定 Window 或 Document 物件的寬度或高度，它們是唯讀。

插入元素

before()、prepend()、append()、after() 都是用來指定被插入至選擇目標某個位置的文件內容，皆取一個引數，可以是用來指定新內容的「純文字」或 「HTML 字串」，也可以是個「jQuery 物件」。
insertBefore()、prependTo()、appendTo()、insertAfter() 則是反過來，指將選擇目標的內容插入至參數表示的哪個位置。

變更及取得內容

jQuery 變更與取得元素的內容是非常容易的事情：

• 變更內容：$(選擇器).html(變更的內容)
• 取得內容：$(選擇器).html()