jQuery选择器使用及举例

function fun1(){

1.组合选择器(可以用来设置多个标签,选择器)

$('h1,h2,p').css('color','blue');//(1),(2),(3),(9)变色

2.后代选择器 (所有后代)

$('div span').css('color','cyan');//(5),(6),(7)变色

3.层次选择器

3.1子选择器(直接后代)

$('div>span').css('color','green');//(5),(7)变色.因为(8)中有p标签,因此(8)中span不是div的直接后代

3.2div后面的一个同级span

$('div+span').css('color','red');//(8)变色

3.3div后面的所有同级span都能找到

$('div~span').css('color','purple');//(8),(9),(10),(11)变色

3.4div的所有同级span

$('div~span').css('color','yellow');//(4),(8),(9),(10),(11)变色

3.5div前面的一个同级span(紧挨着div的)

$('div').prev('span').css('color','pink')//(4)变色

}

 

 

<h1>我请你吃饭</h1>//(1)
<h2>你带着朋友</h2>//(2)
<p>你朋友带着钱</p>//(3)
<span>哈哈哈</span>//(4)
<div>
<span>北京</span>//(5)
<p><span>湖南</span></p>//(6)
<span>上海</span>//(7)
</div>
<span>天津</span>//(8)
<span>河南</span>//(9)
<span>海南</span>//(10)
<span>三亚</span>//(11)
<input type="button" name="" value="触发" onclick="fun1()" id="">