jquery 選擇器(1) 基本丶層疊丶層次選擇器

基本選擇器

選擇器	實例	選取
*	$(“*”)	所有元素
id	$(“#ppid”)	id爲ppId的元素
.class	$(“.name”)	所有clss爲name的元素
element	$(“a”)	所有的a標籤
.class.class	$(“.red.blod”)	所有class=”red” 且class=”blod” 的元素
屬性選擇器	Input[type=‘text’]	所有type爲text的input

層疊選擇器

實例	選取
$(“form input”)	選擇所有的form元素中的input元素
$(“#main > *”)	選擇id值爲main的所有的子元素
$(“label + input”)	選擇所有的label元素的下一個input元素節點，經測試選擇器返回的是label標籤後面直接跟一個input標籤的所有input標籤元素
$(“#prev ~ div”)	同胞選擇器，該選擇器返回的爲id爲prev的標籤元素的所有的屬於同一個父元素的div標籤

---

選擇器符號:
=(指定)，~=(包含指定詞彙)，|=(整詞開頭),^=(開頭),$=(結尾),*=(包含)

---

層次選擇器

### parent > child（直系子元素）

$(document).ready(function () {
        // 選取div下的第一代span元素，將字體顏色設爲紅色
        $('div > span').css('color', '#FF0000');
});

例如下面的代碼，只有第一個span會變色，第二個span不屬於div的一代子元素，顏色保持不變。

<div>
    <span>123</span>
     <p>
      <span>456</span>
     </p>
</div>

prev + next（下一個兄弟元素，等同於next()方法）

$(document).ready(function () {
    // 選取class爲item的下一個div兄弟元素
    $('.item + div').css('color', '#FF0000');
    // 等價代碼
    $('.item').next('div').css('color', '#FF0000');
});

例如下面的代碼，只有123和789會變色

<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

prev ~ siblings（prev元素的所有兄弟元素，等同於nextAll()方法）

$(document).ready(function () {
    // 選取class爲inside之後的所有div兄弟元素
    $('.inside ~ div').css('color', '#FF0000');
    // 等價代碼
    //$('.inside').nextAll('div').css('color', '#FF0000');
});

例如下面的代碼，G2和G4會變色

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>