การเพิ่มเหตุการณ์ลงใน JQuery Objects สำหรับ HTML5 และ CSS3 การเขียนโปรแกรม - dummies

ไลบรารี jQuery เพิ่มอีกหนึ่งความสามารถที่มีประสิทธิภาพในการใช้งานจาวาสคริปต์ อนุญาตให้โปรแกรมเมอร์ HTML5 และ CSS3 สามารถแนบกิจกรรมกับวัตถุ jQuery ใด ๆ ได้อย่างง่ายดาย ลองดูที่ hover HTML

เมื่อคุณเลื่อนเคอร์เซอร์ไปที่รายการใด ๆ เส้นขอบจะปรากฏขึ้นรอบ ๆ รายการ นี่ไม่ใช่ผลยากที่จะบรรลุใน CSS สามัญ แต่จะง่ายกว่าใน jQuery

วิธีเพิ่มเหตุการณ์เลื่อนไป

ดูโค้ดเพื่อดูวิธีการทำงาน:

เลื่อนเมาส์ไปทางซ้าย html $ (init); ฟังก์ชัน init () {$ ("li") hover (border, noBorder);} // end ฟังก์ชัน init () {$ (นี้) css ("border", "1px solid black");} ฟังก์ชัน noBorder () {$ (นี้) css ("border", "0px none black");}

Hover Demo

alpha
beta
gamma
delta

HTML อาจไม่ง่ายกว่า นี่เป็นเพียงรายการที่ไม่มีลำดับชั้นเท่านั้น JavaScript ไม่ซับซ้อนมากนัก ประกอบด้วยฟังก์ชันสามบรรทัดหนึ่ง:

• init () เรียกว่าเมื่อเอกสารพร้อม ทำให้วัตถุ jQuery ของไอเท็มรายการทั้งหมดและแนบเหตุการณ์กับพวกเขา ฟังก์ชัน hover () ยอมรับพารามิเตอร์สองตัว:

  • ฟังก์ชันแรกคือฟังก์ชันที่จะถูกเรียกเมื่อเคอร์เซอร์เคลื่อนที่ไปเหนือวัตถุ

  • ส่วนที่สองคือฟังก์ชันที่จะเรียกเมื่อเคอร์เซอร์ออกจากวัตถุ

• border () วาดเส้นขอบรอบองค์ประกอบปัจจุบัน ตัวระบุ $ (this) ถูกใช้เพื่อระบุออบเจกต์ปัจจุบัน

• border () แต่จะเอาเส้นขอบออกจากวัตถุปัจจุบัน ในตัวอย่างนี้ใช้ฟังก์ชันที่แตกต่างกันสามแบบ โปรแกรมเมอร์ jQuery หลายคนชอบที่จะใช้ฟังก์ชันที่ไม่ระบุตัวตน (บางครั้งเรียกว่า lambda

) เพื่อรวมฟังก์ชันทั้งหมดไว้ในบรรทัดเดียว: $ ("li") ("border", "1px solid black");}, function () {$ (นี้) css ("border", "0px none black");}); โปรดทราบว่านี่เป็นบรรทัดรหัสเดียวในทางเทคนิค คุณสามารถสร้างฟังก์ชันได้ทันทีที่ต้องการ นิยามฟังก์ชันแต่ละตัวเป็นพารามิเตอร์ที่ใช้วิธี hover ()

ถ้าคุณเป็นนักวิทยาศาสตร์ด้านคอมพิวเตอร์คุณอาจโต้แย้งว่านี่ไม่ใช่ตัวอย่างที่สมบูรณ์แบบของฟังก์ชัน lambda และคุณจะถูกต้อง สิ่งสำคัญคือสังเกตเห็นว่าแนวคิดบางอย่างของการเขียนโปรแกรมเชิงฟังก์ชัน (เช่นฟังก์ชันแลมบ์ดา) กำลังคืบคลานเข้าสู่การเขียนโปรแกรม AJAX แบบกระแสหลักและนั่นคือการพัฒนาที่น่าตื่นเต้น

การเปลี่ยนชั้นเรียนใน jQuery แบบบิน

คุณสามารถกำหนดสไตล์ CSS และเพิ่มหรือลบสไตล์นั้นจากองค์ประกอบแบบไดนามิกได้

รหัสแสดงให้เห็นว่าฟีเจอร์นี้ง่ายแค่ไหนคือการเพิ่ม:

class HTML bordered {border: 1px solid black;} $ (init); ฟังก์ชัน init () {$ ("li") click (toggleBorder);} // end init function toggleBorder () {$ (นี้) toggleClass ("bordered");}

การสาธิตคลาส

alpha
beta

gamma
เดลต้า
นี่คือวิธีการสร้างโปรแกรมนี้:
เริ่มต้นด้วยหน้า HTML พื้นฐาน

ทุกสิ่งที่น่าสนใจเกิดขึ้นใน CSS และ JavaScript ดังนั้นเนื้อหาที่แท้จริงของหน้าเว็บนั้นไม่สำคัญนัก

1. สร้างชั้นที่คุณต้องการเพิ่มและนำออก

   คุณสามารถสร้างคลาส CSS ที่เรียกว่าวาดเส้นขอบรอบ ๆ ส่วนดังกล่าว แน่นอนคุณสามารถสร้างคลาส CSS ที่มีความซับซ้อนมากขึ้นด้วยการจัดรูปแบบทุกรูปแบบได้หากต้องการ

2. เชื่อมโยงวิธี init ()

   ขณะที่คุณกำลังเริ่มเห็นแอ็พพลิเคชัน jQuery ส่วนใหญ่ต้องการการเตรียมใช้งานบางอย่าง คุณสามารถเรียกใช้ฟังก์ชันแรกได้ init ()

3. เรียกใช้ฟังก์ชัน toggleBorder () เมื่อใดก็ตามที่ผู้ใช้คลิกที่รายการ

   วิธี init () เพียงตั้งค่าตัวจัดการเหตุการณ์ เมื่อใดก็ตามที่รายการได้รับเหตุการณ์การคลิก (นั่นคือถูกคลิก) ฟังก์ชัน toggleBorder () ควรได้รับการเปิดใช้งาน ฟังก์ชัน toggleBorder () ใช้ดีฟอลต์ให้สลับชายแดน

4. jQuery มีหลายวิธีในการจัดการคลาสของ element:

   addClass () กำหนดคลาสให้กับ element

   removeClass () ลบนิยามคลาสจาก element

   • toggleClass () สลับคลาส (เพิ่มหากไม่ได้แนบอยู่ในปัจจุบันหรือเอาออก)