# jQuery Code Snippets 常用速查表

> 適用於 VS Code 擴充套件：**[jQuery Code Snippets](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)**（by Don Jayamanne）

## 安裝方式

1. VS Code 按 `Cmd+Shift+X`（Mac）或 `Ctrl+Shift+X`（Windows/Linux）開啟擴充功能
2. 搜尋 **jQuery Code Snippets**
3. 點擊 **Install** 安裝
4. 在 JS 檔案中輸入 `jq` 即可看到下拉選單

---

## 文件就緒

| 前綴 | 說明 |
|------|------|
| `jqDocReady` | `$(document).ready(function() { ... });` |
| `jqDocReadyShort` | `$(function() { ... });` |

## 事件處理

| 前綴 | 說明 |
|------|------|
| `jqClick` | 綁定 click 事件 |
| `jqChange` | 綁定 change 事件 |
| `jqSubmit` | 綁定 submit 事件 |
| `jqSubmitTrigger` | 觸發 submit 事件 |
| `jqFocus` | 綁定 focus 事件 |
| `jqBlur` | 綁定 blur 事件 |
| `jqHover` | 綁定 mouseenter / mouseleave |
| `jqKeyDown` | 綁定 keydown 事件 |
| `jqKeyUp` | 綁定 keyup 事件 |
| `jqKeyPress` | 綁定 keypress 事件 |
| `jqMouseEnter` | 綁定 mouseenter 事件 |
| `jqMouseLeave` | 綁定 mouseleave 事件 |
| `jqOn` | 使用 `.on()` 綁定事件 |
| `jqOne` | 綁定只觸發一次的事件 |
| `jqOneWithData` | 帶資料的一次性事件 |

### jqOn 常見事件範例

// 點擊
$(selector).on('click', function() { ... });

// 雙擊
$(selector).on('dblclick', function() { ... });

// 滑鼠事件
$(selector).on('mouseenter', function() { ... });
$(selector).on('mouseleave', function() { ... });
$(selector).on('mouseover', function() { ... });
$(selector).on('mouseout', function() { ... });
$(selector).on('mousemove', function() { ... });
$(selector).on('mousedown', function() { ... });
$(selector).on('mouseup', function() { ... });

// 鍵盤事件
$(selector).on('keydown', function() { ... });
$(selector).on('keyup', function() { ... });
$(selector).on('keypress', function() { ... });

// 表單事件
$(selector).on('submit', function() { ... });
$(selector).on('change', function() { ... });
$(selector).on('focus', function() { ... });
$(selector).on('blur', function() { ... });
$(selector).on('input', function() { ... });
$(selector).on('select', function() { ... });

// 視窗事件
$(window).on('resize', function() { ... });
$(window).on('scroll', function() { ... });
$(window).on('load', function() { ... });

// 事件委派（動態元素適用）
$(parentSelector).on('click', childSelector, function() { ... });

// 綁定多個事件
$(selector).on('mouseenter mouseleave', function() { ... });

// 帶命名空間（方便解除）
$(selector).on('click.myPlugin', function() { ... });
$(selector).off('click.myPlugin');

| `jqTrigger` | 觸發事件 |
| `jqTriggerWithData` | 帶資料觸發事件 |
| `jqTriggerHandler` | 觸發事件處理器 |
| `jqBind` | 綁定事件（舊版） |
| `jqBindWithData` | 帶資料綁定事件 |
| `jqUnbind` | 解除事件綁定 |
| `jqUnbindAll` | 解除所有事件綁定 |
| `jqResize` | 綁定 resize 事件 |
| `jqScroll` | 綁定 scroll 事件 |
| `jqSelect` | 綁定 select 事件 |

## DOM 操作

| 前綴 | 說明 |
|------|------|
| `jqFind` | 尋找子元素 |
| `jqEach` | 遍歷陣列或物件 |
| `jqEachElement` | 遍歷 jQuery 物件中的每個元素 |
| `jqAppend` | 在內部末尾插入內容 |
| `jqAppendTo` | 將元素插入目標末尾 |
| `jqPrepend` | 在內部開頭插入內容 |
| `jqPrependTo` | 將元素插入目標開頭 |
| `jqAfter` | 在元素後面插入 |
| `jqBefore` | 在元素前面插入 |
| `jqInsertAfter` | 將元素插入到目標後面 |
| `jqInsertBefore` | 將元素插入到目標前面 |
| `jqRemove` | 移除元素 |
| `jqRemoveExp` | 帶過濾條件移除元素 |
| `jqEmpty` | 清空子元素 |
| `jqClone` | 複製元素 |
| `jqCloneWithEvents` | 複製元素（含事件） |
| `jqReplaceWith` | 替換元素 |
| `jqReplaceAll` | 用匹配元素替換目標 |
| `jqWrap` | 包裹元素 |
| `jqWrapAll` | 包裹所有匹配元素 |
| `jqWrapInner` | 包裹元素內容 |
| `jqMap` | 陣列映射 |

## 取得 / 設定內容與屬性

| 前綴 | 說明 |
|------|------|
| `jqTextGet` | 取得文字內容 |
| `jqTextSet` | 設定文字內容 |
| `jqHtmlGet` | 取得 HTML 內容 |
| `jqHtmlSet` | 設定 HTML 內容 |
| `jqValGet` | 取得表單值 |
| `jqValSet` | 設定表單值 |
| `jqAttrGet` | 取得屬性 |
| `jqAttrSet` | 設定屬性 |
| `jqAttrSetObj` | 用物件設定多個屬性 |
| `jqAttrSetFn` | 用函式設定屬性 |
| `jqAttrRemove` | 移除屬性 |
| `jqDataGet` | 取得 data 資料 |
| `jqDataSet` | 設定 data 資料 |
| `jqDataSetObj` | 用物件設定 data |
| `jqDataRemove` | 移除 data 資料 |

## CSS 與尺寸

| 前綴 | 說明 |
|------|------|
| `jqCssGet` | 取得 CSS 屬性值 |
| `jqCssSet` | 設定 CSS 屬性 |
| `jqCssSetObj` | 用物件設定多個 CSS |
| `jqClassAdd` | 新增 class |
| `jqClassRemove` | 移除 class |
| `jqClassToggle` | 切換 class |
| `jqClassToggleSwitch` | 帶開關切換 class |
| `jqHasClass` | 檢查是否有 class |
| `jqWidthGet` | 取得寬度 |
| `jqWidthSet` | 設定寬度 |
| `jqHeightGet` | 取得高度 |
| `jqHeightSet` | 設定高度 |
| `jqInnerWidth` | 取得內部寬度（含 padding） |
| `jqInnerHeight` | 取得內部高度（含 padding） |
| `jqOuterWidth` | 取得外部寬度（含 border） |
| `jqOuterHeight` | 取得外部高度（含 border） |
| `jqOffsetGet` | 取得元素座標 |
| `jqOffsetParent` | 取得最近定位祖先 |
| `jqPosition` | 取得相對位置 |
| `jqScrollTopGet` | 取得垂直捲軸位置 |
| `jqScrollTopSet` | 設定垂直捲軸位置 |
| `jqScrollLeftGet` | 取得水平捲軸位置 |
| `jqScrollLeftSet` | 設定水平捲軸位置 |

## 動畫效果

| 前綴 | 說明 |
|------|------|
| `jqShow` | 顯示元素 |
| `jqShowFull` | 顯示元素（完整參數） |
| `jqHide` | 隱藏元素 |
| `jqHideFull` | 隱藏元素（完整參數） |
| `jqToggle` | 切換顯示/隱藏 |
| `jqToggleFull` | 切換（完整參數） |
| `jqFadeIn` | 淡入 |
| `jqFadeInFull` | 淡入（完整參數） |
| `jqFadeOut` | 淡出 |
| `jqFadeOutFull` | 淡出（完整參數） |
| `jqFadeTo` | 淡到指定透明度 |
| `jqFadeToFull` | 淡到透明度（完整參數） |
| `jqSlideDown` | 向下滑動顯示 |
| `jqSlideDownFull` | 向下滑動（完整參數） |
| `jqSlideUp` | 向上滑動隱藏 |
| `jqSlideUpFull` | 向上滑動（完整參數） |
| `jqSlideToggle` | 滑動切換 |
| `jqSlideToggleFull` | 滑動切換（完整參數） |

## AJAX

| 前綴 | 說明 |
|------|------|
| `jqAjax` | 完整 AJAX 請求 |
| `jqAjaxAspNetWebService` | ASP.NET Web Service 請求 |
| `jqGet` | HTTP GET 請求 |
| `jqPost` | HTTP POST 請求 |
| `jqGetJson` | 取得 JSON 資料 |
| `jqGetScript` | 動態載入腳本 |
| `jqLoadGet` | 用 GET 載入 HTML |
| `jqLoadPost` | 用 POST 載入 HTML |

## 其他

| 前綴 | 說明 |
|------|------|
| `func` | 匿名函式 |
| `jqPlugin` | jQuery Plugin 模板 |
| `jqNamespace` | Namespace 模板 |