เมื่อใช้ jQuery คุณสามารถเลือก องค์ประกอบ HTML ได้อย่างง่ายดาย แต่บางครั้ง เมื่อ โครงสร้าง HTML ซับซ้อนมากขึ้น การปรับแต่งองค์ประกอบที่เราเลือกก็เป็นเรื่องที่ยุ่งยาก ในบทช่วยสอนนี้ เราจะสำรวจสิบวิธีในการปรับแต่งและขยายคอลเลกชันที่เราจะทำงานด้วย
HTML
ขั้นแรก มาดูหน้าง่าย ๆ ที่แสดงด้านล่าง และเราจะเลือกองค์ประกอบผ่านบทช่วยสอนนี้
.gif)
" เหตุใดเราจึงต้องปรับแต่งชุดองค์ประกอบเพิ่มเติม เป็นเพราะ ไวยากรณ์การเลือก jQuery ไม่มีประสิทธิภาพเพียงพอหรือไม่ "
เอาล่ะ เรามาเริ่มด้วยตัวอย่างกันก่อน ในหน้าเว็บที่กล่าวมาข้างต้น เมื่อมี การคลิก ดาว เราต้อง เพิ่ม คลาส "on" ลงไป และ ดาว แต่ละดวงทางด้าน ซ้าย ในเวลาเดียวกัน เราต้องการเปลี่ยนสีพื้นหลังของ องค์ประกอบหลัก ของดาว ทั้งหมด ดังนั้นโค้ดของเราจึงเป็นดังนี้:
ในบรรทัดที่สอง เราได้รับวัตถุปัจจุบันที่เราคลิก แต่จะหา พ่อแม่ของ ดวงดาว ได้อย่างไร? นั่น คือ div.rating อย่างไรก็ตาม ในหนึ่งหน้า มี div.rating มากมาย เราต้องการอันไหน? จะทำให้ ดาว ทั้งหมด อยู่ทางซ้ายของ "สิ่งนี้" ได้อย่างไร ?
ข่าวดีก็คือ jQuery ช่วยให้เราได้รับคอลเลกชันใหม่ขององค์ประกอบตามคอลเลกชันที่มีอยู่ตามความสัมพันธ์พื้นฐานเหล่านี้ และนี่คือจุดที่ฟังก์ชันการเคลื่อนที่เข้ามามีบทบาท
1. เด็ก ๆ
ฟังก์ชันนี้รับข้อมูลลูกโดยตรงของชุดองค์ประกอบ
ซึ่งสะดวกมากในหลาย ๆ สถานการณ์ ลองดูภาพด้านล่าง:
.gif)
$('.star').คลิก(ฟังก์ชั่น(){
$(นี้).addClass('บน');
- จะเลือกองค์ประกอบหลักของวัตถุปัจจุบันได้อย่างไร ?
- จะทำให้ ดวงดาวทั้งหมดอยู่ทางซ้ายของ ดาวดวง ปัจจุบันได้อย่างไร ?
-