Jquery有多達數十種選擇器，本章節把工作中會用到的常用選擇器列出來，並逐一解釋。

示例1:

元素

$("tagName")
根據 標籤名 選擇所有該標籤的元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("div").addClass("pink");
   });
   
});
   
</script>
  <button id="b1"
 
>給所有的div元素增加背景色</button>
<br>
<br>
  
<style>
.pink{
   background-color:pink;
}
</style>
   
<div >
Hello JQuery
</div>
 
<div >
Hello JQuery
</div>
 
<div >
Hello JQuery
</div>

示例2:

id

$("#id")
根據 id 選擇元素
id應該是唯一的，如果id重複，則只會選擇第一個。

<
 
script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").addClass("pink");
   });
    
});
    
</script>
  <button id="b1">給id=d1的div增加背景色</button>
<br>
<br>
   
<style>
.pink{
   background-color
 
:pink;
}
</style>
    
<div id="d1">
Hello JQuery
</div>
  
<div id="d2" >
Hello JQuery
</div>
  
<div  id="d3">
Hello JQuery
</div>

示例3:

類

$(".className")
根據 class 選擇元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $(".d").addClass("pink");
   });
    
});
    
</script>
  <button id="b1">給class='d'的div增加背景色</button>
<br>
<br>
   
<style>
.pink{
   background-color:pink;
}
</style>
    
<div class="d">
Hello JQuery
</div>
  
<div class="d" >
Hello JQuery
</div>
  
<div  >
Hello JQuery
</div>

示例4:

層級

$("selector1 selector2")
選擇 selector1下的selector2元素 。
在本例中 選擇id=d3的div下的span元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      $("div#d3 span").addClass("pink");
   });
     
});
     
</script>
  <button id="b1">給id='d3'的div 下的 span 增加背景色</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div class="d">
  <span>Hello JQuery</span>
    
</div>
   
<div class="d" >
  <span>Hello JQuery</span>
</div>
   
<div id="d3" >
  <span>Hello JQuery</span>
</div>

示例5:

最先最後

$(selector:first) 滿足選擇器條件的第一個元素
$(selector:last) 滿足選擇器條件的最後一個元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
     
<script>
$(function(){
   $("#b1").click(function(){
      $("div:first").addClass("pink");
   });
      
   $("#b2").click(function(){
      $("div:last").addClass("pink");
   });
 
});
      
</script>
  <button id="b1">第一個增加背景色</button>
  <button id="b2">最後一個增加背景色</button>
<br>
<br>
     
<style>
.pink{
   background-color:pink;
}
</style>
      
<div>
  <span>Hello JQuery</span>    
</div>
    
<div >
  <span>Hello JQuery</span>
</div>
    
<div >
  <span>Hello JQuery</span>
</div>

示例6:

奇偶

$(selector:odd) 滿足選擇器條件的奇數元素
$(selector:even) 滿足選擇器條件的偶數元素
因為是基零的，所以第一排的下標其實是0(是偶數)

<script src="https://how2j.cn/study/jquery.min.js"></script>
      
<script>
$(function(){
   $("#b1").click(function(){
      $("div:odd").toggleClass("pink");
   });
       
   $("#b2").click(function(){
      $("div:even").toggleClass("green");
   });
  
});
       
</script>
  <button id="b1">切換奇數背景色</button>
  <button id="b2">切換偶數背景色</button>
<br>
<br>
      
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
</style>
       
<div>
  <span>Hello JQuery 0</span>
      
</div>
 
<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>

示例7:

可見性

$(selector:hidden) 滿足選擇器條件的不可見的元素
$(selector:visible) 滿足選擇器條件的可見的元素
注；div:visible和div :visible(有空格)是不同的意思
div:visible 表示選中可見的div
div :visible(有空格) 表示選中div下可見的元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
        
<script>
$(function(){
   $("#b1").click(function(){
     $("div:visible").hide();
   });
   $("#b2").click(function(){
      $("div:hidden").show();     
   });
});
         
</script>
  <button id="b1">隱藏可見的</button>
  <button id="b2">顯示不可見的</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>