มองใกล้ที่ตัวเลือก jQuery

Selectors เป็นพื้นฐานของไลบรารี jQuery จะใช้เสมอเมื่อใช้ jQuery เพื่อจัดการ DOM Selectors ทำหน้าที่เป็นฟังก์ชันเพื่อส่งคืนองค์ประกอบที่ตรงกัน พวกเขามาพร้อมกับไลบรารี jQuery และพร้อมใช้งานทันที

ฟังก์ชันตัวเลือกมีรูปลักษณ์ที่โดดเด่น เริ่มต้นด้วยเครื่องหมายดอลลาร์ ($) ตามด้วยวงเล็บ

$()

สิ่งที่ยอมรับในวงเล็บคือชื่อ รหัส หรือคลาสขององค์ประกอบที่จะเลือก หลังจากเลือกองค์ประกอบแล้ว วิธีการเปลี่ยนองค์ประกอบนั้นสามารถเชื่อมโยงกับฟังก์ชันตัวเลือกได้โดยใช้เครื่องหมายจุด

$('p').html("Some new content rendered from jQuery")

สิ่งนี้จะเลือกองค์ประกอบย่อหน้าทั้งหมดบนหน้าและแทนที่ HTML ภายในองค์ประกอบด้วยสตริง jQuery ถูกสร้างขึ้นเพื่อเข้าถึงองค์ประกอบหรือองค์ประกอบอย่างรวดเร็วและใช้วิธีการเพื่อทำการเปลี่ยนแปลงที่ต้องการ ฟังก์ชันนี้ช่วยให้ไม่ต้องคาดเดาในการสร้างเว็บแอปพลิเคชันแบบไดนามิก

ตัวเลือก jQuery คืออะไร

ตัวเลือก jQuery เป็นฟังก์ชันที่มาพร้อมกับไลบรารี jQuery จำเป็นต้องใช้ jQuery ยอมรับชื่อ คลาส และ/หรือ id เป็นสตริงสำหรับพารามิเตอร์ จากที่นี่ สามารถเชื่อมโยงเมธอด jQuery เพื่อดำเนินการจัดการ DOM ได้

ทำไมสิ่งนี้ถึงมีประโยชน์? jQuery แนะนำชวเลขที่สร้างขึ้นในวิธีการที่สามารถใช้อย่างละเอียดใน JavaScript ธรรมดาโดยใช้ตัวเลือกเพื่ออ้างถึงองค์ประกอบโดยตรงแทนที่จะเรียก document.querySelector() หรือ document.querySelectorAll() .

ตัวเลือก jQuery ลด JavaScript querySelector() ถึง $() . มีการเรียกโดยปริยายในเอกสารมากกว่าที่จะพูดอย่างชัดเจน ซึ่งยังช่วยลดโค้ดที่จำเป็นอีกด้วย

ไวยากรณ์ตัวเลือก jQuery

จนถึงตอนนี้ เราได้พูดคุยกันอย่างเป็นนามธรรมเกี่ยวกับฟังก์ชันตัวเลือก jQuery ตอนนี้เราทราบแล้วว่ามันเป็นฟังก์ชันที่อ้างอิงถึงองค์ประกอบ DOM ที่ระบุโดยตรง ทั้งหมดที่จำเป็นคือชื่อองค์ประกอบ คลาส หรือ id นอกจากนี้ยังสามารถรวมชื่อกับคลาสหรือรหัสได้ ขึ้นอยู่กับวิธีการจัดระเบียบ HTML ของคุณ

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ตัวเลือกสามารถเป็นแบบทั่วไปได้เหมือนกับการเลือกองค์ประกอบทั้งหมดบนหน้า:

$('*')

โดยทั่วไปไม่แนะนำให้ใช้ jQuery แบบนี้ แนวทางปฏิบัติทั่วไปคือการเลือกกลุ่มขององค์ประกอบเดียวกัน ตัวอย่างเช่น หากเราต้องการเปลี่ยนองค์ประกอบย่อหน้าทั้งหมด เราสามารถเลือกองค์ประกอบเหล่านั้นได้โดยตรง:

$('p')

ตอนนี้เราได้เลือกแท็ก

ทั้งหมดบนหน้าปัจจุบันแล้ว จากที่นี่ เราจะเชื่อมโยงเมธอด jQuery เพื่อทำการเปลี่ยนแปลง

$('p').html('Replace original paragraph HTML with this.')

html() วิธีการแทนที่แอตทริบิวต์ HTML ของแท็ก

ที่เลือกทั้งหมด

เกิดอะไรขึ้นถ้าเราต้องการเพียงองค์ประกอบย่อหน้า? สมมติว่าเรามีแท็ก

หลายแท็ก หนึ่งในนั้นมี id ของ 'เนื้อหาใหม่' เราสามารถเลือกได้โดยตรง

$('p#new-content')

ตัวเลือก jQuery ใช้การอ้างอิง CSS ไปยังองค์ประกอบ (# =id, . =class) ตอนนี้เลือกเฉพาะองค์ประกอบย่อหน้าที่มีรหัส "เนื้อหาใหม่" และพร้อมที่จะเปลี่ยนแปลง

สุดท้ายให้เลือกองค์ประกอบที่มีคลาสที่ได้รับมอบหมาย แอปของเรามีองค์ประกอบ

$('div.main-content')