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>
