依您的需求量身訂做,提供投資型、保障型
退休型等多元化保險商品,專業有保障
招牌專業居家清潔
免費到府估價,清潔養護馬上搞定

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] jQuery Selector 選取器 方式 綜合整理

房東:阿凱
發表時間:2015-01-07
[檢舉]






寫 DHTML 的互動網頁,要對網頁中的內容做變化,首先就是得把想要變化的內容給選取出來,而這些內容通常都是 HTML 元素,也就是 HTML 標籤(Tag),例如:<p> <div> <span> <ul> <li>...,可以是某一個標籤或是一堆標籤的組合。在這裡我們都稱之為 HTML 元素 ( Element )。

jQuery 有非常多的選取元素方式,大致上可以分為三大類:CSS, XPath 和 jQuery 自訂的選取方式。不論是使用哪種選取方式,通通都是使用 $()這個語法。

等等一邊閱\讀的時候,你可以一邊使用這個互動式的 jQuery 選取方式測試頁面,跟著來測試看看。它的使用方式很簡單,在最上方的文字欄位中輸入選取的規則,也就是原本寫在 $() 括號中的內容,但不要包含 $(),然後左半邊就會將選取出來的元素給反白。你也可以在右半邊自行修改 HTML 原始碼,像是加上新的標籤或是 CSS 類別、id 之類的,左半邊就會自動跟著變化,繼續在上方輸入不同的選取規則來測試。

1. 簡單選取器


先來看最常用也是最簡單的選取方式,基本上就和 CSS 的語法是一樣的:

注意:底下的描述都先省略的 $(),你在使用的時候要記得加上 $(),而且括號中若是文字字串要記得加上雙引號,例如 $("p")


  • *:選取任何元素。

  • HTML標籤名稱:選擇指定標籤的 HTML 元素,例如 $("p") 會選擇網頁中所有的 <p>。

  • .CSS類別名稱:選擇指定類別的 HTML 元素,注意有個點。例如 $(".myClassName") 會選擇網頁中所有擁有 myClassName 類別的元素。你也可以再加上 HTML 標籤名稱,也就是將兩種選取器組合在一起,例如 $("div.myClassName") 會選擇所有 <div class="myClassName"> 的 div 元素,而沒有這個類別名稱的 div 就不會被選取。

  • #ID名稱:選擇指定 ID 的 HTML 元素,注意是個井字號。例如 $("#myid") 會選擇網頁中 id 名稱叫做 myid 的元素。同樣的可以在井字號前面加上 HTML 標籤名稱,例如 $("div#myid")但這樣的寫法式沒必要的,基本上同一頁裡面 id 名稱是不會重複的,也最好不要重複,所以應該只會選取出一個元素。

  • 選取器1,選取器2,選取器N:將多個選取器集合在一起,中間用逗號分隔,和CSS類似。會一次選擇出符合這些選取器的所有元素,只要符合其中某一個就會被選出。


 

2. 層級選取器


兩個(或以上)元素組合的選取方式,也是 CSS 選取方式的一種:


  • 第一個元素 第二個元素:兩個元素中間空一格。例如 $("div li") 會選取出包含在 div 底下的所有 li 元素,不管中間相隔幾層都沒關係。若是 li 的任何一個外層都沒 div 的話就不會被選取,也就是說 li 必須是 div 的子孫

  • 第一個元素 > 第二個元素:比剛剛多個大於符號。例如 $("ol > li") 會選取出所有 li,而且這些 li 的 "父親" 必須是 ol,若中間還相隔了幾層就不算了!第二個元素必須是第一個元素的孩子(而不是孫子或曾孫...)。

  • 第一個元素 + 第二個元素:兩個元素在同一層(是兄弟關係),而且第二個元素必須緊連著第一個元素。例如大哥和二哥可以,二哥和三哥可以,大哥和三哥就選取不到了。你可以在互動式的 jQuery 選取方式測試頁面中輸入 h1 + div 來測試看看就知道效果了。

  • 第一個元素 ~ 第二個元素:兩個元素在同一層(是兄弟關係),但不需要緊連著。一樣你可以在測試頁面中輸入 h1 ~ div 來測試看看。


也可以用三個或更多元素來做層級的選取,例如:$("ol > li span + a")。這些規則看起來好像有點小複雜,不過若你熟悉 CSS 的語法就知道和 CSS 的選取方式是相同的。

 

3. 子元素選取器


如果想選擇子元素,除了剛剛所說的方式,還有更方便作法,和 CSS 語法也是十分類似的:


  • :first-child:選取指定元素,而且它是它父元素的第一個孩子,不管它的父元素叫什麼。例如 $("li:first-child") 會選取第一個 li。

  • :last-child:選取指定元素,而且它是它父元素的最後一個孩子,不管它的父元素叫什麼。例如 $("li:last-child") 會選取最後一個 li。

  • :only-child:選取指定元素,而且它必須是父元素唯一的一個孩子,不管它的父元素叫什麼。

  • :nth-child(數字):選取指定元素,而它是父元素的第 n 個孩子,n 就是那個數字。例如 $("li:nth-child(5)")


 

4. 定位篩選選取器


如果要根據編號或排列的順序來選取特定位置上面的元素,或是過濾掉特定的元素,可以使用這些選取器:


  • :first:符合的第一個元素,例如 $("tr:first") 會選取表格的第一行。

  • :last:符合的最後一個元素,例如 $("tr:first") 會選取表格的最後一行。

  • :not:過濾掉所有符合指定選擇器的元素,例如 $("input:not(:checked)") 會選取所有未勾選的 input 元素。

  • :even:索引值為偶數的元素,從 0 開始計算。例如 $("tr:even") 會選取表格的第 1, 3, 5 ... 行(索引值是 0, 2, 4)。

  • :odd:索引值為奇數的元素,從 0 開始計算。例如 $("tr:odd") 會選取表格的第 2, 4, 6 ... 行。

  • :eq:索引值與指定的值相等的元素,例如 $("tr:eq(0)") 會選取表格的第 1 行。

  • :gt:索引值大於指定值的元素,例如 $("tr:gt(0)") 會選取表格的第 2 行和其以後的行。

  • :lt:索引值小於指定值的元素。

  • :header:選取如 h1, h2, h3... 標題元素。

  • :animated:選取所有正在執行動畫效果的元素。


 

5. 內容篩選選取器


根據元素內的文字內容,或是子元素來做篩選的選取方式。


  • :contains:元素內是否有包含指定的文字,例如 $("h2:contains(\'選取器\')") 會選出標題文字內含有 "選取器" 這幾個字的 h2 元素。

  • :has:元素內是否有包含指定的元素,例如 $("p:has(span)") 會選出內容中包含 span 元素的 p 元素。

  • :empty:選取指定元素,而且它必須沒有任何子元素,也沒有內容文字,即文字節點 (text node) 也不能有。

  • :parent:選取有子元素或內容文字,是其他元素父親的元素,即內容不是空的,和 :empty 剛好相反。例如 $("li:parent"),只會選出內容不是空的 <li>。


 

6. 顯示性選取器


根據元素是顯示或隱藏來選取。


  • :hidden:選出看不見、或類型為 hidden 的所有指定元素,例如 $("div:hidden")

  • :visible:選出看得見的所有指定元素,例如 $("p:visible")


 

7. 屬性選取器


還可以根據元素中是否有某個屬性來做選取,都會使用中括號作為區分:


  • [屬性名稱]:含有指定屬性名稱的元素,例如 $("p[class]") 會選取有 class 這個屬性的所有 <p>。

  • [屬性名稱=屬性值]:含有指定屬性名稱的元素,而且屬性值必須和指定的值完全相等,例如 $("p[class=theClassName]")

  • [屬性名稱!=屬性值]不含有指定屬性名稱,或是屬性值不等於指定值的元素。


若要選取含有指定的屬性名稱,但值不相等時,可以使用 [屬性名稱]:not[屬性名稱=屬性值]


  • [屬性名稱^=屬性值]:含有指定屬性名稱的元素,而且那個屬性值的 "開頭" 必須是指定的值,例如 $("p[class^=the]")

  • [屬性名稱$=屬性值]:含有指定屬性名稱的元素,而且那個屬性值的 "結尾" 必須是指定的值,例如 $("p[@class$=Name]")

  • [屬性名稱*=屬性值]:含有指定屬性名稱的元素,而且那個屬性值的任何部分必須 "包含" 指定的值,例如 $("p[@class*=ass]")

  • [屬性選取器1][屬性選取器2][屬性選取器N]:組合選取器,可以在需要同時滿足多個條件時使用。


 

8. 表單選取器


這些是 jQuery 自訂虛擬類別選擇器,可以用來選取各種表單 ui 元素。


  • :input:選取所有 <input> 元素。

  • :text:選取所有單行文字欄位。

  • :password:選取所有密碼欄位。

  • :radio:選取所有圓鈕。

  • :checkbox:選取所有核取方塊。

  • :submit:選取所有送出表單按鈕。

  • :image:選取所有 <input type="image"> 的元素。

  • :reset:選取所有重設表單按鈕。

  • :button:選取所有按鈕。

  • :file:選取所有檔案選擇欄位。

  • :hidden:選取所有隱藏欄位。


 

9. 表單狀態選取器


根據表單元素的屬性,是否勾選或啟用來做選取。


  • :enabled:選取指定表單 ui 元素,而且它不是 disabled 失效的。

  • :disabled:選取指定表單 ui 元素,而且它不是 enabled 啟用的。

  • :checked:選取指定表單 ui 元素,而且它已經被選擇,例如圓鈕和核取方塊。

  • :selected:選取指定表單 ui 元素,而且它已經被選擇,例如下拉選單中的一個或多個選項。


 

 

了解有哪些選取器之後,別忘記看看這個小範例以及選擇器的最佳化應用








  • 贊助網站       

    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!
    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務



  •  共 0 人回應

    姓名:
    佈告內容: