常规选择器

1 <div id='box' class = 'pox'>常规选择器</div>

一、简单选择器

1、ID选择器：

1 $(function(){
2 
3 　　$('#box').css('color','red');
4 
5 })

2、元素选择器：

1 $(function(){
2     $('div').css('color','red');
3 })

3、类（class）选择器：

1 $(function(){
2     $('.pox').css('color','red');
3 })

二、进阶选择器

1 <div>进阶选择器</div>
2 <p>进阶选择器</p>
3 <strong>进阶选择器</strong>

 

 

 

1、群组选择器：

 

1 $(function(){
2     $('div,p,strong').css('color','red'); //所有div，p，strong标签都变成红色
3 })

 

 

 

 

 

2、后代选择器：

 

1 $(function(){
2     $('ul li a').css('color','red')；//ul下的li下的a标签变成红色
3 })

 

 

3、通配选择器：

1 $(function(){
2    $('*').css('color','red') //所有的
　　　$('ul li *').css('color','red') //ul li下所有的
3 })

4、多个class选择器

1 <div class = 'box pox'>多个class选择器</div>

1 $(function(){
2     $('.box.pox').css('color','red')
3 })

三、高级选择器

1、后代选择器

 1 <div id = 'box'>
 2     <p>p</p>
 3     <p>p</p>
 4     <p>p</p>
 5     <p>p</p>
 6     <div>
 7          <p>p</p>
 8          <p>p</p>
 9          <p>p</p>
10          <p>p</p>
11     </div>
12 </div>    

1 $(function(){
2    $('#box p').css('color','red') //普通方法
3    //find()
4    $('"box').find('p').css('color','blue');
5 })

2、子选择器

1 $(function(){
2    $('box>p') .css('color','blue');//只选择box的儿子
3    //children() 
4    $('#box').children('p').css('color','red') ;
5 })

3、next选择器

1  //box 后面的同级第一个p标签，如果中间隔着一个标签则失效。
2  $(function(){
3     $('#box+p').css('color','blue');
4     $('#box~p').css('','');// box后面的所有同级标签，即使隔着标签页没关系
5     // next()方法，nextAll()
6     $('#box') .next('p').css('color','red'); 
7     $('#box') .nextAll('p').css('color','red');//box后面的所有同级标签，即使隔着标签页没关系 
8  })