1、JQuery过滤器简介
jQuery过滤器是一系列简单、实用的jQuery对象方法，对jQuery对象所包含元素进行再筛选的操作。
jQuery过滤方法主要有以下8种：
（1）类过滤
类过滤是根据元素的类特性进行过滤操作，使用hasClass（）方法进行类过滤。
hasClass（className）className表示类名，该方法主要判断jquery对象中的每个元素是否包含了指定类名。类过滤器仅仅是一个条件检测，无法过滤出符合指定类名的元素。
应用举例：实现鼠标点击类名含有“red”的<div>标签时，该标签作用摆动。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$("div").click(function()//为所有的div元素绑定单击事件
{
if($(this).hasClass("red"))//只有类名为red的div元素才绑定系列动画
{
$(this)
.animate({left:120})
.animate({left:240})
.animate({left:0})
.animate({left:240})
.animate({left:120});
}
}
);
}
)
</script>
<style type="text/css">
div{position: absolute;width: 100px;height: 100px;}
.blue{background: blue;left: 0px;}
.red{background: red;left: 120px; z-index: 2;}
.green{background: green;left: 240px;}
.pos{top: 120px;}
</style>
</head>
<body>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red pos"></div> <!--red pos为复合类，包含red和pos类-->
</body> 
（2）下标过滤器
下标过滤器可以精确找到jquery对象中指定下标位置的元素。
eq(index)index是一个整数值，从0开始。
应用举例：对上例进行修改，指定第二个div元素有动画效果。
<script type="text/javascript">
$(
function(){ //界面始化函数
$("div").eq(1).click(function()//为第二个div元素绑定单击事件
{
$(this)
.animate({left:120})
.animate({left:240})
.animate({left:0})
.animate({left:240})
.animate({left:120});
}
);
}
)
</script>
（3）表达式过滤
filter()表达式过滤器可以接受字符串，也可以接收函数。
filter(expr | fn)expr为表达式字符串，fn为函数
应用举例：对上例进行设置
<script type="text/javascript">
$(
function(){ //界面始化函数
$("div").filter(".red,.blue").css("background-color","red");//将div元素集合中过滤出包含red类和blue类的元素，并将其设为红色背景
}
)
</script>2、查找
jQuery查找用来查找父集、同级或下级相关元素。主要有16种。
（1）向下查找
1）children()
该方法用于查找当前元素的所有或部分子元素（仅能查找子元素）
children([expr])expr表示表达式字符串，如果省略则匹配所有的资源。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$("#menu").children().css("text-decoration","underline");//查找ul元素的所有子元素
}
)
</script>
</head>
<body>
<ul id="menu">
<li class="home">首页</li>
<li>公司介绍</li>
<li>产品介绍</li>
<li>技术服务</li>
<li>招贤纳士</li>
<li>联系方式</li>
</ul>
</body> 
2）contents()
该方法不仅可以获得子元素，还可以获取文本节点和注释节点等。
3）find()
该方法能够查找所有后代元素。
（2）向上查找
1）parents()
该方法能够查找所有匹配元素的祖先元素。
parents([expr])expr省略将匹配所有元素的祖先元素。
3、串联
（1）合并jQuery对象
使用addBack（）方法，可以将不同的jQuery对象合并在一起，最后为他们定义统一的样式。
应用举例：使用find()方法获取div标签包含的p标签，然后通过addBack()方法将两个对象合并在一起。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$("div").find("p").addBack().css({"border":"solid 1px red","margin":"1px"});//将div和p对象链接在一起，为他们定义相同的样式
}
)
</script>
</head>
<body>
<div>
<p>窗前明月光</p>
<p>疑是地上霜</p>
</div>
</body> 
