JS中filter、find、has的用法

1、filter()
含义：匹配当前的元素集合，删除不符合条件的元素，返回新的集合
参数：字符串值，包含供匹配当前元素集合的选择器表达式（过滤条件）
返回：新的集合
作用于当前元素。

<ul>
  <li class='a'>list item 1</li>
  <li>list item 2</li>
  <li class='a'>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('li').filter('.a').css('background-color', 'red');
</script>

结果如下：

2、has()
含义：将匹配元素集合缩减为包含特定元素的后代的集合
参数：字符串值，包含匹配元素的选择器表达式（过滤条件）
返回值：新的集合
作用于当前元素的所有子集。

<ul>
  <li>list item 1</li>
  <li class="b">list item 2
    <ul>
      <li class="a"><span>list item 2-a</span></li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('li').has('span').css('background-color', 'red');
console.log($('li').has('span'))
</script>

结果如下：

console.log的结果：

3、find()
含义：获得当前匹配元素集合中每个元素的后代，由选择器进行筛选
参数：字符串值，包含供匹配当前元素集合的选择器表达式（过滤条件）
返回值：当前查找的元素集合
作用于所有子元素

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('li.item-ii').find('li').css('background-color', 'red');
</script>

结果如下：