jQuery（二）高級選擇器

jQuery高級選擇器

1、prev() & prevAll()

//
$('#box').prev('p').css('color','red');    //選取同級上一個元素
$('#box').prevAll('p').css('color','red'); //選取id='box'的元素之前的所有同級p元素

2、prevUntil() & nextUntil()

//同級上非指定元素選定，遇到p則停止（選擇id='box'元素和p元素之間的元素）
$('#box').prevUntil('p').css('color','red');   
//同級下非指定元素選定，遇到則停止（選擇id='box'元素和p元素之間的元素）
$('#box').nextUntil('p').css('color','red');   

3、siblings()集成了prevAll()好nextAll()的功能

//同級上下所有元素選定
$('#box').siblings('p').css('color','red');    
//          ||  等價於
$('#box').prevAll('p').css('color','red'); 
$('#box').nextAll('p').css('color','red'); 

4、過濾選擇器

//選擇元素li的第三個元素，eq等於|gt大於|lt小魚
$('li:eq(2)').css('background','#ccc');    
//或
$('li').eq(2).css('background','#ccc');    

//選取li元素不含class爲red的元素
$('li').not('.red').css('background','#ccc');
//或
$('li：not(.red)').css('background','#ccc');

//has()選擇子元素含有某屬性的元素
$('ul').has('.red').css('background','#ccc');