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

你可能感兴趣的:(jquery之dom的筛选遍历)