常规选择器

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

一、简单选择器

1、ID选择器：

$(function(){

　　$('#box').css('color','red');

})

2、元素选择器：

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

3、类（class）选择器：

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

二、进阶选择器

<div>进阶选择器</div>
<p>进阶选择器</p>
<strong>进阶选择器</strong>

1、群组选择器：

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

2、后代选择器：

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

3、通配选择器：

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

4、多个class选择器

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

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

三、高级选择器

1、后代选择器

<div id = 'box'>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <div>
         <p>p</p>
         <p>p</p>
         <p>p</p>
         <p>p</p>
    </div>
</div>    

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

2、子选择器

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

3、next选择器

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