四、jQuery选择器之查找与过滤

一、祖先

$('.box').parent() // 返回.box的直接父元素 常用
$('.box').parents() // 返回.box的所有祖先元素，一路向上直到html元素 不常用
$('.box').parentsUntil('div') //  返回.box和div之间的所有祖先元素 不常用

二、后代

1、find

$('.box').find('*') // 返回.box的所有后代

$('ul').find('span') // 返回ul后代中的所有span

$('ul').find('.box') // 返回ul后代中的所有.box

$('div').find('li,#first,.box') // 返回div后代中所有li、#first、.box

2、children

$('div').children() // 返回div的所有 直接 子元素

$('div').children('span.box') // 返回div直接子元素中的所有类名为.box的span

三、兄弟

1、siblings

$('span').siblings() // 返回span的所有兄弟元素

$('span').siblings('p') // 返回span同胞中的所有p元素

2、pre() 和 next()

$('span').pre() // 返回span的前一个 兄弟 元素

$('span').preAll() // 返回所有在span之前的兄弟元素

$('span').preUntil('p') // 返回介于span和p之间的所有兄弟元素

next()、nextAll()，nextUntil()与pre恰好相反

四、过滤

1、first

$('div p').first() // 返回div中第一个p

2、last

$('div p').last() // 返回div中最后一个p

3、eq

$('div p').eq(3) // 返回div中第 4 个p
$('div p').e(-3) // 返回div中倒数第3个p

eq索引从0开始，所以索引3代表的是第四个p

4、filter、not

$('p').filter('.box') // 返回所有class为box的p元素
$('p').not('.box') // 返回所有class不为box的p元素

// 返回所有索引为偶数的p元素，索引从0开始
$('p').filter(function(index){
     return index % 2 === 0
})
// 返回所有索引不能被3整除的p元素，索引从0开始
$('p').not(function(index){
     return index % 3 === 0
})