Jquery Selector แบบต่างๆ

  
การทำ Dynamic Webpage นั้นคือ การที่ Element ต่างๆของ หน้าเว็บ สามารถเปลี่ยนแปลงได้นั้นจำเป็นต้อง select element เพื่อการแก้ไขก่อน ด้วยการ select ของ jQuery

รับเขียนโปรแกรม JQuery

 รับเขียนโปรแกรม Web Application

Select BY Id

$("# id ของ element")

<div id="my_div" ></div>
<script>
      $("#my_div").html("Select By Element Id");
</script>

•  ผลลัพธ์คือหน้าเว็บจะแสดงคำว่า Select By Element Id
• $("# id ของ element")  ต้องมี # ด้านหน้าด้วย
• .html(" ..... ") คือ การใส่ Element เข้าไปภายใต้ element ที่มี id ตาม selector ที่กำหนด

Select By Class 

 $(". class ของ element")

<div class="my_div"></div>
<script>
      $(".my_div").html("Select By Class");
</script>

กรณีที่มี class มากกว่า 1 element 

<div class="my_div"></div>
<div class="my_div"></div>
<script>
      $(".my_div").html("Select By Class");
</script>

•  $(". class ของ element") ต้องมี . นำชื่อ class ด้วย
• ผลลัพธ์คือหน้าเว็บจะแสดงคำว่า Select By Class จำนวน 2 แถว เพราะ class ที่มีชื่อว่า my_div มีอยู่ 2 element

 jQuery each+ select By Class

เราสามารถใช้ jQuery each สำหรับการเข้าถึง element ที่ select เจอมากกว่า 1 element

<div class="my_div"></div>
<div class="my_div"></div>
<script>

       $(".my_div").each(function(index,element){

                $(element).html("Element "+index);//index คือ ลำดับที่ของ element

       });

</script>

• ผลลัพธ์ที่ได้คือ หน้าจอจะแสดง
  
  Element 0
  Element 1

Select By Property

 $("[ชื่อ property =' ค่าของ property ' ]")


<div><a href="https://youtube.com" ></a></div>
<div><a href="https://facebook.com" ></a></div>
<div><a href="https://google.com" ></a></div>
<script>

    $("[href='https://youtube.com']").html('Youtube');
    $("[href='https://facebook.com']").html('Facebook');
    $("[href='https://google.com']").html('Google');
   
</script>

• href คือ property ของ element a

Select ซ้อน Select

  $("....").find("...")

<div id="my_div">
       <div class="my_class"></div>
       <div class="my_class"></div>
       <div class="my_class"></div>
</div>

<script>

     $("#my_div").find(".my_class").html("my_div >> my_class");

</script>

• เมื่อ selector ตัวแรกแล้ว เราใช้ .find เพื่อเลือก element ถัดไป

• ผลลัพธ์ที่ได้คือ
  
  my_div >> my_class
  my_div >> my_class
  my_div >> my_class