jQuery的选择器

一、基本选择器

1.$("#btn") id选择器，如选择id为btn的元素

2 .$(".btn") class选择器，如选择class为btn的元素

3.$(“input”) 标签选择器，如选择名字为input的所有元素

4.$("*") 选择所有元素

5.$(“input,#btn,.btn”) 其他选择器，如选择标签名为input、id为btn和class为btn的所有元素

<div id="btn">id为btn的div<p>span标签</p></div>
<div class="btn">class为btn的div<p>span标签</p></div>
<div class="btn">class为btn的div<p>span标签</p></div>
<div class="one">class为one的div</div>
<div id="one">id为one的div</div>

<script src="jquery-1.11.3.js"></script>
<script>
    $('#btn').css({backgroundColor:'yellow'})
    $('.btn').css({backgroundColor:'red'})
    $('p').css({backgroundColor:'blue'})
    $('*').css({fontSize:'12px'})
    $('#one,.one').css({backgroundColor:'green'})
</script>

二、层次选择器

1.$(“body div”) 选择body中所有的div元素

2.$(“body > div”) 选择body中子元素是div的元素

3.$("#one + div") 选择id为one的下一个div元素(紧邻的下一个)

4.$("#one ~ div") 选择id为one的元素后面的所有div元素

<div id="btn">id为btn的div<p>span标签</p></div>
<div class="btn">class为btn的div<p>span标签</p></div>
<div class="btn">class为btn的div<p>span标签</p></div>
<div class="one">class为one的div</div>
<div id="one">id为one的div</div>


<script src="jquery-1.11.3.js"></script>
<script>
    $('body p').css({backgroundColor:'yellow'})
    $('body > div').css({fontSize:'18px'})
    $('#btn + .btn').css({backgroundColor:'blue'})
    $('#btn ~ .one').css({backgroundColor:'green'})
</script>

三、基本筛选器

1.$(“div:first”) 选择第一个div元素

2.$(“div:last”) 选择最后一个div元素

3.$(“div:not(.one)”) 选择class不为one的所有div元素

4.$(“div:even”) 选择索引值为偶数的div元素

5.$(“div:odd”) 选择索引值为奇数的div元素

6.$(“div:gt(3)”) 选择索引值为大于3的div元素

7.$(“div:eq(3)”) 选择索引值为等于3的div元素

8.$(“div:lt(3)”) 选择索引值为小于3的div元素

9.$(":header") 选择所有的标题元素

10.$(":animated") 选择当前正在执行动画的所有元素

<div id="btn">id为btn的div<p>p标签</p><h3>h3标签</h3></div>
<div class="btn">class为btn的div<p>p标签</p><h3>h3标签</h3></div>
<div class="btn">class为btn的div<p>p标签</p><h3>h3标签</h3></div>
<div class="one">class为one的div<p>p标签</p></div>
<div id="one">id为one的div</div>


<script src="jquery-1.11.3.js"></script>
<script>
    $('div:first').css({backgroundColor:'yellow'})//第一个div
    $('div:last').css({backgroundColor:'red'})//最后一个div
    $('div:not(#btn,#one)').css({backgroundColor:'aqua'})//id不是btn、one的所有div
    $('p:even').css({backgroundColor:'blue'})//索引值为奇数的p标签
    $('p:odd').css({backgroundColor:'gray'})//索引值为偶数的p标签
    $('div:gt(2)').css({fontSize:'20px'})//索引值大于2的所有div
    $('div:eq(2)').css({fontSize:'16px'})//索引值等于2的所有div
    $('div:lt(2)').css({fontSize:'12px'})//索引值小于2的所有div
    $(':header').css({backgroundColor:'green'})//所有标题标签
</script>

四、内容选择器

1.$(“div:contains(‘di’)”) 选择含有文本‘di’的div元素

2.$(“div:empty”) 选择不包含子元素(或者文本元素)的div空元素

3.$(“div:has(input)”) 选择含有input标签的div元素

4.$(“div:parent”) 选择含有子元素(或者文本元素)的div元素

<div id="btn">id为btn的div<p>p标签1</p><h3>h3标签</h3></div>
<div class="btn">class为btn的div<p>p标签2</p><h3>h3标签</h3></div>
<div class="btn">class为btn的div<p>p标签2</p><h3>h3标签</h3></div>
<div class="one"></div>
<div id="one"></div>


<script src="jquery-1.11.3.js"></script>
<script>
    $('div:parent').css({backgroundColor:'red'})//没有子元素或者文本元素的div
    $('div:empty').css({backgroundColor:'yellow'})//有子元素或者文本元素的div
    $('p:contains("2")').css({backgroundColor:'gray'})//文本中包含2的所有p标签
    $('div:has(p)').css({fontSize:'12px'})//包含有p标签的div
</script>

五、子元素选择器

1.$(“div :nth-child(2)”) 选取每个的div父元素下的第2个子元素

2.$(“div :first-child”) 选取每个div父元素下的第一个子元素

3.$(“div :last:child”) 选取每个div父元素下的最后一个子元素

4.$(“div :only-child”) 如果div父元素下的仅仅只有一个子元素，那么选中这个子元素

 <div id="btn">id为btn的div<p>p标签1</p><h3>h3标签</h3></div>
 <div class="btn">class为btn的div<p>p标签2</p><h3>h3标签</h3></div>
 <div class="btn">class为btn的div<p>p标签2</p><h3>h3标签</h3></div>
 <div class="one">class为one的div<p>p标签2</p></div>
 <div id="one">id为one的div</div>
 

 <script src="jquery-1.11.3.js"></script>
 <script>
     $('div :first-child').css({backgroundColor:'red'})//父元素元素div下的第一个子元素
     $('div :last-child').css({backgroundColor:'yellow'})//父元素元素div下的最后一个子元素
     $('div :only-child').css({backgroundColor:'gray'})//父元素元素div下的唯一一个子元素
     $('div:nth-child(5)').css({backgroundColor:'green'})//页面中div标签中的第五个div
 </script>