您现在的位置: 365建站网 > 365学习 > JQuery CSS 基本选择器 详解

JQuery CSS 基本选择器 详解

文章来源:365jz.com     点击数:1460    更新时间:2009-09-24 22:28   参与评论

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

声明     $("*")

image


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

声明     $("input")

image


E F         Matches all elements with tag name F that are descendents of E. (匹配tag name 为F,作为E的后代节点的所有元素)

声明     $("ul  a")

image

对应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 的直接子节点

image

对应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>


image 

对应的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元素

image

对应的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)")

image

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

image

对应的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的属性名

image

对应的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")

image 

对应的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]")

image 

对应的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]")

image

对应的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]")

image

对应的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]")

image

对应的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]")

image

对应的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


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (1460人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------