เรียน jQuery: ลงมือทำจริง
เรียน jQuery: ลงมือทำจริง — เรียนรู้ jQuery บนโทรศัพท์ของคุณ: เขียนเชนแล้วดูหน้าเว็บตอบสนองแบบเรียลไทม์
เรียน jQuery: ลงมือทำจริง คือแอป iOS และ Android ที่เริ่มต้นใช้งานได้ฟรี สอน jQuery JavaScript library ทั้งการจัดการ DOM, อีเวนต์, เอฟเฟกต์ และ AJAX สำหรับผู้เริ่มต้น นักเรียน นักศึกษา และนักพัฒนาที่ดูแลเว็บไซต์ jQuery แต่ละบทเรียนมาพร้อมเอดิเตอร์แบบสดและตัวอย่างหน้าเว็บ และมี jQuery 3.7.1 ในตัว คุณจึงเขียนโค้ดแล้ว รันบนโทรศัพท์ได้แม้ในโหมดออฟไลน์ AI Mentor ตอบคำถามเกี่ยวกับ selector, ข้อผิดพลาด หรือการเรียกใช้ AJAX ได้
- ราคา
- ฟรี อัปเกรดเป็น Pro
- แพลตฟอร์ม
- iOS และ Android
- ภาษา
- 22
- การจัดอันดับอายุ
- 4+
- ต้องใช้
- iOS 15.1 ขึ้นไป
ถ้าคุณรู้จัก CSS selector คุณก็รู้จัก jQuery ไปเกือบทั้งหมดแล้ว
jQuery นำ selector มาจาก CSS และให้คุณเชื่อมการทำงานต่อเนื่องกับผลลัพธ์ได้ จึงเป็นจุดเริ่มต้นที่เข้าใจง่ายสำหรับการทำความรู้จัก DOM, อีเวนต์ และโค้ดแบบอะซิงโครนัส อีกทั้งยังเป็นทักษะที่ใช้ได้จริงกับเว็บไซต์จำนวนมากที่ยังพึ่งพา jQuery อยู่
คืออะไร
เรียน jQuery: ลงมือทำจริง คือแอปคอร์สสำหรับ iOS และ Android ที่สอน jQuery JavaScript library ภายในมี 22 คอร์ส รวม 48 บทเรียนตั้งแต่ระดับ A1 ถึง C1, เอดิเตอร์ JavaScript แบบสดพร้อมตัวอย่างหน้าเว็บที่รันบนอุปกรณ์โดยมี jQuery 3.7.1 ในตัว, ภารกิจแก้บั๊ก 20 ภารกิจ, โปรเจกต์ HTML และ CSS แบบมีคำแนะนำ 20 โปรเจกต์, คำถามสัมภาษณ์ 50 ข้อ, คำถามแบบทดสอบ 50 ข้อ และชีตสรุป 91 รายการ AI Mentor อธิบาย selector, ข้อผิดพลาด และการเรียกใช้ AJAX ด้วยภาษาที่เข้าใจง่าย
ภายในแอป
หน้าตาเป็นอย่างไร
คอร์ส
คอร์ส jQuery ครอบคลุมเรื่องอะไรบ้าง
เนื้อหานำมาจากรายการคอร์ส jQuery ของ CoddyKit ตั้งแต่การเรียกใช้ $ ครั้งแรก ไปจนถึง plugins, testing และการทำงานร่วมกับ modern JavaScript
ยินดีต้อนรับสู่ jQuery และก้าวแรก
ทำความรู้จัก jQuery ปัญหาจริงที่ jQuery เข้ามาแก้ และเหตุผลที่เว็บไซต์จำนวนมากยังคงใช้งานอยู่ จากนั้นเรียนรู้ chain แรกและพื้นฐานสำหรับผู้เริ่มต้น
การเลือก elements และการไล่ดู DOM
เรียนรู้การเลือก elements จากนั้นต่อด้วย selectors ขั้นสูงสำหรับ attributes และ pseudo-class รวมถึงการไล่ผ่าน DOM จาก element หนึ่งไปยังอีก element หนึ่ง
การจัดการ DOM และการกำหนดสไตล์
สร้าง แทรก ย้าย และลบ elements ในสองคอร์ส พร้อมเปลี่ยน CSS และ classes จากโค้ด
Events และ delegation
เรียนรู้การจัดการ events จากนั้นต่อด้วย event delegation สำหรับ elements ที่เพิ่มเข้ามาภายหลัง และการจัดการ custom events
Animations และ effects
เริ่มจาก animations พื้นฐาน ต่อด้วย animations ที่ซับซ้อนและ custom effects เช่น ลำดับที่ chain ต่อกันและ custom easing
Forms, data และ templating
สร้างเนื้อหาแบบไดนามิกด้วย data attributes และ templating พร้อมการจัดการและ validation ของ forms ขั้นสูง
AJAX, Deferred objects และ promises
เรียนรู้การทำงานของ AJAX และการจัดการข้อมูลระยะไกล จากนั้นใช้ Deferred objects และ promises เพื่อจัดการโค้ดแบบ asynchronous
Plugins, performance และ testing
เรียนรู้ custom selectors และการกรอง การพัฒนา plugins ที่มีความทนทาน performance และแนวปฏิบัติที่ดี การผสาน jQuery เข้ากับ modern JavaScript และการ testing แอปพลิเคชัน jQuery
ทำงานอย่างไร
บทเรียนทำงานอย่างไร
แต่ละบทเรียนวางคำอธิบายสั้น ๆ ไว้ข้างโค้ดที่คุณลองรันเอง เพื่อทดสอบแนวคิดก่อนเดินหน้าต่อ
อ่านบทเรียนสั้น ๆ หนึ่งบท
เปิดหัวข้อแล้วอ่านคำอธิบายสั้น ๆ เกี่ยวกับ selector, อีเวนต์ หรือเอฟเฟกต์ บทเรียนสั้นพอที่จะเรียนระหว่างนั่งรถ และคอร์สจะค่อย ๆ พาจากเชนแรกไปจนถึง plugins และการทดสอบ
เขียนเชนแล้วดูหน้าเว็บตอบสนอง
ในเอดิเตอร์แบบสด คุณเขียน HTML, CSS และ jQuery แล้วรันพร้อมกันได้ เอดิเตอร์จะรันโค้ดของคุณใหม่เมื่อคุณหยุดพิมพ์ โดยไม่ต้องใช้เซิร์ฟเวอร์หรือขั้นตอน build และตัวอย่างหน้าเว็บจะแสดงผลลัพธ์ให้เห็น
แก้บั๊ก แล้วถาม Mentor
ภารกิจจะมอบโค้ดที่มีปัญหาให้คุณค้นหาจุดผิดพลาด เช่น click handler ที่ this กลายเป็น window, เมนูที่เลื่อนต่อเนื่องไม่หยุด หรือการบันทึกที่ทำงานซ้ำสองครั้ง เมื่อแนวคิดหรือข้อผิดพลาดใดไม่เข้าใจ AI Mentor จะอธิบายซ้ำด้วยคำที่ง่ายขึ้น
มีอะไรอยู่ข้างใน
สิ่งที่มาพร้อมแอป
22
คอร์ส ระดับ A1 ถึง C1
22 คอร์ส รวม 48 บทเรียน เริ่มตั้งแต่ฟังก์ชัน $ และเชนแรกของคุณ ต่อเนื่องไปจนถึง selector, การจัดการ DOM, อีเวนต์, แอนิเมชัน, ฟอร์ม, AJAX, plugins และประสิทธิภาพ
3.7.1
มี jQuery ในตัว
ตัวอย่างหน้าเว็บรันบนอุปกรณ์โดยมี jQuery 3.7.1 รวมอยู่ด้วย เอดิเตอร์จึงทำงานแบบออฟไลน์ได้เช่นกัน
20
ภารกิจแก้บั๊ก
บั๊กที่ให้ความรู้สึกเหมือนเจอในงานจริง เช่น เชนที่ลงท้ายด้วย string หรือปุ่มลบที่ทำงานเฉพาะกับแถวแรก ๆ
20
โปรเจกต์หน้าเว็บแบบมีคำแนะนำ
โปรเจกต์ HTML และ CSS 20 โปรเจกต์ ที่สร้าง markup ซึ่ง selector ของคุณจะนำไปใช้งานต่อในภายหลัง
91
ชีตสรุปและแบบทดสอบ
ชีตสรุป 91 รายการสำหรับ selector, อีเวนต์, เอฟเฟกต์ และเมธอด AJAX พร้อมคำถามแบบทดสอบ 50 ข้อ และคำถามสัมภาษณ์ 50 ข้อ
AI
AI Mentor
ถามเกี่ยวกับ selector, ข้อผิดพลาด หรือการเรียกใช้ AJAX แล้วรับคำตอบด้วยภาษาที่เข้าใจง่าย แผนฟรีมีคำถามให้ใช้ 3 ข้อต่อวัน
เบื้องหลัง
jQuery ยังควรค่าแก่การเรียนรู้อยู่ไหม และใช้ทำอะไรได้บ้าง
jQuery คือ JavaScript library ที่ช่วยให้การเลือกองค์ประกอบบนหน้าเว็บ การเปลี่ยนแปลงองค์ประกอบ การตอบสนองต่อการคลิก และการโหลดข้อมูลโดยไม่ต้องโหลดหน้าเว็บใหม่ทำได้ด้วยโค้ดที่สั้นลง แม้ framework รุ่นใหม่จะเข้ามาแทนที่ในโปรเจกต์ใหม่จำนวนมากแล้ว แต่เว็บไซต์เดิมจำนวนไม่น้อยยังคงใช้ jQuery อยู่ การอ่าน แก้ไข และต่อยอดโค้ดเหล่านี้จึงยังเป็นทักษะด้านการพัฒนาเว็บที่ใช้ได้จริง นอกจากนี้ยังเป็นวิธีที่เข้าใจง่ายในการทำความรู้จัก DOM, อีเวนต์ และ JavaScript แบบอะซิงโครนัส ก่อนก้าวไปใช้เครื่องมือขนาดใหญ่ขึ้น
ฟังก์ชัน $ และการเชนหนึ่งบรรทัด หลายการทำงาน
การเรียกใช้ $ พร้อม selector จะคืนค่าเป็นอ็อบเจ็กต์ jQuery และเมธอดเกือบทั้งหมดก็จะคืนค่าอ็อบเจ็กต์นั้นกลับมาอีกครั้ง นี่คือสิ่งที่ทำให้คุณเขียนเชนอย่างการเลือกรายการ เพิ่มคลาส และทำให้รายการค่อย ๆ ปรากฏได้ในบรรทัดเดียวที่อ่านง่าย แทนที่จะแยกเป็นคำสั่ง 4 บรรทัด
Selectorความรู้ CSS นำมาใช้ต่อได้
selector ของ class, id, attribute และ pseudo-class ทำงานใกล้เคียงกับใน stylesheet ส่วนเมธอดสำหรับไล่ดูโครงสร้างจะพาคุณจากองค์ประกอบหนึ่งไปยัง parent, child หรือ sibling ทำให้เข้าถึงแถวที่ต้องการได้ แม้หน้าเว็บจะมีแถวลักษณะคล้ายกันหลายร้อยแถว
การมอบหมายอีเวนต์ทางแก้สำหรับองค์ประกอบที่ถูกเพิ่มภายหลัง
handler ที่ผูกไว้กับปุ่มจะทำงานเฉพาะกับปุ่มที่มีอยู่ตอนโค้ดทำงานเท่านั้น การผูก handler ไว้กับ parent แล้วกรองด้วย selector จะทำให้ใช้งานได้กับแถวที่เพิ่มเข้ามาภายหลังด้วย นี่เป็นสาเหตุคลาสสิกที่ทำให้ปุ่มลบทำงานเฉพาะกับแถวเก่า
สิ่งที่ this อ้างถึงบั๊กที่พบบ่อย
ภายใน jQuery handler, this คือองค์ประกอบที่ได้รับอีเวนต์ แต่ arrow function หรือ callback ที่วางผิดตำแหน่งอาจทำให้ความหมายเปลี่ยนไป การดีบัก handler ที่ this กลายเป็น window จึงเป็นบั๊กจริงครั้งแรกที่พบได้บ่อย
AJAX และ promisesข้อมูลโดยไม่ต้องโหลดใหม่
$.ajax() จะส่งคำขอและเปิดให้หน้าเว็บอัปเดตเมื่อได้รับคำตอบกลับมา Deferred objects และ promises ช่วยจัดการคำขอหลายรายการเหล่านี้ เพื่อให้ขั้นตอนหนึ่งรออีกขั้นตอนแทนการซ้อน callback หลายชั้น
เหมาะกับคุณไหม
เหมาะกับใคร — และไม่เหมาะกับใคร
เหมาะกับคุณหากคุณ
- รู้ HTML และ CSS อยู่บ้าง และอยากทำให้หน้าเว็บตอบสนองต่อการคลิกและ forms
- ดูแลเว็บไซต์ที่สร้างด้วย jQuery และต้องการอ่านหรือแก้ไขโค้ด
- กำลังเตรียมตัวสัมภาษณ์งานด้าน front end ที่ยังพบ legacy jQuery
- อยากเขียนโค้ดบนโทรศัพท์และดูตัวอย่างหน้าเว็บได้ทันที
- เรียนรู้ได้ดีที่สุดในช่วงเวลาสั้น ๆ และชอบมี mentor ให้ถาม
ไม่ใช่เครื่องมือที่เหมาะ หากคุณ
- อยากเรียนรู้ framework สมัยใหม่อย่าง React แต่แอปนี้สอน jQuery และ DOM
- ต้องการให้ทุกคอร์สเรียนฟรี: คอร์สแรก โปรเจกต์แรก และ missions สองรายการเปิดให้ใช้ฟรี ส่วน Pro จะปลดล็อกเนื้อหาที่เหลือ
- คาดหวังเวอร์ชันฟรีที่ไม่มีโฆษณาไม่ได้ เพราะ Pro เป็นตัวลบโฆษณา
คำถาม
คำถามที่พบบ่อย
วิธีที่ดีที่สุดในการเรียนรู้ jQuery บนโทรศัพท์คืออะไร
วิธีที่ได้ผลที่สุดคือการเขียนโค้ดและดูหน้าเว็บเปลี่ยนแปลง ไม่ใช่แค่อ่านเรื่อง selectors เท่านั้น เรียน jQuery: ลงมือทำจริง ให้แต่ละบทเรียนสั้น ๆ มี live editor พร้อมตัวอย่างหน้าเว็บแบบเรียลไทม์ โดยมี jQuery 3.7.1 ในตัว จึงรันบนอุปกรณ์ได้ และมี AI Mentor ช่วยอธิบายทุกเรื่องที่ยังไม่เข้าใจ เริ่มต้นใช้งานได้ฟรีบน iOS และ Android
jQuery เหมือนกับ JavaScript หรือไม่
ไม่เหมือนกัน JavaScript คือภาษาโปรแกรม ส่วน jQuery คือ library ที่เขียนด้วย JavaScript และช่วยย่อขั้นตอนที่ใช้บ่อย เช่น การเลือก elements การตอบสนองต่อการคลิก และการส่งคำขอ AJAX เรียน jQuery: ลงมือทำจริง สอน jQuery ภายใน JavaScript editor เพื่อให้คุณฝึกทั้งสองอย่างไปพร้อมกัน และเห็นว่า chain แต่ละแบบเชื่อมโยงกับโค้ด DOM แบบปกติอย่างไร
การเรียนรู้ jQuery ยังมีประโยชน์อยู่ไหม
สำหรับโปรเจกต์ใหม่ หลายทีมเลือกใช้เครื่องมืออื่น แต่เว็บไซต์ที่มีอยู่จำนวนมากยังคงทำงานด้วย jQuery ดังนั้นการอ่านและแก้ไขโค้ดเหล่านั้นจึงเป็นทักษะที่ใช้ได้จริง นอกจากนี้ยังเป็นทางเข้าสู่ DOM, events และ asynchronous JavaScript ที่เรียนรู้ได้ง่าย เรียน jQuery: ลงมือทำจริง มีคำถามสัมภาษณ์สำหรับงานด้าน front end ที่ยังพบ legacy jQuery อยู่
เรียน jQuery: ลงมือทำจริง มีบน iPhone และ Android หรือไม่
มี เรียน jQuery: ลงมือทำจริง พร้อมให้ดาวน์โหลดบน App Store สำหรับ iPhone (iOS 15.1 หรือใหม่กว่า) และบน Google Play สำหรับ Android อินเทอร์เฟซมี 22 ภาษา ได้แก่ English, Spanish, German, French, Portuguese, Japanese, Korean, Arabic, Hindi และ Turkish ส่วนโค้ดที่คุณเขียนยังคงเป็น jQuery และ JavaScript ไม่ว่าจะใช้ภาษาใด
ฉันสามารถรันโค้ด jQuery แบบออฟไลน์ในแอปได้ไหม
ได้สำหรับ editor โดยมี jQuery 3.7.1 ใน เรียน jQuery: ลงมือทำจริง ทำให้ตัวอย่างหน้าเว็บทำงานบนอุปกรณ์ได้แม้ออฟไลน์ ฟีเจอร์ที่ต้องใช้ AI Mentor จำเป็นต้องเชื่อมต่ออินเทอร์เน็ต
คอร์ส jQuery ครอบคลุมหัวข้ออะไรบ้าง
คอร์สทั้ง 22 คอร์สเริ่มตั้งแต่ฟังก์ชัน $ และ selectors ไปจนถึงการจัดการ DOM, styling, events และ delegation, animations, forms, AJAX, Deferred objects และ promises จากนั้นต่อด้วย custom selectors, การเขียน plugins, performance, การผสาน jQuery เข้ากับ modern JavaScript และ testing
debugging missions คืออะไร
เป็นแบบฝึกหัด 20 ข้อที่ให้คุณแก้โค้ด jQuery ที่ใช้งานไม่ได้ และค้นหาจุดบกพร่องในลักษณะเดียวกับที่เกิดขึ้นในการทำงาน ตัวอย่างเช่น click handler ที่ทำให้ this เป็น window, chain ที่จบลงด้วย string, ปุ่มลบที่ทำงานเฉพาะกับแถวเก่า, เมนูที่ยังเลื่อนต่อแม้คุณออกจากหน้าไปแล้ว และการบันทึกที่ทำงานซ้ำสองครั้ง
ฉันจำเป็นต้องรู้ JavaScript หรือ HTML มาก่อนหรือไม่
การรู้ HTML และ CSS อยู่บ้างจะช่วยได้ เพราะ jQuery selectors ทำงานกับ markup และมีรูปแบบบางส่วนที่ยืมมาจาก CSS เรียน jQuery: ลงมือทำจริง ยังมีโปรเจกต์หน้าเว็บ HTML และ CSS แบบมีคำแนะนำ 20 โปรเจกต์ เพื่อให้คุณสร้าง markup ที่ selectors ของคุณจะนำไปใช้ คอร์สเริ่มตั้งแต่ chain แรก
เรียน jQuery: ลงมือทำจริง เรียนฟรีหรือไม่
คุณเริ่มเรียนได้ฟรี: คอร์สแรก guided project แรก missions สองรายการ editor, quizzes, interview questions, cheat sheet และคำถาม AI Mentor 3 ข้อต่อวัน เวอร์ชันฟรีมีโฆษณา ส่วน Pro จะปลดล็อกทุกคอร์ส โปรเจกต์ และ missions รวมถึงการสอบ certificate และ AI Mentor แบบไม่จำกัด พร้อมลบโฆษณา มีให้เลือกสมัครสมาชิกแบบรายสัปดาห์ รายเดือน หรือรายปี หรือซื้อแบบ lifetime ครั้งเดียว การสอบ certificate เมื่อจบคอร์สเป็นส่วนหนึ่งของ Pro
แอปนี้มีความเกี่ยวข้องกับ jQuery หรือไม่
ไม่ใช่ jQuery เป็นเครื่องหมายการค้าของ OpenJS Foundation และ เรียน jQuery: ลงมือทำจริง เป็นแอปเรียนรู้แบบอิสระที่ไม่มีส่วนเกี่ยวข้องหรือได้รับการรับรองจาก OpenJS Foundation
เริ่มต้นใช้งาน
เขียน jQuery chain แรกของคุณวันนี้
เริ่มต้นใช้งานฟรีบน iOS และ Android ใน 22 ภาษา
เพิ่มเติมจาก CoddyKit
ใช้งานได้บน iOS และ Android