JQuery CSS 基本選取器 詳解

*         Matches any element.( 匹配任何元素 )

聲明     $("*")

E         Matches all element with tag name E. ( 匹配tag name為 E 的所有元素 )

聲明     $("input")

E F         Matches all elements with tag name F that are descendents of E. (匹配tag name 為F,作為E的 後代節點的所有元素 )

聲明     $("ul  a")

對應Html:

<ul class="myList">
  <li><a href="http://jquery.com">jQuery supports</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
  </li>
  <li>jQuery also supports
    <ul>
      <li>Custom selectors</li>
      <li>Form selectors</li>
    </ul>
  </li>
</ul>

E>F         Matches all elements with tag name F that are direct children of E.(匹配tag name 為F，作為E的直接子節點的所有元素)

聲明     $("ul>li")

注意     $("ul>a")  這樣是錯誤的; 因為 a 不是 ul 的直接子節點

對應Html:

<ul class="myList">
  <li><a href="http://jquery.com">jQuery supports</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
  </li>
  <li>jQuery also supports
    <ul>
      <li>Custom selectors</li>
      <li>Form selectors</li>
    </ul>
  </li>
</ul>

E+F         Matches all elements F immediately preceded by sibling E.（匹配所有緊接在 E 元素後的 F 元素 –-- E和F 緊挨 著）

聲明         $("label+input") 

注意          必須是閉口的tag 元素（如下Blue 註記處 ）, 而且取得是所有的F元素

錯誤認識    $("div+label")是錯誤的

               因為對應的Html不是緊挨著的關係是子與父的關係

Html        <div><label>Some images:</label></div>

 

對應的Html:

<div>
    <label>Radio group:</label>
    <input type="radio" name="radioGroup" id="radioA" value="A"/> A
    <input type="radio" name="radioGroup" id="radioB" value="B"/> B
    <input type="radio" name="radioGroup" id="radioC" value="C"/> C
</div>

E~F        Matches all elements F preceded by any sibling E. （匹配 E 元素之後的所有 F 元素 –---  E和F可以 不緊挨 著）

聲明        $("div~button") 

             或 $("div~Tabel")

注意          必須是閉口的tag 元素（如下Blue 註記處 ）, 而且取得是所有的F元素

對應的Html:

  <div>
    <label>Radio group:</label>
    <input type="radio" name="radioGroup" id="radioA" value="A"/> A
    <input type="radio" name="radioGroup" id="radioB" value="B"/> B
    <input type="radio" name="radioGroup" id="radioC" value="C"/> C
  </div>
  <tabel>

    <tr><td></td></tr>

    <tr><td></td></tr>

  </tabel>
  <button type="submit" id="submitButton">Submit</button>

E:has(F)    Matches all elements with tag name E that have at least one descendent with tag name F.

                 (匹配tag name為 E 、至少有一個標籤名稱為 F 的後代節點的所有元素)

聲明        $("div:has(img)")

          或 $("ul:has(ul)")

注意         有has 就會有 not ；所以表示not的關係可以聲明為

              $("div:not(:img)")

Has 圖  $("div:has(img)")

Not 圖  $("div:not(:img)")

對應的Html:

<div>
  <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
  <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
  <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
  <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
  <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
  <img src="images/image.6.jpg" id="coffeePot"/>
</div>

E.C        Matches all elements E with class name C. Omitting E is the same as *.C. (匹配帶有類名 C 的所有元素 E ，等效為 *.C )

聲明        $("ul.myList")

         或 $("*.myList")

注意        類名就是html的class的屬性名稱或者aspx的CssClass的屬性名稱

對應的Html：

<ul class="myList">
  …

</ul>

E#I        Matches element E with id of I. Omitting E is the same as *#I. (匹配id屬性值為I的無素E； #I 等效為 *#I)

聲明        $("div#someDiv")

 

對應的Html:

<div id="someDiv">

This is a &lt;div&gt; with an id of <tt>someDiv</tt>

</div>

E[A]        Matches all elements E with attribute A of any value. (匹配帶有屬性A的所有元素E  -- 不管屬性A的值是什麼)

聲明        $("div[title]")  或 $("Input[Type]")

 

對應的Html:

<div title="myTitle1"><span>Hello</span></div>
<div title="myTitle2"><span>Goodbye</span></div>

E[A=V]        Matches all elements E with attribute A whose value is exactly V. （匹配所有元素E，其屬性A的值為V）

聲明              $("input[type=radio]")

對應的Html:

    <input type="radio" name="radioGroup" id="radioA" value="A"/> A
    <input type="radio" name="radioGroup" id="radioB" value="B"/> B
    <input type="radio" name="radioGroup" id="radioC" value="C"/> C

E[A^=V]        Matches all elements E with attribute A whose value begins with V. (匹配所有元素E，其屬性A的值以V開頭)

聲明                $("input[type^=rad]")

對應的Html:

    <input type="radio" name="radioGroup" id="radioA" value="A"/> A
    <input type="radio" name="radioGroup" id="radioB" value="B"/> B
    <input type="radio" name="radioGroup" id="radioC" value="C"/> C

E[A$=V] Matches all elements E with attribute A whose value ends with V. (匹配所有元素E，其屬性A的值以V結尾)

聲明                $("input[type$=ox]") 或  $("a[href$=.pdf]")

對應的Html:

<input type="checkbox" name="checkboxes" id="checkbox1" value="1"/> 1
    <input type="checkbox" name="checkboxes" id="checkbox2" value="2"/> 2
    <input type="checkbox" name="checkboxes" id="checkbox3" value="3"/> 3
    <input type="checkbox" name="checkboxes" id="checkbox4" value="4"/> 4

E[A*=V] Matches all elements E with attribute A whose value contains V. (匹配所有元素E，其屬性A的值包含V)

聲明                $("input[type*=eck]")

對應的Html:

<input type="checkbox" name="checkboxes" id="checkbox1" value="1"/> 1
    <input type="checkbox" name="checkboxes" id="checkbox2" value="2"/> 2
    <input type="checkbox" name="checkboxes" id="checkbox3" value="3"/> 3
    <input type="checkbox" name="checkboxes" id="checkbox4" value="4"/> 4