小編精選 - 技術文章翻譯 · 04月27日

個人整理的 jQuery 方法速查表彙整

前言

最近在一些舊版專案中有機會碰到 jQuery，因為有不少不熟悉的地方，所以決定整理一份個人的作弊表。

版本：以下以 jQuery 3.x 系列為前提

基本語法

<span>// DOM 載入完成後執行</span>
<span>$</span><span>(</span><span>document</span><span>).</span><span>ready</span><span>(</span><span>function </span><span>()</span> <span>{</span>
  <span>// 處理</span>
<span>});</span>

<span>// 簡寫形式（很常用）</span>
<span>$</span><span>(</span><span>function </span><span>()</span> <span>{</span>
  <span>// 處理</span>
<span>});</span>

<span>// 基本的選擇器寫法</span>
<span>$</span><span>(</span><span>selector</span><span>).</span><span>method</span><span>();</span>

選擇器一覽

選擇器說明$("*")所有元素$(".class")類別名稱$("#id")ID$("div")標籤名稱$("div, p")多個指定$("parent > child")直接子元素$("ancestor descendant")後代元素$(":hidden")隱藏元素$(":visible")目前顯示中的元素$(":contains('text')")包含指定文字的元素$(":first")第一個元素$(":last")最後一個元素$(":even")偶數索引（從 0 開始）$(":odd")奇數索引$(":eq(n)")第 n 個元素---

DOM 操作

元素的取得與變更

<span>// 文字</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>text</span><span>();</span>          <span>// 取得</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>text</span><span>(</span><span>"</span><span>hello</span><span>"</span><span>);</span>   <span>// 變更</span>

<span>// HTML</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>html</span><span>();</span>          <span>// 取得</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>html</span><span>(</span><span>"</span><span><b>Hi</b></span><span>"</span><span>);</span> <span>// 變更</span>

<span>// 表單的值</span>
<span>$</span><span>(</span><span>"</span><span>input</span><span>"</span><span>).</span><span>val</span><span>();</span>         <span>// 取得</span>
<span>$</span><span>(</span><span>"</span><span>input</span><span>"</span><span>).</span><span>val</span><span>(</span><span>"</span><span>value</span><span>"</span><span>);</span>  <span>// 變更</span>

<span>// 屬性</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>attr</span><span>(</span><span>"</span><span>href</span><span>"</span><span>);</span>          <span>// 取得</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>attr</span><span>(</span><span>"</span><span>href</span><span>"</span><span>,</span> <span>"</span><span>/top</span><span>"</span><span>);</span>  <span>// 變更</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>removeAttr</span><span>(</span><span>"</span><span>href</span><span>"</span><span>);</span>    <span>// 刪除</span>

元素的新增與刪除

<span>// 作為子元素追加到最後</span>
<span>$</span><span>(</span><span>"</span><span>#parent</span><span>"</span><span>).</span><span>append</span><span>(</span><span>"</span><span><p>追加</p></span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span><p>追加</p></span><span>"</span><span>).</span><span>appendTo</span><span>(</span><span>"</span><span>#parent</span><span>"</span><span>);</span>

<span>// 作為子元素加入到最前面</span>
<span>$</span><span>(</span><span>"</span><span>#parent</span><span>"</span><span>).</span><span>prepend</span><span>(</span><span>"</span><span><p>最前面</p></span><span>"</span><span>);</span>

<span>// 作為同層元素加在後面</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>after</span><span>(</span><span>"</span><span><p>後面</p></span><span>"</span><span>);</span>

<span>// 作為同層元素加在前面</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>before</span><span>(</span><span>"</span><span><p>前面</p></span><span>"</span><span>);</span>

<span>// 刪除元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>remove</span><span>();</span>   <span>// 事件也會一起刪除</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>detach</span><span>();</span>   <span>// 保留事件的狀態下刪除（預設會再插回）</span>

<span>// 刪除所有子元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>empty</span><span>();</span>

<span>// 取代元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>replaceWith</span><span>(</span><span>"</span><span><div>新的元素</div></span><span>"</span><span>);</span>

<span>// 包裹</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>wrap</span><span>(</span><span>"</span><span><div class='wrapper'></div></span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>.items</span><span>"</span><span>).</span><span>wrapAll</span><span>(</span><span>"</span><span><div class='container'></div></span><span>"</span><span>);</span>

<span>// 解除包裹</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>unwrap</span><span>();</span>

<span>// 複製元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>clone</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>clone</span><span>(</span><span>true</span><span>);</span> <span>// 連事件一起複製</span>

CSS 操作

<span>// 1 個屬性</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>css</span><span>(</span><span>"</span><span>color</span><span>"</span><span>);</span>           <span>// 取得</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>css</span><span>(</span><span>"</span><span>color</span><span>"</span><span>,</span> <span>"</span><span>red</span><span>"</span><span>);</span>    <span>// 變更</span>

<span>// 多個屬性</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>css</span><span>({</span>
  <span>color</span><span>:</span> <span>"</span><span>red</span><span>"</span><span>,</span>
  <span>fontSize</span><span>:</span> <span>"</span><span>16px</span><span>"</span><span>,</span>
  <span>backgroundColor</span><span>:</span> <span>"</span><span>#fff</span><span>"</span><span>,</span>
<span>});</span>

<span>// 類別操作</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>addClass</span><span>(</span><span>"</span><span>active</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>removeClass</span><span>(</span><span>"</span><span>active</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>toggleClass</span><span>(</span><span>"</span><span>active</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>hasClass</span><span>(</span><span>"</span><span>active</span><span>"</span><span>);</span> <span>// 布林值</span>

<span>// 尺寸</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>width</span><span>();</span>   <span>// 內容寬度</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>height</span><span>();</span>  <span>// 內容高度</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>innerWidth</span><span>();</span>   <span>// 含 padding</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>innerHeight</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>outerWidth</span><span>();</span>   <span>// 含 border</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>outerHeight</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>outerWidth</span><span>(</span><span>true</span><span>);</span>   <span>// 含 margin</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>outerHeight</span><span>(</span><span>true</span><span>);</span>

<span>// 位置</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>offset</span><span>();</span>    <span>// { top, left } 以文件為基準</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>position</span><span>();</span>  <span>// { top, left } 以父元素為基準</span>
<span>$</span><span>(</span><span>window</span><span>).</span><span>scrollTop</span><span>();</span>   <span>// 捲動位置（垂直）</span>
<span>$</span><span>(</span><span>window</span><span>).</span><span>scrollLeft</span><span>();</span>  <span>// 捲動位置（水平）</span>

顯示／隱藏（效果）

<span>// 基本</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>hide</span><span>();</span>         <span>// display: none</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>show</span><span>();</span>         <span>// 顯示</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>toggle</span><span>();</span>       <span>// 切換</span>

<span>// 指定速度（"slow" / "fast" / 毫秒）</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>hide</span><span>(</span><span>"</span><span>slow</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>show</span><span>(</span><span>300</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>toggle</span><span>(</span><span>"</span><span>fast</span><span>"</span><span>,</span> <span>function</span><span>()</span> <span>{</span>
  <span>console</span><span>.</span><span>log</span><span>(</span><span>"</span><span>完成</span><span>"</span><span>);</span>  <span>// 回呼</span>
<span>});</span>

<span>// 淡入淡出</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>fadeIn</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>fadeOut</span><span>(</span><span>300</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>fadeToggle</span><span>(</span><span>"</span><span>slow</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>fadeTo</span><span>(</span><span>"</span><span>slow</span><span>"</span><span>,</span> <span>0.5</span><span>);</span>  <span>// 到指定透明度</span>

<span>// 滑動</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>slideDown</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>slideUp</span><span>(</span><span>300</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>slideToggle</span><span>(</span><span>"</span><span>fast</span><span>"</span><span>);</span>

<span>// 自訂動畫</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>animate</span><span>(</span>
  <span>{</span>
    <span>opacity</span><span>:</span> <span>0.5</span><span>,</span>
    <span>marginTop</span><span>:</span> <span>"</span><span>20px</span><span>"</span><span>,</span>
    <span>width</span><span>:</span> <span>"</span><span>200px</span><span>"</span><span>,</span>
  <span>},</span>
  <span>500</span><span>,</span>           <span>// duration (ms)</span>
  <span>"</span><span>swing</span><span>"</span><span>,</span>       <span>// easing（"swing" or "linear"）</span>
  <span>function </span><span>()</span> <span>{</span>  <span>// callback</span>
    <span>console</span><span>.</span><span>log</span><span>(</span><span>"</span><span>動畫完成</span><span>"</span><span>);</span>
  <span>}</span>
<span>);</span>

<span>// 動畫控制</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>stop</span><span>();</span>          <span>// 停止目前的動畫</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>stop</span><span>(</span><span>true</span><span>);</span>      <span>// 也刪除佇列</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>stop</span><span>(</span><span>true</span><span>,</span> <span>true</span><span>);</span> <span>// 刪除佇列並跳到最終狀態</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>finish</span><span>();</span>         <span>// 將所有動畫完成到結束狀態</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>delay</span><span>(</span><span>500</span><span>);</span>       <span>// 延遲到下一個動畫</span>

事件

<span>// 點擊</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>click</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>on</span><span>(</span><span>"</span><span>click</span><span>"</span><span>,</span> <span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>

<span>// 雙擊</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>dblclick</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>

<span>// 滑鼠</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>mouseenter</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>mouseleave</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>hover</span><span>(</span>
  <span>function </span><span>()</span> <span>{</span> <span>/* enter */</span> <span>},</span>
  <span>function </span><span>()</span> <span>{</span> <span>/* leave */</span> <span>}</span>
<span>);</span>

<span>// 鍵盤</span>
<span>$</span><span>(</span><span>document</span><span>).</span><span>keydown</span><span>(</span><span>function </span><span>(</span><span>e</span><span>)</span> <span>{</span> <span>console</span><span>.</span><span>log</span><span>(</span><span>e</span><span>.</span><span>key</span><span>);</span> <span>});</span>
<span>$</span><span>(</span><span>document</span><span>).</span><span>keyup</span><span>(</span><span>function </span><span>(</span><span>e</span><span>)</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>document</span><span>).</span><span>keypress</span><span>(</span><span>function </span><span>(</span><span>e</span><span>)</span> <span>{</span> <span>...</span> <span>});</span> <span>// 已不建議使用</span>

<span>// 表單</span>
<span>$</span><span>(</span><span>"</span><span>input</span><span>"</span><span>).</span><span>focus</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>"</span><span>input</span><span>"</span><span>).</span><span>blur</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>"</span><span>input</span><span>"</span><span>).</span><span>change</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>"</span><span>input</span><span>"</span><span>).</span><span>input</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>"</span><span>form</span><span>"</span><span>).</span><span>submit</span><span>(</span><span>function </span><span>(</span><span>e</span><span>)</span> <span>{</span>
  <span>e</span><span>.</span><span>preventDefault</span><span>();</span> <span>// 阻止預設行為</span>
  <span>...</span>
<span>});</span>

<span>// 視窗</span>
<span>$</span><span>(</span><span>window</span><span>).</span><span>resize</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>(</span><span>window</span><span>).</span><span>scroll</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>

<span>// 刪除事件</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>off</span><span>(</span><span>"</span><span>click</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>off</span><span>(</span><span>"</span><span>click</span><span>"</span><span>,</span> <span>handler</span><span>);</span>

<span>// 只執行一次</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>one</span><span>(</span><span>"</span><span>click</span><span>"</span><span>,</span> <span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>

<span>// 事件委派（也會作用於動態新增的元素）</span>
<span>$</span><span>(</span><span>document</span><span>).</span><span>on</span><span>(</span><span>"</span><span>click</span><span>"</span><span>,</span> <span>"</span><span>.dynamic-el</span><span>"</span><span>,</span> <span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>
<span>// 或</span>
<span>$</span><span>(</span><span>"</span><span>#static-parent</span><span>"</span><span>).</span><span>on</span><span>(</span><span>"</span><span>click</span><span>"</span><span>,</span> <span>"</span><span>.dynamic-el</span><span>"</span><span>,</span> <span>function </span><span>()</span> <span>{</span> <span>...</span> <span>});</span>

<span>// 手動觸發事件</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>trigger</span><span>(</span><span>"</span><span>click</span><span>"</span><span>);</span>

Traversal（DOM 搜尋）

<span>// 父元素・祖先</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>parent</span><span>();</span>                <span>// 直接父元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>parents</span><span>();</span>               <span>// 所有祖先</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>parents</span><span>(</span><span>"</span><span>div</span><span>"</span><span>);</span>          <span>// 條件過濾</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>parentsUntil</span><span>(</span><span>"</span><span>.stop</span><span>"</span><span>);</span>   <span>// 往上找到 .stop 為止</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>closest</span><span>(</span><span>"</span><span>.wrapper</span><span>"</span><span>);</span>     <span>// 包含自身在內最近的祖先</span>

<span>// 子元素・後代</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>children</span><span>();</span>              <span>// 直接子元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>children</span><span>(</span><span>"</span><span>.active</span><span>"</span><span>);</span>     <span>// 過濾</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>find</span><span>(</span><span>"</span><span>p</span><span>"</span><span>);</span>               <span>// 從所有後代中搜尋</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>contents</span><span>();</span>              <span>// 包含文字節點</span>

<span>// 同層元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>siblings</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>siblings</span><span>(</span><span>"</span><span>.active</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>next</span><span>();</span>                  <span>// 下一個同層元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>nextAll</span><span>();</span>               <span>// 後面的所有同層元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>nextUntil</span><span>(</span><span>"</span><span>.stop</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>prev</span><span>();</span>                  <span>// 前一個同層元素</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>prevAll</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>prevUntil</span><span>(</span><span>"</span><span>.stop</span><span>"</span><span>);</span>

<span>// 篩選</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>first</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>last</span><span>();</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>eq</span><span>(</span><span>2</span><span>);</span>          <span>// 指定索引</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>filter</span><span>(</span><span>"</span><span>.active</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>not</span><span>(</span><span>"</span><span>.active</span><span>"</span><span>);</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>has</span><span>(</span><span>"</span><span>span</span><span>"</span><span>);</span>    <span>// 篩出包含 span 的 li</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>is</span><span>(</span><span>"</span><span>.active</span><span>"</span><span>);</span>  <span>// 布林值</span>

<span>// 重置鏈結</span>
<span>$</span><span>(</span><span>"</span><span>ul</span><span>"</span><span>).</span><span>find</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>addClass</span><span>(</span><span>"</span><span>item</span><span>"</span><span>).</span><span>end</span><span>().</span><span>addClass</span><span>(</span><span>"</span><span>list</span><span>"</span><span>);</span>
<span>// 用 end() 回到 $("ul")</span>

Ajax

<span>// $.ajax（完整設定）</span>
<span>$</span><span>.</span><span>ajax</span><span>({</span>
  <span>url</span><span>:</span> <span>"</span><span>/api/data</span><span>"</span><span>,</span>
  <span>type</span><span>:</span> <span>"</span><span>GET</span><span>"</span><span>,</span>  <span>// "POST" / "PUT" / "DELETE"</span>
  <span>data</span><span>:</span> <span>{</span> <span>id</span><span>:</span> <span>1</span> <span>},</span>
  <span>dataType</span><span>:</span> <span>"</span><span>json</span><span>"</span><span>,</span>
  <span>success</span><span>:</span> <span>function </span><span>(</span><span>res</span><span>)</span> <span>{</span>
    <span>console</span><span>.</span><span>log</span><span>(</span><span>res</span><span>);</span>
  <span>},</span>
  <span>error</span><span>:</span> <span>function </span><span>(</span><span>jqXHR</span><span>,</span> <span>status</span><span>,</span> <span>err</span><span>)</span> <span>{</span>
    <span>console</span><span>.</span><span>error</span><span>(</span><span>err</span><span>);</span>
  <span>},</span>
  <span>complete</span><span>:</span> <span>function </span><span>()</span> <span>{</span>
    <span>console</span><span>.</span><span>log</span><span>(</span><span>"</span><span>完成</span><span>"</span><span>);</span>
  <span>},</span>
<span>});</span>

<span>// Promise 風格（這比較現代）</span>
<span>$</span><span>.</span><span>ajax</span><span>({</span> <span>url</span><span>:</span> <span>"</span><span>/api/data</span><span>"</span><span>,</span> <span>type</span><span>:</span> <span>"</span><span>GET</span><span>"</span> <span>})</span>
  <span>.</span><span>done</span><span>(</span><span>function </span><span>(</span><span>res</span><span>)</span> <span>{</span> <span>console</span><span>.</span><span>log</span><span>(</span><span>res</span><span>);</span> <span>})</span>
  <span>.</span><span>fail</span><span>(</span><span>function </span><span>(</span><span>err</span><span>)</span> <span>{</span> <span>console</span><span>.</span><span>error</span><span>(</span><span>err</span><span>);</span> <span>})</span>
  <span>.</span><span>always</span><span>(</span><span>function </span><span>()</span> <span>{</span> <span>console</span><span>.</span><span>log</span><span>(</span><span>"</span><span>總是執行</span><span>"</span><span>);</span> <span>});</span>

<span>// 簡寫形式</span>
<span>$</span><span>.</span><span>get</span><span>(</span><span>"</span><span>/api/data</span><span>"</span><span>,</span> <span>function </span><span>(</span><span>res</span><span>)</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>.</span><span>post</span><span>(</span><span>"</span><span>/api/data</span><span>"</span><span>,</span> <span>{</span> <span>name</span><span>:</span> <span>"</span><span>test</span><span>"</span> <span>},</span> <span>function </span><span>(</span><span>res</span><span>)</span> <span>{</span> <span>...</span> <span>});</span>
<span>$</span><span>.</span><span>getJSON</span><span>(</span><span>"</span><span>/api/data</span><span>"</span><span>,</span> <span>function </span><span>(</span><span>res</span><span>)</span> <span>{</span> <span>...</span> <span>});</span>

<span>// 表單序列化</span>
<span>$</span><span>(</span><span>"</span><span>form</span><span>"</span><span>).</span><span>serialize</span><span>();</span>         <span>// 查詢字串格式</span>
<span>$</span><span>(</span><span>"</span><span>form</span><span>"</span><span>).</span><span>serializeArray</span><span>();</span>    <span>// 陣列物件格式</span>

工具函式

<span>// each（迴圈）</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>each</span><span>(</span><span>function </span><span>(</span><span>index</span><span>,</span> <span>element</span><span>)</span> <span>{</span>
  <span>console</span><span>.</span><span>log</span><span>(</span><span>index</span><span>,</span> <span>$</span><span>(</span><span>element</span><span>).</span><span>text</span><span>());</span>
<span>});</span>

<span>// map（回傳新的 jQuery 物件）</span>
<span>const</span> <span>texts</span> <span>=</span> <span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>map</span><span>(</span><span>function </span><span>(</span><span>i</span><span>,</span> <span>el</span><span>)</span> <span>{</span>
  <span>return</span> <span>$</span><span>(</span><span>el</span><span>).</span><span>text</span><span>();</span>
<span>}).</span><span>get</span><span>();</span> <span>// 轉成陣列</span>

<span>// 篩選（概念類似原生的 filter）</span>
<span>$</span><span>(</span><span>"</span><span>li</span><span>"</span><span>).</span><span>filter</span><span>(</span><span>function </span><span>(</span><span>i</span><span>)</span> <span>{</span>
  <span>return</span> <span>$</span><span>(</span><span>this</span><span>).</span><span>text</span><span>().</span><span>includes</span><span>(</span><span>"</span><span>jQuery</span><span>"</span><span>);</span>
<span>});</span>

<span>// 儲存資料</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>data</span><span>(</span><span>"</span><span>key</span><span>"</span><span>,</span> <span>"</span><span>value</span><span>"</span><span>);</span>  <span>// 儲存</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>data</span><span>(</span><span>"</span><span>key</span><span>"</span><span>);</span>           <span>// 取得</span>
<span>$</span><span>(</span><span>"</span><span>#el</span><span>"</span><span>).</span><span>removeData</span><span>(</span><span>"</span><span>key</span><span>"</span><span>);</span>     <span>// 刪除</span>

<span>// 型別檢查</span>
<span>$</span><span>.</span><span>isArray</span><span>([]);</span>       <span>// true</span>
<span>$</span><span>.</span><span>isFunction</span><span>(</span><span>fn</span><span>);</span>    <span>// true</span>
<span>$</span><span>.</span><span>isNumeric</span><span>(</span><span>"</span><span>3</span><span>"</span><span>);</span>    <span>// true</span>
<span>$</span><span>.</span><span>type</span><span>({});</span>          <span>// "object"</span>

<span>// 擴充</span>
<span>$</span><span>.</span><span>extend</span><span>({</span> <span>method</span><span>:</span> <span>function</span><span>()</span> <span>{}</span> <span>});</span> <span>// 新增到 jQuery
</span><span>$</span><span>.</span><span>fn</span><span>.</span><span>extend</span><span>({</span> <span>method</span><span>:</span> <span>function</span><span>()</span> <span>{}</span> <span>});</span> <span>// 以外掛方式新增</span>

<span>// trim</span>
<span>$</span><span>.</span><span>trim</span><span>(</span><span>"</span><span>  hello  </span><span>"</span><span>);</span> <span>// "hello"（ES6 之後可直接用 String.prototype.trim）</span>