[jQuery] Selector

(1) Item name, class, id

item name: div   $("div")
class: .div      $(".div")
ID: #div         $("#div")

eg:

$(function(){
    $("div").css('color', 'red');
});

(2) 群组 后代 通配

群组 div,span,em    $("div,span,em")
后代 div span       $("div span")
通配 *              $("*")

---

(3) 后代 子选择 直接兄弟 后面所有兄弟

 div span{}    $('div span')
 div > span{}  $('div span') jQuery兼容 解决IE6问题

 div+span      $('div+span')
 div~span      $('div~span') div后面所有同级span

 除了后代选择器外, 其他三种高级选择器是不支持IE6的，而jQuery是兼容IE6的。

---

(4) find() children() next() nextAll()

find()

 后代： div span{} 包含儿子 孙子 ......
       可以使用

$("div").find("span")

eg:

  <div>
    <p>
        <em>jessica</em>
        <span>lin</span>
    </p>
    <span>krystal</span>
  </div>

---

children()

  子选择 div > span{} 只是儿子

$("div").children('span')

eg:

  <div>
    <p>
        <em>jessica</em>
        <span>lin</span>
    </p>
    <span>krystal</span>
  </div>

$(function(){
    $("div").children('span').css('color', 'red');
});

---

next()

    直接兄弟
    div + span

<div>
    <p>
        <em>jessica</em>
        <span>lin</span>
        <span>j</span>
        <span>bv</span>
    </p>
    <span>krystal</span>
  </div>

$(function(){
    $("em").next('span').css('color', 'red');
});

---

nextAll()

    所有兄弟
    div ~ span

$(function(){
    $("em").nextAll('span').css('color', 'red');
});

---

---

(5) prev prevAll next nextAll prevUntil nextUntil siblings

jQuery 提供的方法 find() next() nextAll() children() 运行的速度要快于高级选择器
高级选择器通过解析字符串来获取节点对象， 而普通方法是通过直接获取， 有快慢的差异