jQuery filter() 方法 用于从所匹配的元素中进一步筛选所需要的元素，即返回满足筛选条件的元素，您可以通过函数和选择器进行筛选。

语法

//使用选择器
$(selector).filter(selector)
//使用函数
$(selector).filter(function(index))

参数

selector：它是一个可选参数。它可以是一个 JQuery 对象或一个选择器表达式。我们还可以使用逗号分隔的表达式列表一次使用多个过滤器。可以这样写:filter("id1, #id2")

function:  它也是一个可选参数。此参数指定为组中的每个元素运行的函数。如果函数返回 true，则保留该元素。否则，返回 false 时，元素被移除。
  • index 参数表示元素在集合中的位置。它从 0 位置开始。

例子

例1

选择器例子

<!DOCTYPE html>
<html>
<head>
<style>
div{
	font-size: 20px;
	font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fun(){
	$(document).ready(function(){
	  $("p").filter(".para").css({"background": "yellow"});
	});
}
</script>
</head>

<body>
	<h2> 欢迎来到 yxjc123.com </h2>
	<h4> 这是一个使用 jQuery 的 filter() 方法的例子。 </h4>
	<div id = "div1"> 这是第一个 div 元素。 </div>
	<p class = "para"> 这是第一个段落元素 </p>
	<div id = "div2"> 这是第二个 div 元素。 </div>
	<p class = "para"> 这是第二个段落元素 </p>
	<p class = "para"> 这是第三个段落元素 </p>
	<p> 点击下面的按钮查看效果。 </p>
	<button onclick = "fun()"> 点击看看 </button>
</body>
</html>

例2

使用函数的例子

<!DOCTYPE html>
<html>
<head>
<style>
p{
	font-size: 20px;
	font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fun(){
	$(document).ready(function(){
		  $("p").filter(function(index) {
			  if(index == 1 || index == 3 || index == 5){
			  	return true;
			  }
	  	  }).css({"background": "yellow"});
	});
}
</script>
</head>

<body>
<h2> 欢迎来到 yxjc123.com </h2>
<h4> 这是一个使用 jQuery 的 filter() 方法的例子。 </h4>
<p class = "para1"> P1 </p>
<p class = "para2"> P2 </p>
<p class = "para3"> P3 </p>
<p class = "para4"> P4 </p>
<p class = "para5"> P5</p>
<p class = "para6"> P6 点击以下按钮查看效果。 </p>
<button onclick = "fun()"> 点击看看 </button>
  </body>

</html>