เริ่มเขียน jQuery Syntax

jQuery เป็นไลบรารี JavaScript ที่ช่วยให้การเขียนโค้ดง่ายขึ้น โดยมี syntax ที่ใช้งานง่ายและย่อส่วน ซึ่งสามารถทำงานร่วมกับ HTML, CSS และ JavaScript ได้อย่างมีประสิทธิภาพ นี่คือรายละเอียดของ jQuery Syntax

พื้นฐานของ jQuery Syntax

jQuery ใช้สัญลักษณ์ $ เป็นตัวแทนของ jQuery เรียกง่ายๆ ว่าเป็นสัญลักษณ์ย่อ เช่นเดียวกับการเรียกฟังก์ชันของ jQuery

$(selector).action()

องค์ประกอบหลักของ jQuery Syntax

$ (ตัวแทนของ jQuery) สัญลักษณ์ $ ใช้เพื่อเรียก jQuery เช่นเดียวกับการบอกให้ jQuery ทำงาน

$(document).ready(function() {
   // โค้ด jQuery อยู่ที่นี่
});

Selector (ตัวเลือก) ใช้เพื่อเลือกองค์ประกอบ (HTML elements) ที่ต้องการจะทำงานด้วย คล้ายกับการใช้งาน CSS Selectors

ตัวอย่าง Selectors ยอดนิยม

• #id เลือกตาม id ขององค์ประกอบ

• .class เลือกตาม class ขององค์ประกอบ

• element เลือกตามชื่อแท็กขององค์ประกอบ (เช่น div, p)

$("#myId").hide(); // ซ่อนองค์ประกอบที่มี id = myId
$(".myClass").show(); // แสดงองค์ประกอบที่มี class = myClass
$("p").css("color", "red"); // เปลี่ยนสีข้อความของทุกแท็ก <p> เป็นสีแดง

Action (การกระทำ): การกระทำ (action) หรือฟังก์ชันที่ต้องการให้ jQuery ทำงานกับ selector ที่เลือก เช่น การซ่อน การแสดง การเปลี่ยนแปลงสไตล์ ฯลฯ

ตัวอย่างของ Action

• .hide() ซ่อนองค์ประกอบ

• .show() แสดงองค์ประกอบ

• .css() ใช้ปรับแต่ง CSS ขององค์ประกอบ

• .html() เปลี่ยนเนื้อหาด้านในขององค์ประกอบ

$("p").hide(); // ซ่อนทุกแท็ก <p>
$("#myId").css("color", "blue"); // เปลี่ยนสีข้อความของ id = myId เป็นสีฟ้า

การใช้งานฟังก์ชัน Events ใน jQuery

jQuery ช่วยให้เราสามารถผูกเหตุการณ์ (events) กับองค์ประกอบ HTML ได้ง่ายๆ เช่น คลิก, เลื่อนเมาส์, ปุ่มกด เป็นต้น

• click() จัดการเหตุการณ์เมื่อมีการคลิก
• hover() จัดการเหตุการณ์เมื่อเมาส์เลื่อนเข้าหรือออก
• keyup() จัดการเหตุการณ์เมื่อกดปุ่มคีย์บอร์ด

// เมื่อมีการคลิกที่ปุ่ม id="myButton" ให้ซ่อนข้อความใน id="myText"
$("#myButton").click(function() {
   $("#myText").hide();
});

การเข้าถึงและแก้ไขเนื้อหา HTML

• text() ดึงหรือเปลี่ยนข้อความภายในองค์ประกอบ
• html() ดึงหรือเปลี่ยน HTML ภายในองค์ประกอบ
• val() ดึงหรือเปลี่ยนค่าของ input field

// ดึงข้อความภายใน <p> ทั้งหมด
var text = $("p").text(); 

// เปลี่ยนข้อความภายใน <p> ทั้งหมด
$("p").text("ข้อความใหม่");

การจัดการ Class และ Attribute

jQuery สามารถใช้เพื่อจัดการ class หรือ attribute ขององค์ประกอบ HTML ได้อย่างง่ายดาย

• addClass() เพิ่ม class ให้กับองค์ประกอบ
• removeClass() ลบ class จากองค์ประกอบ
• attr() ดึงหรือเปลี่ยนค่า attribute

// เพิ่ม class="newClass" ให้กับทุกแท็ก <p>
$("p").addClass("newClass");

// ลบ class="oldClass" ออกจากทุกแท็ก <p>
$("p").removeClass("oldClass");

// ดึงค่า href ของลิงก์
var link = $("a").attr("href");

// เปลี่ยนค่า href ของลิงก์
$("a").attr("href", "https://www.example.com");

การใช้งาน Effects

jQuery มีฟังก์ชันที่เกี่ยวกับการทำเอฟเฟกต์เช่น การซ่อน/แสดง, เลื่อน, ซีดจาง เป็นต้น

• fadeIn() แสดงองค์ประกอบด้วยเอฟเฟกต์ซีดจาง
• fadeOut() ซ่อนองค์ประกอบด้วยเอฟเฟกต์ซีดจาง
• slideUp() ซ่อนองค์ประกอบด้วยการเลื่อนขึ้น
• slideDown() แสดงองค์ประกอบด้วยการเลื่อนลง

// ซีดจางแสดงองค์ประกอบ <p>
$("p").fadeIn();

// เลื่อนขึ้นเพื่อซ่อนองค์ประกอบ <p>
$("p").slideUp();

การใช้งาน jQuery กับ Ajax

jQuery สามารถใช้เพื่อทำงานกับ Ajax ได้อย่างสะดวก เช่น ดึงข้อมูลจากเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชหน้าเว็บ

$.ajax({
   url: "data.json",
   method: "GET",
   success: function(response) {
      console.log(response);
   }
});

สรุปแล้ว jQuery ช่วยให้การจัดการ DOM, การสร้างเอฟเฟกต์ และการใช้งาน Ajax ง่ายและกระชับขึ้น ทำให้เราสามารถจัดการ HTML ได้อย่างง่ายดาย