看程序学jquery5-筛选器

示例 1 : 第一个 最后一个 第几个

<script src="http://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>
      
<div >
  <span>Hello JQuery 5</span>
</div>
      
<div >
  <span>Hello JQuery 6</span>
</div>

示例 2 : 父 祖先

<script src="http://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 : 儿子 后代

<script src="http://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 : 同级

<script src="http://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>