- /**
- * 在指定的上下文環境中搜索滿足選擇器表達式的 jQuery 對象。
- *
- * @selector(String) 選擇器
- * @context(Selector, DOM, jQuery 對象) 上下文環境(可選)。若不提供,則在整個文檔中搜索;
- * 若提供,則在當前的上下文環境中搜索
- * @return jQuery Object(Array<Element>)
- */
- $(selector, context);
● *
- /**
- * 匹配所有元素,多用於結合上下文來搜索。
- *
- * @return jQuery Object(Array<Element>)
- */
- $("*");
● .class
- /**
- * 根據給定的類匹配元素。
- *
- * @className(String) 類名
- * @return jQuery Object(Array<Element>)
- */
- $(".className");
● element(即 tagName)
- /**
- * 根據給定的元素名(tagName)匹配符合的元素。
- *
- * @tagName(String) 一個用於搜索的元素。指向 DOM 節點的標籤名。
- * @return jQuery Object(Array<Element>)
- */
- $("tagName");
- // 例子:查找 DIV 元素。
- <div>DIV1</div>
- <div>DIV2</div>
- <span>SPAN</span>
- $("div") -> [ <div>DIV1</div>, <div>DIV2</div> ]
● #id
- /**
- * 根據給定的 ID 匹配一個元素。
- *
- * @id(String) 元素的 id 屬性中給定的值。
- * @return jQuery Object(Element)
- */
- $("#id");
- // 例子:查找 ID 爲 "myDiv" 的元素
- <div id="notMe"><p>id="notMe"</p></div>
- <div id="myDiv">id="myDiv"</div>
- $("#myDiv") -> [ <div id="myDiv">id="myDiv"</div> ]
● selector1,selector2,selectorN(並集)
- /**
- * 將每一個選擇器匹配到的元素合併後一起返回。
- * 你可以指定任意多個選擇器,並將匹配到的元素合併到一個結果內。
- *
- * @selector1(Selector) 一個有效的選擇器
- * @selector2(Selector) 另一個有效的選擇器
- * @selectorN(Selector) (可選) 任意多個有效選擇器
- * @return jQuery Object(Array<Element>)
- */
- $("selector1,selector2,selectorN");
- // 例子:找到匹配任意一個類的元素。
- <div>div</div>
- <p class="myClass">p class="myClass"</p>
- <span>span</span>
- <p class="notMyClass">p class="notMyClass"</p>
- $("div,span,p.myClass") ->
- [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
● ancestor descendant(直接孩子 + 間接孩子)
- /**
- * 在給定的祖先元素下匹配所有的後代(直接孩子 + 間接孩子)元素。
- *
- * @ancestor(Selector) 任何有效選擇器
- * @descendant(Selector) 用以匹配元素的選擇器,並且它是第一個選擇器的後代元素
- * @return jQuery Object(Array<Element>)
- */
- $("ancestor descendant");
- // 例子:找到表單中所有的 input 元素。
- <form>
- <label>Name:</label>
- <input name="name" />
- <fieldset>
- <label>Newsletter:</label>
- <input name="newsletter" />
- </fieldset>
- </form>
- <input name="none" />
- $("form input") -> [ <input name="name" />, <input name="newsletter" /> ]
● parent > child(直接孩子)
- /**
- * 在給定的父元素下匹配所有的子元素(直接孩子)。
- *
- * @parent(Selector) 任何有效選擇器
- * @child(Selector) 用以匹配元素的選擇器,並且它是第一個選擇器的子元素
- * @return jQuery Object(Array<Element>)
- */
- $("parent > child");
- // 例子:匹配表單中所有的子級 input 元素。
- <form>
- <label>Name:</label>
- <input name="name" />
- <fieldset>
- <label>Newsletter:</label>
- <input name="newsletter" />
- </fieldset>
- </form>
- <input name="none" />
- $("form > input") -> [ <input name="name" /> ]
● prev + next
- /**
- * 匹配所有緊接在 prev 元素後的 next 元素。
- *
- * @prev(Selector) 任何有效選擇器
- * @next(Selector) 一個有效選擇器並且緊接着第一個選擇器
- * @return jQuery Object(Array<Element>)
- */
- $("prev + next");
- // 例子:匹配所有跟在 label 後面的 input 元素。
- <form>
- <label>Name:</label>
- <input name="name" />
- <fieldset>
- <label>Newsletter:</label>
- <input name="newsletter" />
- </fieldset>
- </form>
- <input name="none" />
- $("label + input") -> [ <input name="name" />, <input name="newsletter" /> ]
● prev ~ siblings
- /**
- * 匹配 prev 元素之後的所有 siblings 元素。
- *
- * @prev(Selector) 任何有效選擇器
- * @siblings(Selector) 一個選擇器,並且它作爲第一個選擇器的同輩
- * @return jQuery Object(Array<Element>)
- */
- $("prev ~ siblings");
- // 例子:找到所有與表單同輩的 input 元素。
- <form>
- <label>Name:</label>
- <input name="name" />
- <fieldset>
- <label>Newsletter:</label>
- <input name="newsletter" />
- </fieldset>
- </form>
- <input name="none" />
- $("form ~ input") -> [ <input name="none" /> ]
● :animated
- /**
- * 匹配所有正在執行動畫效果的元素。
- *
- * @prev(Selector) 任何有效選擇器
- * @siblings(Selector) 一個選擇器,並且它作爲第一個選擇器的同輩
- * @return jQuery Object(Array<Element>)
- */
- // 例子:只有對不在執行動畫效果的元素執行一個動畫特效。
- <button id="run">Run</button><div></div>
- $("#run").click(function() {
- $("div:not(:animated)").animate({ left: "+=20" }, 1000);
- });
● :eq(index)
- /**
- * 匹配一個給定索引值的元素。
- *
- * @index (Number) 從 0 開始計數的索引值
- * @return jQuery Object(Element)
- */
- /*
- * 例子:查找表格的第二行。即在所有的 tr 中得到第二個 tr。此方法只會得到一個結果集。此方式拿不到每個
- * table 的第二行,拿到只是頁面所有 tr 中的第二個 tr。若想得到每個表格的第二行,需要用到 nth-child
- * 後續講到的 :gt, :lt, :first, :last, :even, :odd 都是這樣的邏輯
- */
- <table>
- <tr><td>Header 1</td></tr>
- <tr><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- <table>
- <tr><td>Header 1-1</td></tr>
- <tr><td>Value 1-1</td></tr>
- <tr><td>Value 2-1</td></tr>
- </table>
- $("tr:eq(1)") -> [ <tr><td>Value 1</td></tr> ]
- <table>
- <tr><td>Header 1</td></tr>
- </table>
- <table>
- <tr><td>Header 1-1</td></tr>
- <tr><td>Value 1-1</td></tr>
- <tr><td>Value 2-1</td></tr>
- </table>
- $("tr:eq(1)") -> [ <tr><td>Header 1-1</td></tr> ]
● :even
- /**
- * 匹配所有索引值爲偶數的元素,從 0 開始計數。
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找表格的 1, 3, 5 ... 行(即索引值 0, 2, 4 ... )。
- // 和 :eq 一樣,它是在頁面所有的元素中取 even。要取每個表格的 even 行,就不能像 :eq 一樣用 :nth-child 了,需要用到篩選:$(table).find(tr:even);
- <table>
- <tr><td>Header 1</td></tr>
- <tr><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- $("tr:even") -> [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
● dd
- /**
- * 匹配所有索引值爲奇數的元素,從 0 開始計數
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找表格的 2, 4, 6 ... 行(即索引值 1, 3, 5 ... )。
- // 和 :eq 一樣,它是在頁面所有的元素中取 odd。要取每個表格的 odd 行,就不能像 :eq 一樣用 :nth-child 了,需要用到篩選:$(table).find(tr:odd);
- <table>
- <tr><td>Header 1</td></tr>
- <tr><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- $("tr:odd") -> [ <tr><td>Value 1</td></tr> ]
● :first
- /**
- * 匹配找到的第一個元素。等價於 :eq(0)
- *
- * @return jQuery Object(Element)
- */
- // 例子:查找表格的第一行。
- <table>
- <tr><td>Header 1</td></tr>
- <tr><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- $("tr:first") -> [ <tr><td>Header 1</td></tr> ]
● :last
- /**
- * 匹配找到的最後一個元素。
- *
- * @return jQuery Object(Element)
- */
- // 例子:查找表格的最後一行。
- <table>
- <tr><td>Header 1</td></tr>
- <tr><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- $("tr:last") -> [ <tr><td>Value 2</td></tr> ]
● :gt(index)
- /**
- * 匹配所有大於給定索引值的元素。
- *
- * @index(Number) 從 0 開始計數的索引值
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找第 2, 3 行,即索引值是 1 和 2,也就是比 0 大。
- <table>
- <tr><td>Header 1</td></tr>
- <tr><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- $("tr:gt(0)") -> [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
● :lt(index)
- /**
- * 匹配所有小於給定索引值的元素。
- *
- * @index(Number) 從 0 開始計數的索引值
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找第 1, 2 行,即索引值是 0 和 1,也就是比 2 小。
- <table>
- <tr><td>Header 1</td></tr>
- <tr><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- $("tr:lt(2)") -> [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
● :header
- /**
- * 匹配如 h1, h2, h3 之類的標題元素。
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:給頁面內所有標題加上背景色。
- <h1>Header 1</h1>
- <p>Contents 1</p>
- <h2>Header 2</h2>
- <p>Contents 2</p>
- $(":header").css("background", "#EEE") ->
- [ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
● :not(selector)
- /**
- * 去除所有與給定選擇器匹配的元素。
- *
- * @selector(Selector) 用於篩選的選擇器
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有未選中的 input 元素。
- <input name="apple" />
- <input name="flower" checked="checked" />
- $("input:not(:checked)") -> [ <input name="apple" /> ]
● :contains(text)
- /**
- * 匹配包含給定文本的元素。
- *
- * @text(String) 一個用以查找的字符串
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有包含 "John" 的 div 元素。
- <div><span>John Re</span></div>
- <div>George Martin</div>
- <div>Malcom John Sinclair</div>
- <div>J. Ohn</div>
- $("div:contains('John')") -> [ <div><span>John Re</span></div>, <div>Malcom John Sinclair</div> ]
● :empty
- /**
- * 匹配所有不包含子元素或者文本的空元素。
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有不包含子元素或者文本的空元素。
- <table>
- <tr><td>Value 1</td><td></td></tr>
- <tr><td>Value 2</td><td></td></tr>
- </table>
- $("td:empty") -> [ <td></td>, <td></td> ]
● :has(selector)(text)
- /**
- * 匹配含有選擇器所匹配的元素的元素。
- *
- * @selector(Selector) 一個用於篩選的選擇器
- * @return jQuery Object(Array<Element>)
- */
- // 例子:給所有包含 p 元素的 div 元素添加一個 text 類。
- <div><span><p>Hello</p></span></div>
- <div>Hello again!</div>
- $("div:has(p)").addClass("text") -> [ <div class="text"><span><p>Hello</p></span></div> ]
● :parent
- /**
- * 匹配含有子元素或者文本的元素。
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有含有子元素或者文本的 td 元素。
- <table>
- <tr><td>Value 1</td><td></td></tr>
- <tr><td>Value 2</td><td></td></tr>
- </table>
- $("td:parent") -> [ <td>Value 1</td>, <td>Value 2</td> ]
● :hidden
- /**
- * 匹配所有的不可見元素,input 元素的 type 屬性爲 "hidden" 時也會被匹配到。
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有不可見的 tr 元素。
- <table>
- <tr style="display:none"><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- $("tr:hidden") -> [ <tr style="display:none"><td>Value 1</td></tr> ]
● :visible
- /**
- * 匹配所有的可見元素。
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有可見的 tr 元素。
- <table>
- <tr style="display:none"><td>Value 1</td></tr>
- <tr><td>Value 2</td></tr>
- </table>
- $("tr:visible") -> [ <tr><td>Value 2</td></tr> ]
● [attribute]
- /**
- * 匹配包含給定屬性的元素(若某個元素有這個屬性,可是值爲 "",那麼這個元素不將被包含進來)。
- *
- * @attribute(String) 屬性名
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有含有 id 屬性的 div 元素。
- <div>
- <p>Hello!</p>
- </div>
- <div id="test2"></div>
- $("div[id]") -> [ <div id="test2"></div> ]
● [attribute=value]
- /**
- * 匹配給定的屬性是某個特定值的元素。
- *
- * @attribute(String) 屬性名
- * @value(String) 屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含 "]" 時,用以避免衝突。
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有 name 屬性是 "newsletter" 的 input 元素。
- <input type="checkbox" name="newsletter" value="Hot Fuzz" />
- <input type="checkbox" name="newsletter" value="Cold Fusion" />
- <input type="checkbox" name="accept" value="Evil Plans" />
- $("input[name='newsletter']").attr("checked", true) -> [ <div id="test2"></div> ] ->
- [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />,
- <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
● [attribute!=value]
- /**
- * 匹配給定的屬性是不包含某個特定值的元素。
- *
- * @attribute(String) 屬性名
- * @value(String) 屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含 "]" 時,用以避免衝突。
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有 name 屬性不是 "newsletter" 的 input 元素。
- <input type="checkbox" name="newsletter" value="Hot Fuzz" />
- <input type="checkbox" name="newsletter" value="Cold Fusion" />
- <input type="checkbox" name="accept" value="Evil Plans" />
- $("input[name!='newsletter']").attr("checked", true) ->
- [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
● [attribute*=value]
- /**
- * 匹配給定的屬性是以包含某些值的元素。
- *
- * @attribute(String) 屬性名
- * @value(String) 屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含 "]" 時,用以避免衝突。
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有 name 包含 "man" 的 input 元素。
- <input name="man-news" />
- <input name="milkman" />
- <input name="letterman2" />
- <input name="newmilk" />
- $("input[name*='man']") ->
- [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
● [attribute^=value]
- /**
- * 匹配給定的屬性是以某些值開始的元素。
- *
- * @attribute(String) 屬性名
- * @value(String) 屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含 "]" 時,用以避免衝突。
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有 name 以 "news" 開始的 input 元素。
- <input name="newsletter" />
- <input name="milkman" />
- <input name="newsboy" />
- $("input[name^='news']") -> [ <input name="newsletter" />, <input name="newsboy" /> ]
● [attribute$=value]
- /**
- * 匹配給定的屬性是以某些值結尾的元素。
- *
- * @attribute(String) 屬性名
- * @value(String) 屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含 "]" 時,用以避免衝突。
- * @return jQuery Object(Array<Element>)
- */
- // 例子:查找所有 name 以 "letter" 結尾的 input 元素。
- <input name="newsletter" />
- <input name="milkman" />
- <input name="jobletter" />
- $("input[name$='letter']") -> [ <input name="newsletter" />, <input name="jobletter" /> ]
● [selector1][selector2][selectorN]
- /**
- * 複合屬性選擇器,需要同時滿足多個條件時使用。
- *
- * @selector1(Selector) 屬性選擇器
- * @selector2(Selector) 另一個屬性選擇器,用以進一步縮小範圍
- * @selectorN(Selector) 任意多個屬性選擇器
- * @return jQuery Object(Array<Element>)
- */
- // 例子:找到所有含有 id 屬性,並且它的 name 屬性是以 "man" 結尾的。
- <input id="man-news" name="man-news" />
- <input name="milkman" />
- <input id="letterman" name="new-letterman" />
- <input name="newmilk" />
- $("input[id][name$='man']") -> [ <input id="letterman" name="new-letterman" /> ]
● :first-child
- /**
- * 匹配第一個子元素。
- * :first 只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:在每個 ul 中查找第一個 li。
- <ul>
- <li>John</li>
- <li>Karl</li>
- <li>Brandon</li>
- </ul>
- <ul>
- <li>Glen</li>
- <li>Tane</li>
- <li>Ralph</li>
- </ul>
- $("ul li:first-child") -> [ <li>John</li>, <li>Glen</li> ]
● :last-child
- /**
- * 匹配最後一個子元素。
- * :last 只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:在每個 ul 中查找最後一個 li。
- <ul>
- <li>John</li>
- <li>Karl</li>
- <li>Brandon</li>
- </ul>
- <ul>
- <li>Glen</li>
- <li>Tane</li>
- <li>Ralph</li>
- </ul>
- $("ul li:last-child") -> [ <li>Brandon</li>, <li>Ralph</li> ]
● :nth-child(index/even/odd/equation)
- /**
- * 匹配其父元素下的第 N 個子元素或奇偶元素。
- * :eq(index) 只匹配一個元素,而這個將爲每一個父元素匹配子元素。
- * :nth-child 從 1 開始的,而 :eq() 是從 0 算起的!
- *
- * 可以使用:
- * nth-child(even);
- * nth-child(odd);
- * nth-child(3n);
- * nth-child(2);
- * nth-child(3n+1);
- * nth-child(3n+2);
- *
- * @index(Number) 要匹配元素的序號,從 1 開始
- * @return jQuery Object(Array<Element>)
- */
- // 例子:在每個 ul 查找第 2 個li。
- <ul>
- <li>John</li>
- <li>Karl</li>
- <li>Brandon</li>
- </ul>
- <ul>
- <li>Glen</li>
- <li>Tane</li>
- <li>Ralph</li>
- </ul>
- $("ul li:nth-child(2)") -> [ <li>Karl</li>, <li>Tane</li> ]
● nly-child
- /**
- * 如果某個元素是父元素中唯一的子元素,那它(子元素)將會被匹配。
- * 如果父元素中含有其他元素,那它(子元素)將不會被匹配。
- *
- * @return jQuery Object(Array<Element>)
- */
- // 例子:在 ul 中查找是唯一子元素的 li。
- <ul>
- <li>John</li>
- <li>Karl</li>
- <li>Brandon</li>
- </ul>
- <ul>
- <li>Glen</li>
- </ul>
- $("ul li:only-child") -> [ <li>Glen</li> ]
● form
- <form>
- <input type="text" />
- <input type="checkbox" />
- <input type="radio" />
- <input type="image" />
- <input type="file" />
- <input type="submit" />
- <input type="reset" />
- <input type="password" />
- <input type="hidden" />
- <input type="button" />
- <select><option /></select>
- <textarea></textarea>
- <button></button>
- </form>
- // 匹配按鈕?
- $(":button") -> [ <input type="button" />,<button></button> ]
- // 匹配複選框
- $(":checkbox") -> [ <input type="checkbox" /> ]
- // 匹配文件域
- $(":file") -> [ <input type="file" /> ]
- // 匹配不可見元素,或者 type 爲 hidden 的元素
- $("input:hidden") -> [ <input type="hidden" /> ]
- // 匹配圖像域
- $("input:image") -> [ <input type="image" /> ]
- // 匹配 input, textarea, select 和 button 元素
- $(":input") -> 全部
- // 匹配密碼框
- $(":password") -> [ <input type="password" /> ]
- // 匹配單選按鈕
- $(":radio") -> [ <input type="radio" /> ]
- // 匹配重置按鈕
- $(":reset") -> [ <input type="reset" /> ]
- // 匹配提交按鈕
- $(":submit") -> [ <input type="submit" /> ]
- // 匹配單行文本框
- $(":text") -> $(":submit") -> [ <input type="text" /> ]
● form object attribue
- <form>
- <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
- <input type="checkbox" name="newsletter" value="Weekly" />
- <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
- <input name="email" disabled="disabled" />
- <select>
- <option value="1">Flowers</option>
- <option value="2" selected="selected">Gardens</option>
- <option value="3">Trees</option>
- </select>
- </form>
- // 匹配被選擇的元素(複選框、單選框等,不包括 select 中的 option)
- $("input:checked") ->
- [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />,
- <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
- // 匹配可用元素
- $("input:enabled") ->
- <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
- <input type="checkbox" name="newsletter" value="Weekly" />
- <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
- // 匹配不可用元素
- $("input:disabled") -> [ <input name="email" disabled="disabled" /> ]
- // 匹配選中的 option 元素
- $("select option:selected") -> [ <option value="2" selected="selected">Gardens</option> ]