เรียน jquery Archives

jQuery Event ที่ใช้งานบ่อยๆ

jQuery มี Event Methods หลากหลายที่ช่วยให้การจัดการกับเหตุการณ์ (events) บนเว็บเพจง่ายขึ้น โดย Event Methods เหล่านี้จะทำให้เราสามารถกำหนดการทำงานเมื่อเกิดเหตุการณ์ต่าง ๆ เช่น เมื่อผู้ใช้คลิกเมาส์ กดแป้นพิมพ์ หรือทำการโต้ตอบอื่น ๆ

มาดูรายละเอียดของ Event Methods ที่สำคัญใน jQuery

1. .on()

.on() เป็นวิธีการหลักที่ใช้เพื่อจัดการกับหลายเหตุการณ์ในหลายองค์ประกอบ (elements) ใน jQuery มันสามารถใช้เพื่อจับ event หลายชนิดใน selector เดียว

การใช้งาน

$("selector").on("event", function(){
    // คำสั่งที่จะทำงานเมื่อเกิด event
});

ตัวอย่าง

$("#myButton").on("click", function(){
    alert("Button clicked!");
});

ในตัวอย่างนี้ เมื่อมีการคลิกปุ่มที่มี id ว่า myButton จะมีการแสดงข้อความแจ้งเตือนออกมา

ตัวเลือก (Selectors) ใน jQuery

ตัวเลือกใน jQuery เป็นฟีเจอร์ที่ทรงพลังมาก ช่วยให้นักพัฒนาสามารถค้นหาและจัดการกับองค์ประกอบ HTML ได้อย่างง่ายดายและรวดเร็ว คล้ายกับตัวเลือกใน CSS แต่มีความสามารถเพิ่มเติมในการทำงานร่วมกับ DOM (Document Object Model) ได้ นี่คือตัวอย่างการใช้งานตัวเลือกต่าง ๆ ของ jQuery แบบละเอียด

ตัวเลือกพื้นฐาน (Basic Selectors)

ตัวเลือกแท็ก (Element Selector)

รูปแบบ $("element")

ตัวอย่าง

$("p")

เลือกแท็ก <p> (ย่อหน้าข้อความ) ทุกตัวในหน้าเว็บ

ตัวเลือก ID (ID Selector)

รูปแบบ $("#id")

ตัวอย่าง

$("#header")

เลือกองค์ประกอบที่มี id="header" ซึ่งระบุ ID เฉพาะ

เริ่มเขียน 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

เริ่มต้นใช้งาน jQuery

jQuery คืออะไร?

jQuery คือไลบรารี JavaScript ที่ออกแบบมาเพื่อลดความซับซ้อนของการทำงานกับ DOM (Document Object Model) และการเขียน JavaScript ในเว็บเพจ มันช่วยให้เราสามารถเลือกและจัดการองค์ประกอบ HTML, จัดการกับเหตุการณ์ (events), ทำงานกับเอฟเฟกต์แอนิเมชัน, และแม้กระทั่งส่งข้อมูลแบบ AJAX ได้อย่างง่ายดาย

jQuery เป็นที่นิยมมากเนื่องจากสามารถทำให้โค้ด JavaScript ที่เคยยาวซับซ้อน กลายเป็นโค้ดที่สั้นและง่ายต่อการเข้าใจมากขึ้น

การติดตั้ง jQuery

วิธีที่ 1 โหลด jQuery ผ่าน CDN

คุณสามารถเรียกใช้งาน jQuery โดยใช้ CDN (Content Delivery Network) ซึ่งไม่จำเป็นต้องดาวน์โหลดไฟล์ไปเก็บไว้ในโฟลเดอร์โปรเจกต์ของคุณ สามารถแทรกโค้ดต่อไปนี้ในส่วน <head> หรือท้ายของ <body> ใน HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

วิธีที่ 2 ดาวน์โหลด jQuery

ถ้าต้องการใช้งานออฟไลน์ คุณสามารถดาวน์โหลด jQuery ได้จากเว็บไซต์ jQuery.com แล้วเพิ่มไฟล์ .js ไว้ในโปรเจกต์ของคุณ โดยสามารถเรียกใช้ได้ดังนี้

<script src="path/to/jquery.min.js"></script>