jQuery API 豐富龐大，掌握高頻核心方法能覆蓋 90% 開發場景。本文按功能分類匯總必會 API，附代碼片段與典型用法，適合作為桌面速查卡或面試複習資料。
1. 文檔就緒與事件綁定
| 方法 | 簽名 | 說明 | 示例 |
|---|
ready | $(fn) / $(document).ready(fn) | DOM 就緒執行，比 onload 早 | $(function(){ ... }); |
on | .on(events, [selector], [data], handler) | 統一綁定（推薦），支持委託 | $(doc).on('click','.btn',fn) |
off | .off(events, [selector], [handler]) | 移除綁定 | $(doc).off('click','.btn') |
one | .one(events, [selector], [data], handler) | 僅執行一次 | $('#modal').one('hidden',fn) |
trigger | .trigger(event, [extraParams]) | 手動觸發事件 | $(form).trigger('submit') |
hover | .hover(handlerIn, handlerOut) | mouseenter/mouseleave 簡寫 | $('.item').hover(inFn, outFn) |
2. 樣式與視覺效果
| 方法 | 用法 | 示例 |
|---|
addClass / removeClass / toggleClass | .addClass('active') | 類名操作，支持函數返回值 |
css | .css('color') / .css({color:'red',width:200}) | 獲取/設置內聯樣式 |
show / hide / toggle | .show(400, fn) / .hide() | 顯示/隱藏，支持動畫 |
fadeIn / fadeOut / fadeToggle / fadeTo | .fadeIn('slow', fn) | 淡入/出動畫 |
slideDown / slideUp / slideToggle | .slideDown(300) | 滑動動畫 |
animate | .animate(props, [duration], [easing], [complete]) | 自定義動畫，支持隊列 |
stop | .stop([clearQueue], [jumpToEnd]) | 停止動畫，.stop(true,true) 常用 |
delay | .delay(1000) | 動畫隊列延遲 |
3. DOM 操作：屬性、內容、結構
| 類別 | 方法 | 關鍵點 |
|---|
| 屬性 | attr(name, [value]) | HTML 屬性，prop 用於 DOM 屬性 |
prop(name, [value]) | checked/selected/disabled 必用 prop |
removeAttr / removeProp | 移除屬性 |
| 內容 | html([content]) | HTML 字符串，XSS 風險注意 |
text([content]) | 純文本，自動轉義 |
val([value]) | 表單值，多選返回數組 |
| 結構 | append / prepend / after / before | 內部/外部插入，支持多參數 |
wrap / wrapAll / wrapInner | 包裹元素 |
unwrap | 移除父元素 |
empty | 清空子節點（保留自身） |
remove / detach | 移除自身，detach 保留數據/事件 |
| 克隆 | clone([withDataAndEvents]) | 深度克隆，true 保留事件 |
replaceWith / replaceAll | 替換元素 |
4. 遍歷與篩選
| 方法 | 說明 | 示例 |
|---|
find(selector) | 後代篩選 | $('#form').find('input') |
children([selector]) | 直接子元素 | $('#ul').children('li.active') |
parent([selector]) | 父元素 | $('#input').parent() |
parents([selector]) | 所有祖先 | $('#input').parents('form') |
closest(selector) | 向上查找最近匹配（含自身） | $(this).closest('tr') |
siblings([selector]) | 兄弟元素 | $(this).siblings('.highlight') |
next / prev / nextAll / prevAll | 方向遍歷 | $(this).next() |
filter(selector|fn) | 集合過濾 | $('li').filter(':even') |
not(selector|fn|elements) | 排除匹配 | $('li').not('.active') |
is(selector|fn|elements) | 判斷是否匹配，返回布爾值 | if($(this).is(':visible')) |
map(callback) | 映射轉換，返回 jQuery 對象 | $('input').map(fn).get() |
each(callback) | 隱式迭代，this 為 DOM | $('.item').each(fn) |
eq / get / first / last | 索引訪問 | $('.item').eq(0) |
5. AJAX 核心
| 方法 | 簽名 | 典型用法 |
|---|
$.ajax | $.ajax(url, settings) / $.ajax(settings) | 底層入口，完全控制 |
$.get / $.post | $.get(url, data, success, dataType) | 簡化 GET/POST |
$.getJSON | $.getJSON(url, data, success) | 自動解析 JSON |
$.getScript | $.getScript(url, success) | 載入並執行 JS |
load | $('#div').load(url, [data], [complete]) | 載入 HTML 片段插入元素 |
serialize / serializeArray | $('form').serialize() | 表單序列化為字符串/數組 |
$.param | $.param(obj) | 對象序列化為查詢字符串 |
$.ajax 關鍵配置項
$.ajax({
url: '/api/users',
method: 'POST',
data: { name: 'John' }, // 自動 serialize
dataType: 'json', // 預期響應類型
contentType: 'application/json', // 請求 Content-Type
headers: { 'X-CSRF-Token': token },
timeout: 5000,
beforeSend: function(xhr) { xhr.setRequestHeader('X-Req', '1'); },
success: function(data, textStatus, jqXHR) { ... },
error: function(jqXHR, textStatus, errorThrown) { ... },
complete: function(jqXHR, textStatus) { ... }
});
6. 工具函數
| 方法 | 說明 | 示例 |
|---|
$.each(obj, callback) | 通用遍歷（數組/對象） | $.each({a:1,b:2}, (k,v)=>{...}) |
$.map(arr, callback) | 數組映射，返回新數組 | $.map([1,2], n=>n*2) |
$.grep(arr, fn) | 數組過濾 | $.grep([1,2,3], n=>n>1) |
$.extend(target, obj1, ...) | 對象合並（淺拷貝），true 為深拷貝 | $.extend({}, defaults, options) |
$.makeArray(obj) | 類數組轉真數組 | $.makeArray(arguments) |
$.trim(str) | 去首尾空格（ES5+ 原生 str.trim()） | $.trim(' abc ') |
$.inArray(val, arr, [from]) | 查找索引，未找到 -1 | $.inArray(3, [1,2,3]) |
$.isArray / isFunction / isPlainObject / isNumeric / isEmptyObject | 類型判斷 | $.isPlainObject({}) |
$.proxy(fn, context) | 綁定 this 上下文 | $.proxy(handler, this) |
$.now() | 當前時間戳 Date.now() | $.now() |
$.Deferred / $.when / .then / .done / .fail / .always | Promise 模式異步控制 | $.when(ajax1, ajax2).done(...) |
7. 表單專用
| 方法 | 說明 |
|---|
:input / :text / :password / :radio / :checkbox / :submit | 表單選擇器 |
.serialize() | 標準查詢字符串 a=1&b=2 |
.serializeArray() | [{name:'a',value:'1'},{name:'b',value:'2'}] |
.val() | 統一獲取/設置 input/select/textarea 值 |
.prop('checked') / .prop('selected') | 狀態屬性必用 prop |
8. 尺寸與位置
| 方法 | 含義 |
|---|
.width() / .height() | content box 寬高 |
.innerWidth() / .innerHeight() | + padding |
.outerWidth([true]) / .outerHeight([true]) | + border (+ margin) |
.offset() | 相對 document 座標 {top, left} |
.position() | 相對 offsetParent 座標 |
.scrollTop() / .scrollLeft() | 滾動位置獲取/設置 |
速記口訣
- 綁定用 on，委託用 on，移除用 off
- 屬性用 prop，屬性用 attr，別搞錯
- 動畫用 stop，清隊列跳末幀
- 遍歷用 each，映射用 map，篩選用 filter
- AJAX 用 $.ajax，簡單用 get/post，片段用 load
建議將本表導出為 PDF 或 Markdown 置於工位，遇到不確定 API 秒查秒用，效率倍增。
