jQuery สำหรับผู้เริ่มต้น
jQuery สำหรับผู้เริ่มต้น
jQuery สำหรับผู้เริ่มต้น เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 1 บทเรียน
บทนำ
สวัสดีค่ะ/ครับ
ยินดีต้อนรับสู่หลักสูตร jQuery สำหรับผู้เริ่มต้น
ในส่วนนี้ เราจะเริ่มเรียนรู้ข้อมูลโดยละเอียดเกี่ยวกับ jQuery
บทนำ 2
ก่อนเริ่มหลักสูตรนี้
คุณจำเป็นต้องเรียนหลักสูตรต่อไปนี้มาก่อน
- เริ่มต้นใช้งาน HTML
- เริ่มต้นใช้งาน CSS
- แกนหลักของ JavaScript
- หากคุณมีความรู้เกี่ยวกับหัวข้อเหล่านี้อยู่แล้ว คุณสามารถเรียนต่อได้เลย
มาเริ่มกันเลย
มาเริ่มกันเลย
ก่อนอื่น มาตอบคำถามว่า JQuery ใช้ทำอะไร
ก่อนตอบคำถาม มาทบทวนพื้นฐานกันก่อน
ก่อนตอบคำถาม มาทบทวนพื้นฐานกันก่อน
ภาษา HTML เป็นภาษามาร์กอัป ดังนั้นจึงเป็นภาษาสำหรับจัดรูปแบบข้อความ ไม่ใช่ภาษาโปรแกรม และแตกต่างจากแนวคิดอย่างการเขียนโปรแกรมเชิงวัตถุโดยสิ้นเชิง กล่าวอีกอย่างคือ โครงสร้างของ HTML ไม่มีออบเจ็กต์ สิ่งที่เรารู้จักคือแท็ก HTML แอตทริบิวต์ และอื่น ๆ
JavaScript ดำเนินการกับ DOM
หลายครั้งเราจำเป็นต้องดำเนินการกับองค์ประกอบ HTML บนหน้าเว็บ เพื่อให้ทำเช่นนั้นได้และทำให้ JS เข้าถึงองค์ประกอบ HTML เราจึงแทนองค์ประกอบเหล่านั้นด้วยแบบจำลองที่เรียกว่า DOM (Document Object Model)
JavaScript ดำเนินการกับ DOM ซึ่งเป็นสิ่งที่เทียบเท่ากับหน้าเว็บในรูปแบบออบเจ็กต์ เราเรียกการทำเช่นนี้ว่าการจัดการ DOM
ตัวอย่าง
มาดูตัวอย่างกัน
เรามีองค์ประกอบปุ่มดังตัวอย่างด้านล่าง และมีข้อความว่า 'Not Clicked' เมื่อเราคลิกปุ่ม เราจะเปลี่ยนข้อความของปุ่มเป็น 'Clicked'
เพื่อให้ทำเช่นนี้ได้ เราต้องจัดการ DOM โดยใช้ภาษา JavaScript
ในหลักสูตรบทนำสู่ JavaScript เราได้เรียนรู้วิธีจัดการเอกสารเว็บด้วย JavaScript แล้ว JQuery เป็นไลบรารีที่ช่วยให้เราจัดการ DOM ได้กระชับและสั้นยิ่งขึ้นเมื่อใช้ร่วมกับ JavaScript
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>คำถาม
มีคำถามให้คุณตอบครับ!
ตัวอย่าง 2
ในตัวอย่างด้านล่าง เราได้กำหนดปุ่มที่มี id เป็น my-button
ตอนนี้มาเข้าถึงองค์ประกอบนี้ด้วย JavaScript ผ่าน DOM กัน
เมื่อเราคลิกปุ่ม เราจะเข้าถึง DOM ด้วยโค้ด JS และเปลี่ยนคุณสมบัติ innerHTML ขององค์ประกอบที่มี id เป็น my-button ให้เป็น click
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>คำเตือน
JQuery เป็นเพียงไลบรารีที่สร้างขึ้นเพื่อทำให้การใช้ฟังก์ชันและเมธอดใน JS Core ง่ายขึ้น
กล่าวอีกอย่างคือ ไลบรารีนี้ช่วยให้เราทำสิ่งต่าง ๆ ที่ทำได้ด้วย VanillaJS ได้ง่ายขึ้น โดยใช้ไวยากรณ์ที่อ่านเข้าใจง่าย
คำอธิบายตัวอย่าง
มาอธิบายโค้ดกัน
let myButton = document.getElementById('my-button');
เรากำหนดออบเจ็กต์ document ของ Javascript ให้กับตัวแปรชื่อ myButton โดยใช้เมธอด getElementById
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
จากนั้น เรารับฟังเหตุการณ์ click ของปุ่มและเปลี่ยนแปลงปุ่ม
เราได้จัดการ DOM โดยใช้ความสามารถหลักของภาษา โดยไม่ใช้ไลบรารีหรือเฟรมเวิร์กใด ๆ ซึ่งเรียกว่าการใช้แบบเนทีฟหรือแบบวานิลลา
ลองเขียนโค้ดเดียวกันด้วย jQuery และใช้ประโยชน์จากความสามารถที่ไลบรารี jQuery มอบให้กัน
คำเตือน
แนวคิดที่ มักเขียนว่า VanillaJS ในหลายแห่ง แท้จริงแล้วหมายถึงออบเจกต์ เมธอด และฟังก์ชันหลักของจาวาสคริปต์ล้วน ๆ รวมถึงการใช้ความสามารถที่เบราว์เซอร์มีให้
ตัวอย่าง jQuery
ด้านล่างนี้ เราได้ทำตัวอย่างก่อนหน้านี้โดยใช้ jQuery
โปรดระมัดระวังไม่ให้การย่อโค้ดมากเกินไปจนละเลยไวยากรณ์
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>ขอแสดงความยินดี
ขอแสดงความยินดี 🎉
ในส่วนนี้ เราได้เริ่มเรียนรู้ jQuery และเข้าใจแล้วว่า jQuery ช่วยให้ชีวิตของเราง่ายขึ้นได้มากเพียงใด
พบกันในส่วนถัดไปค่ะ/ครับ
คำถามที่พบบ่อย
บทเรียน “jQuery สำหรับผู้เริ่มต้น” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “jQuery สำหรับผู้เริ่มต้น” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 1 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “jQuery สำหรับผู้เริ่มต้น”
jQuery สำหรับผู้เริ่มต้น คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน
บทเรียน “jQuery สำหรับผู้เริ่มต้น” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม
ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ