2024年Web前端最全前端提高篇(八十八)：jQuery的DOM的筛选遍历(1)，项目面试要注意什么

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

$(‘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’);

  

  1.3.6 has()

  如果某元素的子元素包含想要的标签，这个元素就会被选中

  

  此处demo用的html代码：

• person data

• xiaoming

  16

• xiaohong

  21

• xiaowang

  25

  如果li包含p标签，把这个li的文本颜色改成红色

  最后

  编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】