jQuery 以「寫少做多」改變了前端開發範式。本文系統梳理 jQuery 核心概念與高頻技巧：選擇器機制、jQuery 對象與 DOM 對象互轉、集合索引訪問、Setter/Getter 統一 API、隱式迭代特性，助你寫出更簡潔、健壯的代碼。
$() 接受 CSS1~3、XPath、自定義選擇器，**返回 jQuery 對象（類數組集合）**，而非原生 DOM 元素。length、[index]、context、selector 等屬性，封裝了數百個實例方法。innerHTML、value）。| 方向 | 方法 | 示例 |
|---|---|---|
| DOM → jQuery | $(domElement) | $(document.getElementById('msg')) |
| jQuery → DOM (單個) | [index] / .get(index) / .eq(index)[0] | $('#msg')[0]、$('#msg').get(0)、$('#msg').eq(0)[0] |
| jQuery → DOM (全部) | .get() | $('div').get() 返回原生數組 |
// 獲取 #msg 內容 - 三種等價方式
$('#msg').html(); // jQuery 方法
$('#msg')[0].innerHTML; // DOM 屬性
$('#msg').get(0).innerHTML; // DOM 屬性
| 方法 | 返回類型 | 可調用 | 典型場景 |
|---|---|---|---|
.eq(index) | jQuery 對象 | jQuery 方法 | 鏈式操作、繼續篩選 |
.get(index) | DOM 元素 | DOM 方法/屬性 | 需要原生屬性、傳給原生 API |
[index] | DOM 元素 | DOM 方法/屬性 | 簡短代碼、性能敏感 |
// 獲取第 3 個 div 內容
$('div').eq(2).html(); // 推薦：鏈式風格
$('div').get(2).innerHTML; // 原生方式
$('div')[2].innerHTML; // 最簡短
jQuery 核心方法採用「無參獲取、有參設置」重載模式，極大簡化代碼：
| 方法 | Getter | Setter |
|---|---|---|
.html() | 返回 HTML 字符串 | .html('<b>new</b>') 設置 HTML |
.text() | 返回純文本 | .text('<b>escaped</b>') 設置文本（自動轉義） |
.val() | 返回表單值 | .val('new value') 設置表單值 |
.css(name) | 獲取樣式值 | .css('color','red') / .css({color:'red',width:'100px'}) |
.attr(name) | 獲取屬性 | .attr('title','tip') / .attr({title:'tip',id:'x'}) |
.width()/.height() | 獲取尺寸 | .width(300) 設置尺寸 |
.on(event, handler) | — | 綁定事件（原 .click(fn) 等為快捷方式） |
.trigger(event) | — | 觸發事件（原 .click() 無參為觸發） |
jQuery 方法內部自動遍歷集合，**Setter 適用於所有元素，Getter 僅返回第一個元素值**。
// 為所有 p 設置類名 - 隱式迭代
$('p').addClass('highlight');
// 獲取第一個 p 的高度
$('p').height(); // 單值
// 如需所有值，使用 .map() 或 .each()
const heights = $('p').map(function() { return $(this).height(); }).get();
// 或
const heights = [];
$('p').each(function() { heights.push($(this).height()); });
| 場景 | 推薦寫法 | 避坑提示 |
|---|---|---|
| 判斷元素是否存在 | if ($('#id').length) | 別用 if ($('#id'))（永真） |
| 多屬性同時設置 | .css({width:'100px',height:'50px'}) | 對象語法比多次調用快 |
| 事件委託 | $(parent).on('click', '.child', fn) | 動態元素、大量綁定必用 |
| 鏈式調用斷點調試 | .end() 返回上一個集合 | 配合 .addBack() 包含前集合 |
| 數據綁定 | .data('key', val) / .data('key') | 內部數據緩存，不污染 DOM 屬性 |
| 動畫隊列控制 | .stop(true, true) 清空隊列並跳至末幀 | 避免動畫堆疊閃爍 |
.on() 為 .bind()/.live()/.delegate() 統一替代。.show()/hide() 修復佈局觸發、.data() 行為更嚴格、移除舊版兼容代碼。**新項目首選 3.7+**。掌握 jQuery 本質是「集合操作封裝 + 隱式迭代 + 鏈式 API」，能幫你在維護舊項目、快速原型、兼容舊瀏覽器場景下保持高效產出。現代項目建議漸進式遷移至原生 API (querySelector、fetch、classList) 或輕量級替代方案。
