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:

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" noshade>

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" noshade>
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" noshade>
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 >

This is a <div> 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" /> 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" /> 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" /> 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" /> 4