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>
结果如下: