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

$(‘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.3 next与nextAll

$(‘li:eq(2)’).next().css(‘background’,‘orange’);//索引2后一个兄弟元素

$(‘li’).next().css(‘background’,‘orange’);//除第一个li其他均被选中

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

$(‘li’).nextAll().css(‘background’,‘orange’);//除第一个li其他均被选中

被匹配到的元素会一个个遍历，执行后面的css操作，所以，$('li').next()会将每一个li的next都添加背景色；$('li').nextAll()会将每一个元素后的所有元素都设置背景色

1.2.4 siblings

匹配选定元素的所有兄弟元素

$(‘li:eq(2)’).siblings().css(‘background’,‘orange’);//索引2的所有兄弟元素，不包含索引2元素

$(‘li’).siblings().css(‘background’,‘orange’);//所有li的兄弟元素均匹配到

$('li').siblings().css()中，先匹配到所有li，遍历每一个li，给每一个li的兄弟元素都做样式调整，在这里体现出来的就是，所有li的背景颜色都变了

1.3 filter / not / is / slice / map / has

html元素为：

• 1
• 2
• 3
• 4
• 5

• 1.3.1 filter()

  规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

  可以传选择器、函数、原生dom对象、jQuery对象

  传入原生dom对象、jQuery对象：

  //筛选calss名为test的元素

  $(‘li’).filter(document.getElementsByClassName(‘test’)[0]).css(‘background’, ‘orange’);

  ${(}^{\prime }l{i}^{\prime }).filter($(‘.test’)).css(‘background’, ‘orange’);

  传入选择器：

  //筛选class名为test的元素

  $(‘li’).filter(‘.test’).css(‘background’, ‘orange’);

  效果：

  

  传入一个函数，带有两个参数：索引，对应元素：

  //筛选出索引值为偶数的元素，并设置背景色为橘色

  $(‘li’).filter(function(index, ele){

  if (index % 2 == 0){

  return true;

  }

  //或者将if判断语句省略，直接写成：

  //return index%2==0;

  }).css(‘background’, ‘orange’);

  效果：

  

  1.3.2 not()

  不选择某个元素

  同样可以传选择器、函数、原生dom原生、jQuery对象

  //不选择class为test的元素，其余都被选择

  $(‘li’).not(‘.test’).css(‘background’, ‘orange’);

  

  1.3.3 is()

  确认是否是 / 是否包含某个元素，是则返回true

  //所有li中，是否有一个li的class名为test

  console.log( $(‘li’).is(‘.test’) );//true

  1.3.4 slice()

  取连续的几个元素，区间左闭右开[start, end)，默认start为0，end为最后

  //取索引值为2和3的li元素

  $(‘li’).slice(2,4).css(‘background’, ‘orange’);

  效果：

  

  1.3.5 each()与map()

  使用的html代码：

• xiaoming

  16

• xiaohong

  21

• xiaowang

  25

  each()：遍历每个元素,为每个匹配元素规定运行的函数，只遍历

  可以传入函数，函数有两个参数：索引和对应原生dom元素，使用原生dom元素注意要先转为jQuery对象，否则不能使用jQuery的方法

  var arr = [];

  $(‘li’).each(function(index, ele){

  //此处，this和ele均指当前原生dom元素

  arr.push($(ele).find(‘.name’).text());

  })//每个li元素下寻找class为name的元素，取其文本，并存在数组中

  console.log(arr.join(‘,’))//将数组里的文本用逗号拼接并返回

  效果：输出所有名字：xiaoming,xiaohong,xiaowang

  map()：

  把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象

  //修改age大于20的元素的背景色

  $(‘li’).map(function(index, ele){

  if ($(ele).find(‘.age’).text() > 20){

  return ele;

  //注意这里返回的是原生dom，不是$(ele)，map会将其包装成jQuery对象

  //如果返回的是字符串，map也会将其包装成jQuery对象

  }

  }).css(‘background’, ‘orange’);

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  担。**

  [外链图片转存中…(img-AuJO4XqU-1715888106302)]

  [外链图片转存中…(img-16hcHSY7-1715888106302)]

  [外链图片转存中…(img-SWZOZ277-1715888106303)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！