การโต้ตอบและข้อควรระวังระหว่าง HTML5 แอตทริบิวต์ใหม่ Data-*และ JS/JQuery

ตัวอย่างการเขียน

 <div data-lole = page data-lest-value = 43 data-hidden = true data-options = '{ชื่อ: john}'> </div>

แอตทริบิวต์ Data-* ใช้เพื่อจัดเก็บข้อมูลที่กำหนดเองส่วนตัวสำหรับหน้าจัดเก็บข้อมูลหรือแอปพลิเคชัน

ข้อมูล-* แอตทริบิวต์ให้ความสามารถในการฝังแอตทริบิวต์ข้อมูลที่กำหนดเองในองค์ประกอบ HTML ทั้งหมด

ข้อมูล-* แอตทริบิวต์ประกอบด้วยสองส่วน:

• ชื่อแอตทริบิวต์ไม่ควรรวมตัวอักษรตัวพิมพ์ใหญ่ใด ๆ และต้องมีตัวอักษรอย่างน้อยหนึ่งตัวหลังจากข้อมูลคำนำหน้า-
• ค่าแอตทริบิวต์สามารถเป็นสตริงใดก็ได้

ใช้ค่าแอตทริบิวต์ data-*เพื่อใช้ฟังก์ชัน. data () ใน jQuery

 console.log ($ (div) .data ('lastValue')); คือ: หน้าคือ: หน้า

ข้อมูล-** ชื่อแอตทริบิวต์รูปแบบชื่อ hump rewriting

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

สาธิต:

 console.log ($ (div) .data ('lastValue')); DIV ที่สามในเอกสารเราเอาต์พุต DOM // เอาต์พุตนี้: <div data-lole = page data-last-value = 43 data-highden = true data-options = '{ชื่อ: john}'>

อย่ากลัวคุณส่งออกอีกครั้ง

 console.log ($ (div) .data ('lastValue'));

ค่าถูกเก็บไว้ใน jQuery

ใช้ค่าแอตทริบิวต์ data-*ด้วยฟังก์ชัน. attr () ใน jQuery

 console.log ($ ('div'). attr ('data-Role')); ; // ค่าเอาต์พุตคือ 43

ตั้งค่า Data-*ค่าแอตทริบิวต์ด้วยฟังก์ชัน. attr () ใน jQuery

 $ ('div')

หมายเหตุ: หมายเลขที่แตกหักจะต้องถูกแปลงเป็นชื่อโคก

ข้างต้นคือการโต้ตอบระหว่าง HTML5 แอตทริบิวต์ใหม่ข้อมูล-*และ JS/JQuery แนะนำโดยบรรณาธิการให้คุณ ในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!