jQuery(二)高階選擇器

2021-07-24 11:04:13 字數 1195 閱讀 6031

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');

jQuery高階選擇器

和css層級選擇器類似,可以通過層級關係獲取對應標籤物件。語法 a b 獲得a元素內部的所有的b元素。後代 a b 獲得a元素下面的所有b子元素。子標籤 a b 獲得a元素同級下乙個b元素。直接後兄弟 a b 獲得a元素之後的所有b元素。一般後兄弟 子代111111 子代222222 子代33333...

JQuery 學習 高階選擇器

第一 群組選擇器 css pdiv strong jquery function divdiv div pp p strong strong strong css div,strong,p jquery function divdiv divppp strong strong strong 後代選擇...

JQuery 學習 高階選擇器

第一,後代選擇器 box p css color red box find p css color red pqpq pqpqpqp p全部紅色 第二,子代選擇器 box p css color blue box children p css color blue pq pqpq pqpq p第三,...