อธิบาย jQuery เบื้องต้น

jQuery ก็คือ JavaScript Library ที่เข้ามาช่วยอำนวยความสะดวกและสีสันลูกเล่นต่าง ๆ ให้แก่เว็บในการเขียนโค้ดสำหรับผู้พัฒนา ทำให้เราเขียน code ได้สั้นลงและไวยิ่งขึ้น

เริ่มต้นทดลองใช้ jQuery

เริ่มจากสร้างไฟล์ html ขึ้นมาเพื่อใช้งานก่อน

Selector & Click

selector คือ เลือก element นั้นตามชื่อของ element (อธิบายต่อด้านล่าง)

click ก็คือ click จะทำงานเมื่อคลิก โดย click ก็มี double click ด้วยโดยใช้ .dblclick แทน

selector -> เลือก $(“button”) ก็จะไปดึง <button> ใน body มา

เมื่อเรา click จะทำ function ที่เลือกที่ $(“p”) -> <p> แล้ว .hide() คือให้ซ่อน ผลลัพธ์ก็จะได้ดังนี้

เมื่อคลิก <p> ทั้งหมดก็จะถูกซ่อน

เลือกด้วย id หรือ #id Selector

<p id=”test”> คือให้ข้อความนี้มี id เป็น test

ในการเรียกใช้ id นั้น เราจะใส่ #ตามด้วยชื่อ id นั้น

ผลลัพธ์ก็จะได้ดังนี้

เมื่อคลิก id test ก็จะถูกซ่อนไป

เลือกด้วย Class หรือ .class Selector ก็แค่เปลี่ยน code ด้านบนจาก id เป็น class และ จากเรียกด้วย # เปลี่ยนเป็น . แล้วตามด้วยชื่อ

Callback

callback คือการเรียก function อีก function นึงโดยทำหลังจาก code ด้านหน้าทำเสร็จแล้ว

Typical syntax: $(selector).hide(speed,callback);

ผลลัพธ์

เมื่อเรากดปุ่มข้อความจะถูกซ่อนช้าๆ และเมื่อหายไปจะไปเรียก function ที่ตอบกลับ alert กลับมา (ที่ function นี้คือ callback)

Each

each คือแต่ละอันอะไรประมาณนี้

ผลลัพธ์

เมื่อกดปุ่ม

เลือกที่ <li>ใน <li> มี 3 อันคือ coffee, milk, soda ให้ส่งข้อความ alert กลับมาจำนวนตาม <li> ที่มี ในนี้มี 3 อันก็จะ alert 3 ครั้งเป็น coffee, milk, soda

Change

change คือเปลี่ยนแปลงอะไรสักอย่าง

ผลลัพธ์

เมื่อเราใส่ข้อมูล หรือ เลือก Car ให้เปลี่ยนพื้นหลังเป็น “#D6D6FF” หรือสีม่วง

ศึกษาเพิ่มเติมได้ ที่นี่