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>