jquery之dom的筛选遍历

A.筛选

一.odd/even/first/last/eq

1. odd

• 队列中索引值为奇数的元素被选择出来

    
xxx
    
xxx
    
xxx

$('li:odd').css('background','orange')；

2.even

• 队列中索引值为偶数的元素被选择出来

3.first

• li队列中的第一个（第0位）元素被选择出来

$('li:first').css('background','orange')
$('li').first().css('background','orange')

两种书写方法均可用

4.last

• li队列中的最后一位元素被选择出来

$('li:last').css('background','orange')
$('li').last().css('background','orange')

两种书写方法均可用

5.eq

• li队列中的某一位被选择出来

    
xxx
    
xxx
    
xxx
    
xxx

$('li:eq(2)').css('background','orange')；
$('li').eq(2).css('background','orange')
//选取第2位（第3个）li

两种书写方法均可用

二.prev/prevAll/next/nextAll/siblings

1.prev()

• 找上一个兄弟元素

    
xxx
    
xxx
    
zzz
    
xxx
    
xxx

$('li:eq(2)').prev().css('background','orange')；
//p标签被选中

• prev()括号中的东西可用来筛选

$('li:eq(2)').prev('p').css('background','orange')；
//如果是p的话才会执行,不是p不执行

2.prevAll()

• 当前元素上面的所有兄弟元素

3.next()

• 找下一个兄弟元素

4.nextAll()

• 找当前元素下面的所有兄弟元素
• 思考问题：$('li').nextAll().css('background','orange');
  解答：除了第一个例元素不发生css样式改变外，其余的背景颜色都变为橙色。

5.siblings()

• 获取所有兄弟元素

三.filter/not/is/slice/map/has

1.filter()；筛选dom元素

如果给定表示 DOM 元素集合的 jQuery 对象，.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。

$('li').filter(':even').css('background-color', 'red');
//索引值为偶数值得筛选出来执行

2.not()；排除

    
xxx
    
xxx
    
xxx
    
xxx

$('li').not('.test').css('background','orange')；
//除去class值为test的都执行css

3.is()；判断是否有符合筛选的

$('li').is('.test')--->返回true/false

4.slice()；截取，取头不取尾

    
xxx
    
xxx
    
xxx
    
xxx
    
xxx

$('li').slice(2,4).css('background','orange')；
//第2位到第3位被截取并修改

5.map()

• map()与each()类似，都是循环遍历的作用。
• each只是用来遍历，不做处理，把选中的元素返回。
• map()遍历后进行处理。可以返回jquery对象。

image.png

6.has()

查找子元素存不存在某种东西的父元素

    
xxx
    
xxx
    
xxx
    
xxx
    
xxx

$('li').has('p').css('background','orange')；
//li子元素中拥有p元素的li被选中

B.查找

一.children/find/end/add/andBack

二.offsetParent/parent/parents/closest