篩選器指的是在已經通過選擇器選中了元素後，在此基礎上進一步選擇。

示例1:

第一個 最後一個 第幾個

首先通過 $("div") 選擇了多個div元素，接下來做進一步的篩選
first()第1個元素
last()最後一個元素
eq(num)第num個元素
注:num基0

<script src="https://how2j.cn/study/jquery.min.js"></script>
       
<script>
$(function(){
   $("#b1").click(function(){
      $("div").first().toggleClass(
 
"pink");
   });
 
   $("#b2").click(function(){
      $("div").last().toggleClass("pink");
   });
 
   $("#b3").click(function(){
      $("div").eq(4).toggleClass("pink");
   });
        
});
        
</script>
  <button id="b1">切換第1個div背景色</button>
  <button id="b2">切換最後1個div背景色</
 
button> 
  <button id="b3">切換第5個div背景色</button>
 
<br>
<br>
       
<style>
.pink{
   background-color:pink;
}
 
</style>
        
<div>
  <span>Hello JQuery 1</span>
       
</div>
      
<div >
  <span>Hello JQuery 2</span>
 

</div>
      
<div >
  <span>Hello JQuery 3</span>
</div>
  
<div >
  <span>Hello JQuery 4</span>
</div>
  
<div >
  <span>Hello JQuery 5</span>
</div>
      
<div >
  <span>Hello JQuery 6</span>
</div>

示例2:

父 祖先

parent()選取最近的一個父元素
parents()選取所有的祖先元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
        
<script>
$(function(){
  $("#b1").click(function(){
     $("#currentDiv").parent().toggleClass("b");
  });
  $("#b2").click(function(){
     $("#currentDiv").parents().toggleClass("b");
  });
 
});
</script>
 
<style>
div{
   padding:20px;
}
 
div#grandParentDiv{
 background-color:pink;
}
 
div#parentDiv{
 background-color:green;
}
 
div#currentDiv{
 background-color:red;
}
 
.b{
   border: 2px solid black;
}
 
</style>
 
<button id="b1">改變parent()的邊框</button>
 
<button id="b2">改變parents()的邊框</button>
 
<div id="grandParentDiv" >
  祖先元素
  <div id="parentDiv">
  父元素
    <div id="currentDiv">當前元素</div> 
  </div>
</div>

示例3:

兒子 後代

children():篩選出兒子元素 (緊挨著的子元素)
find(selector):篩選出後代元素
注: find() 必須使用引數 selector

<script src="https://how2j.cn/study/jquery.min.js"></script>
          
<script>
$(function(){
  $("#b1").click(function(){
     $("#currentDiv").children().toggleClass("b");
  });
  $("#b2").click(function(){
     $("#currentDiv").find("div").toggleClass("b");
  });
   
});
</script>
   
<style>
div{
   padding:20px;
}
   
div.grandChildrenDiv{
 background-color:pink;
}
   
div.childrenDiv{
 background-color:green;
 margin:10px;
}
   
div#currentDiv{
 background-color:red;
}
   
.b{
   border: 2px solid black;
}
   
</style>
   
<button id="b1">改變children()的邊框</button>
   
<button id="b2">改變find()的邊框</button>
   
<div id="currentDiv" >
  當前元素
  <div class="childrenDiv">
  兒子元素1
    <div class="grandChildrenDiv">後代元素n</div> 
  </div>
  <div class="childrenDiv">
  兒子元素2
    <div class="grandChildrenDiv">後代元素n</div> 
  
  </div>
    
</div>

示例4:

同級

siblings():同級(同胞)元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
         
<script>
$(function(){
  $("#b1").click(function(){
     $("#currentDiv").siblings().toggleClass("b");
  });
  
});
</script>
  
<style>
div{
   padding:20px;
   background-color:pink;
   margin:10px;
}
  
div#parentDiv{
 background-color:green;
}
  
div#currentDiv{
 background-color:red;
}
  
.b{
   border: 2px solid black;
}
  
</style>
  
<button id="b1">給同級加上邊框</button>
  
<div id="parentDiv" >
  父元素
  <div id="currentDiv">
    當前元素
  </div>
  <div >
    同級元素
  </div>
  <div >
    同級元素
  </div>
</div>