Jquery Selector แบบต่างๆ

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

Select BY Id

$("# id ของ element")

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

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>


 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>


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>


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>