前端提高篇(八十八)：jQuery的DOM的筛选遍历

$(‘li:last’).css(‘background’,‘orange’);//筛选最后一个li

$(‘li:odd’).css(‘background’,‘orange’);//筛选奇数索引的li，索引从0开始，1，3

$(‘li:even’).css(‘background’,‘orange’);//筛选偶数索引的li，0，2，4

也可以提到外面作为方法来写：

$(‘li’).first().css(‘background’,‘orange’);//筛选第一个

$(‘li’).last().css(‘background’,‘orange’);//筛选最后一个

$(‘li’).odd().css(‘background’,‘orange’);//奇数索引

$(‘li’).even().css(‘background’,‘orange’);//偶数索引

$(‘li’).eq(2).css(‘background’,‘orange’);//指定第n个

效果同上

1.2 prev / prevAll / next / nextAll / siblings

prev找前一个兄弟元素，prevAll找前面所有兄弟元素；

next找下一个兄弟元素，nextAll找后面所有兄弟元素；

siblings找所有兄弟元素

1.2.1 prev

$(‘li:eq(2)’).prev().css(‘background’,‘orange’);//找索引2的前一个元素，即索引1对应的li

$(‘li:eq(2)’).prev(‘p’).css(‘background’,‘orange’);//找索引2的前一个p标签，没有匹配的就不执行，返回空对象

有匹配的p标签：

没有匹配的p标签：

console.log( $(‘li:eq(2)’).prev(‘p’) )

输出：没有标签的背景颜色被改变

1.2.2 prevAll

找前面的所有

$(‘li:eq(2)’).prevAll().css(‘background’,‘orange’);//找索引2前所有兄弟元素

$(‘li’).prevAll().css(‘background’,‘orange’);//除了最后一个，其他均匹配

1.2