JQuery 05 筛选器

筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。

 示例 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>