jQuery Selector

selector ช่วยให้เราสามารถเลือก/ค้นหา element หรือเนื้อหาที่ต้องการจัดการได้อย่างง่าย ซึ่งเริ่มต้นด้วยสัญลักษณ์ $ และวงเล็บ () ดังตัวอย่างต่อไปนี้

 

ตัวอย่างที่ 1 selector <p> 

<html>
 <head>
  <script src="jquery-3.5.1.min.js"></script>
  
  <script>
  $(document).ready(function(){ 
    $("p").hide(); 
  });
  </script>
 </head>

 <body>
  <p>Hello World</p>
 </body>
</html>

จากตัวอย่างที่ 1 เป็นการเลือก element <p> และกำหนด action เป็นซ่อน <p> ทั้งหมดในหน้าเอกสาร

 

ตัวอย่างที่ 2 selector class = “test” 

<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $(".test").hide();
      });
    });
  </script>
 </head>
 <body>
  <button>Click</button>

  <div class="test">เนื้อหา</div>
 </body>
</html>

จากตัวอย่างที่ 2 สามารถอธิบายได้ว่า เมื่อมีการคลิกที่ button จะดำเนินการซ่อน element ที่เป็นคลาส test ทั้งหมด

 

ตัวอย่างเพิ่มเติมของ selector

ไวยากรณ์ (Syntax) คำอธิบาย
$(“*”) เลือก element ทั้งหมดในหน้าเอกสาร
$(this)

เลือก element ปัจจุบัน เช่น 

$(document).ready(function(){

    $("p").click(function(){
    $(this).hide();
    });

});

<p>ตัวเลือกที่1<p>
<p>ตัวเลือกที่2<p>
<p>ตัวเลือกที่3<p>

หากมีการคลิก element <p> ตัวไหน ตัวนั้นจะถูกซ่อน ซึ่งไม่ได้หมายความว่าต้องซ่อน <p> ทั้งหมด

$(“p.intro”)

เลือก element <p> ทั้งหมดที่อยู่ในคลาส intro

$(“p:first”) เลือก element <p> ตัวแรกสุด
$(“ul li:first”) เลือก element <li> ตัวแรกสุดของ  element <ul>
$(“ul li:first-child”) เลือก element <li> ตัวแรกสุดของทุกๆ  element <ul> 
$(“tr:even”) เลือก element <tr> ที่เป็นคู่ทั้งหมด
$(“tr:odd”)  เลือก element <tr> ที่เป็นคี่ทั้งหมด