jQuery基础教程之选择器

jQuery基础教程之选择器

一、元素选择

1.通配选择符 * Q

    $("*")

2.标签选择符 div

    $("div")

3.ID选择符 #id

<div id="eid"></div>

    $("#eid")

4.class选择符 .class

<div class="item"></div>

  $(".item")

二、关系选择符

    <div class="list">
      <div class="item a">a</div>
      <div class="item">b</div>
      <div class="item">
        <div>c</div>
        <div class="child-list">
          <div class="item">d</div>
          <div class="item">e</div>
          <div class="item">f</div>
        </div>
      </div>
    </div>

包含选择符(E F) 所有子集

$(".list .item") 匹配6个

子选择符(E>F) 只有一级子集

$(".list>.item") 匹配3个

相邻选择符(E+F) 只有隔壁的同级 令居

$(".a+.item") 结果为b

兄弟选择符(E~F) 同级都是

$(".a~.item") 结果为b、c

三、属性选择符

E[att] 匹配包含给定属性的元素

    <div title="test2"></div>
    $("[title]")
    $("div[title]")

E[att="val"] 匹配给定的属性是某个特定值的元素

    <div title="test"></div>
    $("div[title='test']")

四、伪类选择符

:even 匹配所有索引值为偶数的元素

      $("tr:even")

:odd 匹配所有索引值为奇数的元素

      $("tr:odd")

:eq(index) 匹配一个给定索引值的元素

      $("tr:eq(1)")

:gt(index) 匹配所有大于给定索引值的元素

      $("tr:gt(0)")

:lt(index) 匹配所有小于给定索引值的元素

      $("tr:lt(2)")

:first 获取第一个元素

      $('li:first');

:last() 获取最后个元素

      $('li:last')

:first-child 匹配所给选择器( :之前的选择器)的第一个子元素

      $("ul li:first-child")

:last-child 匹配最后一个子元素

      $("ul li:last-child")

:nth-child 匹配其父元素下的第N个子或奇偶元素，不是索引值

$("ul li:nth-child(2)")

$("ul li:nth-child(2n)") 元素的第几个

$("ul li:nth-child(2n+1)") 元素的第几个

:checked

匹配所有选中的被选中元素 radio checkbox

prop