jQuery Academy · บทเรียน

ก้าวแรกกับ jQuery

ก้าวแรกกับ jQuery เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 1 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 1 บทเรียน

บทนำ

สวัสดีค่ะ/ครับ

หากต้องการใช้ไลบรารี JQuery เราต้องเพิ่มไลบรารีนี้ลงในเอกสาร HTML ก่อน

ในตัวอย่างด้านล่าง ที่อยู่ของไลบรารี jQuery ถูกเพิ่มเป็นค่าของแอตทริบิวต์ src ระหว่างแท็ก head

ตอนนี้ไลบรารี jQuery ก็พร้อมใช้งานในโครงการของเราแล้ว

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>

การเลือกด้วย jQuery

เพื่อดำเนินการกับองค์ประกอบ HTML (ต่อไปเราจะเรียกองค์ประกอบเหล่านี้ว่า DOM) เราต้องเลือกองค์ประกอบนั้นก่อน

ใน jQuery เราใช้เมธอด $() หรือ jQuery() เพื่อทำการเลือก

นักพัฒนาซอฟต์แวร์มักนิยมใช้เมธอด $() มากกว่า

เราจะกำหนดองค์ประกอบที่ต้องการเลือกผ่านพารามิเตอร์ที่ส่งให้เมธอดนี้

Xpath

นิพจน์ที่เราส่งให้เมธอด $ คือตัวเลือก XPath ซึ่งเรารู้จักจาก CSS เช่นกัน

กล่าวอีกอย่างคือ เราเลือกองค์ประกอบ HTML ใน JQuery ด้วยวิธีเดียวกับการเลือกใน CSS

ตัวอย่าง Xpath

สมมติว่าโค้ด HTML ของเราเป็นดังนี้

<div id="my-box" class="my-box">

<p class="my-p">

<span class="my-text">Hello jQuery</span>

</p>

</div>

มาเลือกองค์ประกอบ HTML โดยใช้ jQuery กัน

// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
  console.log("Selector:", selector);
  return [];
}

// Selects the element with the id of my-box.
$('#my-box')

// Selects the element with the my-box class.
$('.my-box')

// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')

// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')

jQuery ช่วยให้เราเขียนโค้ดได้กระชับยิ่งขึ้น

หากต้องการทำสิ่งเดียวกันด้วย Vanilla (JavaScript แบบพื้นฐาน) เราจะต้องเขียนโค้ดหลายบรรทัดกว่า

jQuery ช่วยให้เราเขียนโค้ดได้กระชับยิ่งขึ้นผ่านเมธอดของตนเอง

คำเตือน

JQuery เป็นเพียงไลบรารี และในความเป็นจริงแล้ว ช่วยให้การพัฒนาเว็บง่ายกว่า Vanilla JavaScript

ข้อมูล

ข้อดีอีกประการของ jQuery คือเบราว์เซอร์สมัยใหม่ทั้งหมดรองรับโค้ดที่เราเขียน

โค้ดบางส่วนที่เราเขียนด้วย VanillaJS อาจทำให้เกิดผลข้างเคียงในเบราว์เซอร์บางรุ่น แต่ jQuery รับรองว่าโค้ดจะทำงานในลักษณะเดียวกันบนทุกเบราว์เซอร์ด้วยนามธรรมที่ไลบรารีจัดเตรียมไว้

JQuery ช่วยให้เราไม่ต้องคำนึงถึงความแตกต่างเฉพาะของเบราว์เซอร์ขณะเขียนโค้ด

$(document).ready

ก่อนเข้าสู่พื้นฐานของ jQuery มาเรียนรู้เมธอด $(document).ready กันก่อน

อย่างที่เราจำได้เกี่ยวกับ HTML เราเคยกล่าวว่าสามารถวาง JavaScript ไว้ที่ใดก็ได้ระหว่างแท็ก head หรือระหว่างแท็ก body ใน HTML

$ (document).ready 2

สมมติว่าเรามีโค้ด HTML ดังตัวอย่างด้านล่าง

เบราว์เซอร์ของเราจะประมวลผลโค้ดตั้งแต่แท็ก <!DOCTYPE html> ไปจนถึงแท็กปิด </html>

คำสั่ง <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> จะเริ่มดาวน์โหลดไลบรารีผ่าน code.jquery.com

ในบรรทัดถัดมา คำสั่งนี้เลือก DOM โดยใช้เมธอด $ ของ jQuery อย่างไรก็ตาม ตรงนี้มีปัญหาอยู่ หากเอกสาร HTML ยังโหลดไม่เสร็จในขณะที่เรียกใช้เมธอด $ ('# test') โค้ด JS ของเราจะทำงานล้มเหลว

ในกรณีนี้ เราใช้เมธอด $(document).ready เพื่อรับรองว่าเอกสารโหลดเสร็จสมบูรณ์แล้ว

<div id="test">Hello Coddy</div>

<script>
 $('#test').text('Hello Coddy') 
</script>

$ (document).ready 3

หลังจากคำจำกัดความข้างต้น

สิ่งเดียวที่เราต้องทำคือใช้เมธอด $(document).ready() เมธอดนี้จะรอให้เนื้อหาทั้งหมดโหลดเสร็จ แล้วจึงทำงาน

<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>

<script>
 $(document).ready(function(){
   $('#test').text('Hello Coddy') 
  })
</script>
</body>
</html>

คำถาม

มาเลยครับ ตอบคำถามกัน!

ขอแสดงความยินดี

ขอแสดงความยินดี 🎉

ในส่วนนี้ เราได้เริ่มเรียนรู้ไลบรารี jQuery และเมธอด $(document).ready() ของไลบรารีนี้

ในส่วนถัดไป เราจะเรียนรู้ตัวเลือกของ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

← กลับไปที่ jQuery Academy