เมธอด data

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

ไวยากรณ์

นี่คือวิธีการตั้งค่าสำหรับองค์ประกอบใด ๆ ด้วยค่าและคีย์ ซึ่งสามารถค้นหาได้ในภายหลัง:

.data(คีย์, ค่า);

นอกจากนี้เรายังสามารถส่งอ็อบเจกต์ที่ประกอบด้วยคู่ คีย์-ค่า เพื่ออัปเดตข้อมูลได้:

.data(อ็อบเจกต์);

สามารถรับข้อมูลที่เชื่อมโยงกับองค์ประกอบแรกในคอลเลกชัน jQuery ได้ โดยส่งเฉพาะคีย์:

.data(คีย์);

โดยไม่ส่งพารามิเตอร์ใด ๆ เราสามารถอ่านข้อมูลที่เคยเชื่อมโยงกับองค์ประกอบ DOM ได้ เมธอดจะส่งคืนอ็อบเจกต์ JavaScript ที่มีแต่ละค่าเป็นคุณสมบัติ:

.data();

ตัวอย่าง

ลองใช้ data เพื่อตั้งค่าข้อมูลสำหรับแท็ก p โดยส่งพารามิเตอร์แรกเป็น 'test' และค่า 21 สำหรับพารามิเตอร์ที่สอง จากนั้นอ่านข้อมูลที่บันทึกด้วยคีย์ 'test':

<p>ข้อความ</p>

$('p').data('test', 21); // ข้อมูลถูกเขียนที่นี่

console.log($('p').data('test')); // แสดงผลเป็นตัวเลข 21
console.log($('p').data()); // แสดงผลเป็นอ็อบเจกต์ {test: 21}

ดูเพิ่มเติม

เมธอด removeData,
ซึ่งลบข้อมูลออกจากองค์ประกอบ
เมธอด hasData,
ซึ่งตรวจสอบว่ามีข้อมูลในองค์ประกอบหรือไม่
เมธอด attr,
ซึ่งช่วยให้รับและเปลี่ยนแปลงแอตทริบิวต์ใด ๆ ขององค์ประกอบได้
คุณสมบัติ JavaScript dataset,
ซึ่งช่วยเพิ่มแอตทริบิวต์ของคุณเองให้กับแท็กได้