Basic jQuery
หลักสูตร Basic jQuery เป็นการอบรมพื้นฐาน jQuery 4 สำหรับเพิ่มลูกเล่นให้หน้าเว็บ ตั้งแต่ Selector, Traversing และการแก้ไข DOM ไปจนถึง Event ด้วย .on(), Effect, ฟอร์ม, Ajax และ jQuery UI โดยเทียบกับ JavaScript มาตรฐานทุกหัวข้อ เหมาะกับผู้เริ่มต้นที่รู้ HTML และ CSS และผู้ดูแลเว็บหรือ Theme ที่ใช้ jQuery อยู่
- ระยะเวลา12 ชั่วโมง · 2 วัน
- รูปแบบออนไซต์ / ออนไลน์สด
- รอบถัดไปเปิดตามคำขอ
- ใบรับรองมี Certificate
ภาพรวมหลักสูตร
jQuery เป็นไลบรารี JavaScript ที่ช่วยให้เลือก Element จัดการ DOM ผูก Event และเรียก Ajax ได้ด้วยโค้ดสั้น และยังอยู่ในเว็บไซต์จำนวนมาก ทั้งระบบภายในองค์กร Theme และ Plugin ของ CMS อย่าง WordPress ทีมที่ดูแลหรือปรับแต่งเว็บเหล่านี้จึงยังต้องอ่านและเขียน jQuery ได้อย่างถูกต้อง พร้อมรู้ว่าส่วนไหนควรใช้ JavaScript มาตรฐานแทน
หลักสูตรนี้เป็นจุดเริ่มต้นของ jQuery 4 รุ่นปัจจุบันสำหรับผู้ที่รู้ HTML และ CSS เริ่มจากนำ jQuery เข้าโปรเจกต์ ใช้ Selector และ Traversing แก้ไขเนื้อหา Attribute และ Class จัดการ Event ด้วย .on() และ Event Delegation ทำ Effect ตรวจฟอร์ม และโหลดข้อมูลด้วย Ajax ใช้ Widget ของ jQuery UI แล้วปิดท้ายด้วยการสร้าง Dropdown Menu, Breadcrumb และ Tree โดยทุกหัวข้อเทียบกับวิธีเขียนด้วย JavaScript มาตรฐาน (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)
สิ่งที่คุณจะได้รับ
- อธิบายบทบาทของ jQuery 4 ในงานปัจจุบัน และรู้ว่าเมื่อไรควรใช้ JavaScript มาตรฐานแทน
- นำ jQuery เข้าโปรเจกต์และเลือก Element ด้วย Selector ได้
- เดินใน DOM และแก้ไขเนื้อหา Attribute, Class และ Style ได้
- ผูก Event ด้วย .on() และใช้ Event Delegation ได้
- ทำ Effect ตรวจฟอร์ม และโหลดข้อมูลด้วย Ajax ได้
- ใช้ jQuery UI และสร้าง Dropdown Menu, Breadcrumb และ Tree ได้
หลักสูตรนี้เหมาะสำหรับ
- ผู้เริ่มต้นที่รู้ HTML และ CSS และต้องการเพิ่มลูกเล่นให้หน้าเว็บ
- นักพัฒนาและผู้ดูแลเว็บที่ต้องแก้ไขเว็บไซต์หรือระบบเดิมที่ใช้ jQuery
- ผู้ปรับแต่ง Theme และ Plugin ของ WordPress หรือ CMS อื่น
- IT Manager ที่ต้องเข้าใจโค้ด jQuery ในระบบขององค์กร
พื้นฐานของผู้เข้าอบรม
- เขียน HTML และ CSS พื้นฐานได้
- เข้าใจการทำงานของเว็บและ HTTP เบื้องต้น
- เคยเขียนโปรแกรมภาษาใดภาษาหนึ่งมาบ้างจะช่วยให้เรียนได้เร็วขึ้น
- โน้ตบุ๊กที่ติดตั้ง VS Code และเบราว์เซอร์รุ่นปัจจุบันได้
หัวข้อการฝึกอบรม
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic jQuery อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Workshop ระดับ Beginner ฉบับนี้อัปเดตเป็น jQuery 4 ที่ตัด API เก่าและเลิกรองรับเบราว์เซอร์รุ่นเก่า เปลี่ยนการผูก Event จาก bind และ hover มาใช้ .on() และ Event Delegation ใช้ jQuery UI 1.14 ที่รองรับ jQuery 4 เพิ่มหัวข้อฟอร์มและ Ajax ระดับพื้นฐาน
และเทียบทุกหัวข้อกับ JavaScript มาตรฐาน โดยยังคงแกนเดิมคือ Selector, การจัดการ DOM, Event, jQuery UI และ Workshop เมนูนำทางแบบ Dropdown, Breadcrumb และ Tree หลักสูตรนี้เน้น jQuery ล้วนสำหรับผู้เริ่มต้น ต่างจาก Basic JavaScript ES6+ and jQuery ที่ปูพื้น JavaScript ก่อน และ jQuery for Application ที่เน้นการเขียน Plugin และแอปขนาดใหญ่ เครื่องมือทั้งหมดใช้ฟรี ผู้เรียนได้ Lab Guide และไฟล์ตัวอย่างกลับไปใช้งานต่อ
Day 1 jQuery 4, Selector และการจัดการ DOM
Section 1: jQuery ในยุคปัจจุบัน
- jQuery คืออะไร และทำไมยังพบในเว็บจำนวนมาก
- สิ่งที่เปลี่ยนใน jQuery 4 และ API ที่ถูกตัดออก
- เมื่อไรควรใช้ jQuery และเมื่อไรควรใช้ JavaScript มาตรฐาน
- เตรียม VS Code, Live Server และ DevTools
- Lab: เปิดหน้าเว็บตัวอย่างและลองคำสั่งใน Console
Section 2: Lab: นำ jQuery เข้าโปรเจกต์
- โหลด jQuery 4 จาก CDN หรือไฟล์ในโปรเจกต์
- ใช้ jQuery แบบ ES Module และผ่าน npm
- รอให้ DOM พร้อมด้วย $(function) และ defer
- ใช้ jQuery Migrate ตรวจโค้ดเดิมที่ใช้ API เก่า
- Lab: หน้าเว็บแรกที่ใช้ jQuery 4
Section 3: Lab: jQuery Selector
- หลักการทำงานของ Selector และ jQuery Object
- เลือกด้วย ID, Class, Tag และ Attribute Value
- Filter เช่น :first, :checked และ .filter()
- เทียบกับ querySelectorAll ของ JavaScript มาตรฐาน
- Lab: ไฮไลต์ข้อมูลในตารางตามเงื่อนไข
Section 4: Lab: เดินใน DOM ด้วย Traversing
- ทำความเข้าใจโครงสร้าง DOM และ Node
- ทำงานกับ Node ลูกด้วย .children() และ .find()
- ขึ้นหาแม่ด้วย .parent() และ .closest()
- Node พี่น้องด้วย .siblings(), .next() และ .prev()
- Lab: เปิดปิดรายละเอียดในรายการคำถามที่พบบ่อย
Section 5: Lab: แก้ไขเนื้อหา Attribute และ Style
- อ่านและเขียนเนื้อหาด้วย .text(), .html() และ .val()
- .attr() กับ .prop() ต่างกันอย่างไร
- จัดการ Class ด้วย .addClass() และ .toggleClass()
- เพิ่มและลบ Element และระวัง XSS เมื่อใช้ .html()
- Lab: รายการสินค้าที่เพิ่มและลบได้
Day 2 Event, ฟอร์ม, Ajax และ jQuery UI
Section 6: Lab: Event Handler
- ผูก Event ด้วย .on() และยกเลิกด้วย .off()
- Click, Change, Submit และ Keyboard Event
- mouseenter และ mouseleave แทน .hover() แบบเดิม
- Event Object, preventDefault และ Event Delegation
- Lab: ตะกร้าสินค้าที่ปุ่มใหม่ยังทำงานได้
Section 7: Lab: Effect และ Animation
- .show(), .hide(), .fadeIn() และ .slideToggle()
- สร้าง Animation ด้วย .animate()
- ใช้ Class คู่กับ CSS Transition เพื่อความลื่นไหล
- เคารพการตั้งค่าลดการเคลื่อนไหวของผู้ใช้
- Lab: แบนเนอร์และกล่องแจ้งเตือนแบบเลื่อนเปิด
Section 8: Lab: ฟอร์มและ Ajax เบื้องต้น
- อ่านค่าฟอร์มด้วย .val() และ .serialize()
- ตรวจข้อมูลก่อนส่งและแสดงข้อความแจ้งเตือน
- โหลดข้อมูล JSON ด้วย $.ajax() และ $.getJSON()
- จัดการผลสำเร็จและข้อผิดพลาด และเทียบกับ fetch
- Lab: ค้นหาและแสดงรายการจาก API
Section 9: Lab: jQuery UI 1.14
- ติดตั้ง jQuery UI ที่รองรับ jQuery 4
- Widget ที่ใช้บ่อย เช่น Datepicker, Dialog, Tabs และ Accordion
- Theme, Options, Events และ Methods ของ Widget
- สถานะโหมดดูแลรักษาและทางเลือกในงานใหม่
- Lab: ฟอร์มจองที่มีปฏิทินและกล่องยืนยัน
Section 10: Workshop: เมนูนำทางของเว็บไซต์
- Dropdown Menu ที่ใช้ได้ทั้งเมาส์และคีย์บอร์ด
- Breadcrumb ที่สร้างจากโครงสร้างหน้า
- Tree เมนูแบบพับเก็บได้หลายระดับ
- ใส่ ARIA ให้เมนูเข้าถึงได้ด้วย Screen Reader
- Workshop: รวมเมนูทั้งหมดในหน้าเว็บตัวอย่าง
รอบอบรมและรูปแบบการอบรม
สำหรับบุคคล — รอบอบรมทั่วไป
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
สำหรับองค์กร — In-house / Private Training
- ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
- เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
- ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
วิทยากรผู้สอน
คำถามที่พบบ่อย
jQuery Selector ทำงานอย่างไร
Selector ของ jQuery ใช้รูปแบบเดียวกับ CSS Selector เช่น #id, .class, ชื่อแท็ก หรือ [attribute=value] เมื่อเรียก $("...") jQuery จะค้นหา Element ที่ตรงเงื่อนไขทั้งหมดแล้วคืนเป็น jQuery Object ที่สั่งงานต่อได้ทันทีและเรียงต่อกันได้ (Chaining) ใน JavaScript มาตรฐานทำแบบเดียวกันได้ด้วย querySelector และ querySelectorAll ซึ่งหลักสูตรนี้สอนเทียบกันให้เห็นทั้งสองแบบ
ผูก Event Click ด้วย jQuery ทำอย่างไร
แนวทางปัจจุบันคือใช้ .on() เช่น $("#btn").on("click", function (e) { ... }) แทนเมธอดย่ออย่าง .click() หรือ .bind() ที่เลิกแนะนำแล้ว ถ้าปุ่มถูกสร้างขึ้นภายหลัง ให้ใช้ Event Delegation โดยผูกกับ Element แม่ เช่น $("#list").on("click", ".btn", handler) และยกเลิก Event ด้วย .off()
jQuery ต่างจากการเขียน JavaScript ล้วนอย่างไร ยังจำเป็นอยู่ไหม
jQuery ช่วยให้เลือก Element จัดการ DOM ผูก Event และเรียก Ajax ได้ด้วยโค้ดสั้น ซึ่งเคยสำคัญมากเมื่อเบราว์เซอร์แต่ละตัวทำงานไม่เหมือนกัน ปัจจุบัน JavaScript มาตรฐานทำสิ่งเหล่านี้ได้เองแล้ว โปรเจกต์ใหม่จึงมักไม่ใช้ jQuery แต่เว็บไซต์เดิม ระบบภายในองค์กร และ Theme หรือ Plugin ของ CMS จำนวนมากยังใช้อยู่ การเข้าใจ jQuery 4 จึงยังจำเป็นสำหรับการดูแลและปรับปรุงงานเหล่านี้
หลักสูตร Basic jQuery เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
เหมาะกับผู้เริ่มต้นที่รู้ HTML และ CSS และอยากเพิ่มลูกเล่นให้หน้าเว็บ นักพัฒนาและผู้ดูแลเว็บที่ต้องแก้ไขระบบเดิมที่ใช้ jQuery ผู้ปรับแต่ง Theme หรือ Plugin ของ WordPress และ IT Manager ที่ต้องเข้าใจโค้ดในระบบ ควรเขียน HTML และ CSS ได้และเข้าใจการทำงานของเว็บเบื้องต้น ถ้าเคยเขียนโปรแกรมมาบ้างจะเรียนได้เร็วขึ้น
เรียนจบหลักสูตร Basic jQuery แล้วทำอะไรได้บ้าง
นำ jQuery 4 เข้าโปรเจกต์ได้ เลือกและแก้ไข Element ด้วย Selector และ Traversing ผูก Event ด้วย .on() และ Event Delegation ทำ Effect ตรวจฟอร์ม โหลดข้อมูลด้วย Ajax ใช้ Widget ของ jQuery UI และสร้าง Dropdown Menu, Breadcrumb และ Tree ได้ รวมถึงอ่านโค้ด jQuery เดิมและรู้ว่าส่วนไหนควรปรับ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
จัดอบรมหลักสูตร Basic jQuery ให้ทีมในองค์กรได้ไหม
ได้ หลักสูตรนี้จัดแบบ In-house ได้ และปรับตัวอย่างให้ตรงกับเว็บไซต์หรือระบบที่ทีมดูแลอยู่ เช่น Theme ของ WordPress หรือหน้าจอของระบบภายใน และเน้นหัวข้อการปรับโค้ด jQuery เดิมให้ใช้กับ jQuery 4 ได้ สามารถติดต่อสถาบันเพื่อขอใบเสนอราคาได้