HTML डेटा- * मापदंडों को संग्रहीत करने और उन्हें js में प्राप्त करने के लिए विशेषता

HTML 5 ने डेटा- * जैसी टैग विशेषताएँ पेश कीं ।
आपने शायद विभिन्न परियोजनाओं में उनके बारे में सुना या देखा होगा।
उदाहरण के लिए, वे इस तरह के फैशनेबल कॉमरेडों द्वारा ट्विटर बूटस्ट्रैप और jQuery मोबाइल के रूप में उपयोग किए जाते हैं।

पूर्व में उपयोग की जाने वाली कक्षाएं, HTML में सूचनाओं के भंडारण के लिए, js में बाद के उपयोग के उद्देश्य के लिए।

उदाहरण के लिए, एक अद्वितीय ब्लॉक संख्या को बचाने के लिए, वे अक्सर इसे लिखते हैं:

<div class="items">   <div class="item1">...</div>   <div class="item3">...</div>   <div class="item6">...</div>   <div class="item1">...</div>   ... </div> 

और अगर हमें प्रत्येक तत्व के लिए एक और वर्ग जोड़ने की आवश्यकता है? या व्यक्ति के लिए एक संशोधक? हां, निश्चित रूप से, आप अपने स्वाद के लिए एक नियमित या अन्य बैसाखी के साथ ट्रिम कर सकते हैं।

ऐसा लग सकता है कि यहाँ आईडी का उपयोग किया जा सकता है, लेकिन हमारे पास एक ही संख्या के साथ ब्लॉक हो सकते हैं।

कभी-कभी वे विशेषता 'rel' का उपयोग करते हैं, लेकिन इसका उपयोग केवल लिंक के लिए किया जा सकता है, हालांकि मैंने अन्य तत्वों को भी देखा है। और फिर, नुकसान यह है कि हम इसमें केवल एक मूल्य लिख सकते हैं।

और यहाँ चिप और डेल डेटा- * विशेषताएँ हमारी सहायता के लिए दौड़ रही हैं।

बन

आप किसी भी टैग के साथ संलग्न कर सकते हैं और पुराने ब्राउज़र के खिलाफ कुछ भी नहीं कहेंगे।
आप शीर्षक में वाक्यांश लिख सकते हैं: डेटा-ईमेल-आईडी = "190"।
आप मान में किसी भी स्ट्रिंग का उपयोग कर सकते हैं।
आप एक टैग के लिए ऐसे किसी भी पैरामीटर का उपयोग कर सकते हैं।

HTML फिर इस में बदल जाएगा:

 <div class="items">  <div class="item" data-item="1">...</div>  <div class="item" data-item="3">...</div>  <div class="item" data-item="6">...</div>  <div class="item" data-item="1">...</div>  ... </div> 

अब सबसे दिलचस्प हिस्सा, अर्थात्, jQuery में काम करते हैं।

हम पाते हैं: $('[data-email-id]') या $('[data-action=close]') या $('[data-date^=2010]') भी $('[data-date^=2010]')
हमें मूल्य var email = $(selector).attr('data-email-id') : var email = $(selector).attr('data-email-id')

सबसे दिलचस्प है .data () फ़ंक्शन का उपयोग।
संस्करण 1.4.3 में, डेटा () ने हमारे डेटा को प्राप्त करने का तरीका सीखा- * इस तरह के गुण :

var action = $(selector).data('action'); // close

यदि हम एक हाइफ़न के माध्यम से वाक्यांश का उपयोग करते हैं, तो हम इसे कैमलकेस में प्राप्त कर सकते हैं:

   <div id="superid" data-foo-bar="123"></div> 

    $('#superid').data('fooBar'); //  123 

एक माइनस (या शायद माइनस नहीं) यह है कि केवल प्रारंभिक मान डेटा () (कैश्ड) में संग्रहीत होता है, और यदि हम विशेषता मान को बदलते हैं (उदाहरण के लिए, .attr ('डेटा-फू-बार', 456)। , तो .data ('fooBar') प्राप्त करना हम अपना पुराना मूल्य देखेंगे।
लेकिन कोई भी हमें 2 स्थानों पर मूल्य को अपडेट करने से नहीं रोक रहा है, अगर हम चाहें तो:

    var baz = 150;   $(selector).data('fooBar', baz).attr('data-foo-bar', baz); 

हालाँकि, यदि आपको कोड को ट्रैक करने की आवश्यकता नहीं है, उदाहरण के लिए, फायरबग, आप .attr () भी अपडेट नहीं कर सकते हैं, क्योंकि यह केवल "विज़ुअल" डिस्प्ले को प्रभावित करता है।

सामान्य तौर पर, जैसे ही आप एक टैग में अतिरिक्त मापदंडों को बचाने का निर्णय लेते हैं, डेटा विशेषताओं का उपयोग करें।

पुनश्च:

मुझे आश्चर्य है कि अगर किसी ने json विशेषताओं में संग्रहीत करने की कोशिश की? :)
हालांकि यह शायद असामान्य प्रोग्रामिंग में है।

ZYY:

बहुत से लोग jQuery.data फ़ंक्शन के बारे में बात करते हैं (एलएम, कुंजी, [मूल्य])
कौन नहीं जानता, यह फ़ंक्शन $ (चयनकर्ता) से अलग है। डेटा (कुंजी, [मूल्य])
यह आपको डेटा को किसी भी ऑब्जेक्ट के DOM तत्वों में बाँधने की अनुमति देता है, न कि jQuery ऑब्जेक्ट्स को। हां, यह 60% तेजी से काम करता है, लेकिन इसे डेटा- * विशेषताएँ प्राप्त नहीं होती हैं।

ZYYY:

trijin : यह उल्लेख नहीं है कि $ (चयनकर्ता) .data () तत्व के सभी डेटा- * गुणों के साथ एक वस्तु लौटाएगा।