jQuery  เป็น Library ของ Javascript ซึ่งจะช่วยให้สามารถเขียนโค๊ดได้ง่ายขึ้น

หลักการเบื้องต้น

1. jQuery จะใช้ wrapper ครอบ คือ  $() เช่น

•  $("<p> What this</p>")
   => object Jquery ครอบชิ้นส่วนของ DOM

•  $("<p>What this </p>").appendTo("body");
  =>เชื่อมนิพจน์ต่อกันได้

2. สามารถครอบอิลิเมนต์โดยระบุในรูปแบบ

    $("div")

    $("#someId")

    $(".someClass")

ซึ่งต่างจาก javascript  ที่ใช้ getElementById(""); มาใส่ Object เพื่ออ้างอิงสามารถเชื่อมนิพจน์ได้ด้วย

     $("#something").addClass('someClass').show();

การกำหนดค่าเริ่มต้นการทำงานก่อนใช้งานหน้าจอ

-> Onload จะโหลด body  โหลดรูป ช้าเสียเวลา

ให้ใช้ $(document).ready(function);

ย่อคือ $(function){};

function ที่ใช้บ่อย

.html();
=> $("#someId").html("<p>Test</p>");
:: ใส่ค่า inner HTML ใน Obj Id นั้น

.append("");
=> $("#someId").append("<div>Test</div>");
:: แทรก HTML ใน Obj Id 

.data("");
=>var id = $("#someId").data("id");
:: คืนค่า dataset-id ของ obj

.attr("");
=>var source = $("#someId").attr("source");
:: รับค่า attribute ที่ชื่อ source จาก Obj

.val();
=>var val = $("#someId").val();
:: รับค่า value จาก Obj ที่เป็น input 

.find("");
=>var val = $("#someId").find(".someClass");
:: หา dom ของ Obj ที่มี class name ชื่อ 'someClass' ทั้งหมด อาจคืนค่าหลายค่า หรือค่าเดียวก็ได้

ผลลัพธ์ที่ได้ สามารถ access ได้ดังนี้

for(var i=0;i<val.length;i++){

   print $(val[i]).html();

}

.parent();

=> $("#someId").parent().attr("class");

::คืนค่า parent ของ someId แล้วแสดงค่า attribute class

.filter();

var title= "test"; 

var list = $("#thumb-list .thumb-card").filter('[data-title^="'+title+'"]' ); 

.addClass("hidden");

.removeClass("hidden");

$('select').change(function(){ show_data(); }); $('input:checkbox').change(function(){ show_data(); });

if($(this).prop("checked")==false){}

$("#pcs").prop("disabled",false);

การเปรียบเทียบ อาร์เรย์ A กับ B ว่า มี Element เหมือนกันหมดหรือไม่

for(i in array_pattern){

      check_pattern = show_array_of_pattern .sort();

       array_of_pattern = array_pattern[i].split(',').sort();

     if(JSON.stringify(check_pattern )==JSON.stringify(array_of_pattern))

     {

            //output

      }

}

for(i in a_array){ console.log(i) // return element index }

for(x of a_array){ console.log(x) //return element value }