jQuery का डेटा बनाम Attr?

Question

के बीच उपयोग में अंतर क्या है $.dataऔर $.attrउपयोग करते समय data-someAttribute?

मेरी समझ यह है कि $.datajQuery के भीतर संग्रहीत है $.cache, न कि DOM। इसलिए, यदि मुझे $.cacheडेटा भंडारण के लिए उपयोग करना है, तो मुझे उपयोग करना चाहिए $.data। यदि मुझे HTML5 डेटा-विशेषताएँ जोड़ना है, तो मुझे उपयोग करना चाहिए $.attr("data-attribute", "myCoolValue")।

Comments

कृपया इसे पढ़ें: forum.jquery.com/topic/when-to-use-attr-vs-data

— Baz1nga

@zzz को छोड़कर, यह वास्तव में इस सवाल का जवाब नहीं लगता ...?

— सलीडीहिसिरह

वास्तव में यह अप्रत्यक्ष रूप से होता है। के माध्यम से किसी वस्तु को संलग्न attr()करने से मेमोरी लीक हो सकती है (कम से कम IE में), जबकि data()सुरक्षित है। वह अपने उत्तर में इस पर संकेत देता है, हालांकि वह स्पष्ट रूप से बाहर नहीं आता है और कहता है। JQuery डॉक्स पर अधिक जानकारी ("अतिरिक्त नोट्स" देखें): api.jquery.com/attr

— ken

@ जो बी, सिर्फ FYI (भले ही यह पुराना हो), की डेटा विशेषता data-someAttributeअमान्य है; कल्पना के अनुसार, केवल लोअरकेस की अनुमति है। आप ऊपरी-केस वर्णों का उपयोग करके अजीब मुद्दों के असंख्य में चलेंगे।

— केन

@ AdrienBe लोट्स का संदर्भ खोज के माध्यम से आसानी से मिल जाता है, लेकिन जब से मैं ऊब गया हूं, यहां आप जाते हैं: stackoverflow.com/a/22753630/84473

— ken

Answer 1

यदि आप सर्वर से DOM तत्व पर डेटा पास कर रहे हैं, तो आपको तत्व पर डेटा सेट करना चाहिए:

<a id="foo" data-foo="bar" href="#">foo!</a>

डेटा को तब .data()jQuery के उपयोग से एक्सेस किया जा सकता है :

console.log( $('#foo').data('foo') );
//outputs "bar"

हालाँकि जब आप डेटा का उपयोग करके jQuery में DOM नोड पर डेटा स्टोर करते हैं, तो चर नोड ऑब्जेक्ट पर संग्रहीत होते हैं । यह जटिल वस्तुओं और संदर्भों को समायोजित करने के लिए है क्योंकि नोड तत्व पर डेटा को संग्रहीत करना एक विशेषता के रूप में केवल स्ट्रिंग मानों को समायोजित करेगा।

_{ऊपर से मेरा उदाहरण जारी रखना:}

$('#foo').data('foo', 'baz');

console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed

console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object

इसके अलावा, डेटा विशेषताओं के लिए नामकरण सम्मेलन में एक छिपा हुआ "गोचा" है:

_HTML:

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

_{जे एस:}

console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

हाइफ़न की गई कुंजी अभी भी काम करेगी:

_HTML:

<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>

_{जे एस:}

console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

हालाँकि जिस वस्तु द्वारा लौटाया जाता है .data()उसमें हाइफ़न किया हुआ कुंजी सेट नहीं होगा:

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

यह इस कारण से है कि मेरा सुझाव है कि जावास्क्रिप्ट में हाइफ़न की गई कुंजी से बचना।

HTML के लिए, हाइफ़न फॉर्म का उपयोग करते रहें। एचटीएमएल विशेषताओं ASCII-लोवरकेस स्वचालित रूप से प्राप्त करने के लिए की अपेक्षा की जाती है, तो <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>है, और <dIv DaTa-FoObAr></DiV>कर रहे हैं चाहिए समान रूप में व्यवहार किया है, लेकिन सबसे अच्छा संगतता के लिए लोअर केस रूप प्राथमिकता दी जानी चाहिए।

.data()यदि मान किसी मान्यता प्राप्त नमूने का मिलान विधि भी कुछ बुनियादी ऑटो कास्टिंग प्रदर्शन करेंगे:

_HTML:

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

_{जे एस:}

$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

यह ऑटो-कास्टिंग क्षमता तत्काल विजेट और प्लगइन्स के लिए सुविधाजनक है:

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

यदि आपके पास मूल मूल्य स्ट्रिंग के रूप में होना चाहिए, तो आपको उपयोग करने की आवश्यकता होगी .attr():

_HTML:

<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>

_{जे एस:}

$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers

$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6

_{यह एक आकस्मिक उदाहरण था। रंग मूल्यों को संग्रहीत करने के लिए, मैंने संख्यात्मक हेक्स नोटेशन (यानी 0xABC123) का उपयोग किया, लेकिन यह ध्यान देने योग्य है कि हेक्स को 1.7.2 से पहले jQuery संस्करणों में गलत तरीके से पार्स किया गया था , और अब NumberjQuery 1.8 rc 1 के रूप में पार्स नहीं किया गया है ।}

jQuery 1.8 आरसी 1 ने ऑटो-कास्टिंग के व्यवहार को बदल दिया । इससे पहले, कोई भी प्रारूप जो एक वैध प्रतिनिधित्व था, Numberको कास्ट किया जाएगा Number। यदि उनका प्रतिनिधित्व समान रहता है तो अब, मूल्य जो संख्यात्मक हैं, केवल ऑटो-कास्ट हैं। यह एक उदाहरण के साथ सबसे अच्छा सचित्र है।

_HTML:

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

_{जे एस:}

                              // pre 1.8    post 1.8
$('#foo').data('int');        //    1000        1000
$('#foo').data('decimal');    //    1000   "1000.00"
$('#foo').data('scientific'); //    1000       "1e3"
$('#foo').data('hex');        //    1000     "0x03e8"

यदि आप संख्यात्मक मानों को एक्सेस करने के लिए वैकल्पिक सांख्यिक सिंटैक्स का उपयोग करने की योजना बनाते हैं, तो मान को Numberपहले एक जैसे +संचालक के साथ डालना सुनिश्चित करें ।

_{जेएस (प्रतियोगिता):}

+$('#foo').data('hex'); // 1000

Comments

@vitorbal है, जबकि यह सच है, वस्तु द्वारा दिया .data()जाएगा नहीं हाइफन प्रपत्र सेट है, तो $('#bar').data('foo-bar-baz')काम करेंगे, लेकिन $('#bar').data()['foo-bar-baz']नहीं होगा। यह इस कारण से है कि मैं सुझाव देता हूं कि लोग हाइफ़नेटेड फॉर्म का उपयोग करने से बचें।

— zzzzBov

ठीक है, अब मैं देख रहा हूं कि आपका क्या मतलब है। उस छोटे से विवरण के बारे में पता नहीं था, अद्यतन के लिए धन्यवाद :)

— vitorbal

@SableFoste, कौन सा लिंक? api.jquery.com/data विधि के लिए सही लिंक है, और जहाँ तक मुझे जानकारी नहीं है, नहीं बदला है।

— zzzzBov

मुझे पसंद है, फू, बार, बाज़, फ़िज़, और अधिक: डी

— उस्मान यूनास

हर लाइन को प्यार करो।

— फू बार

Answer 2

दोनों के बीच मुख्य अंतर यह है कि इसे कहाँ संग्रहीत किया जाता है और इसे कैसे एक्सेस किया जाता है।

$.fn.attr तत्व पर सीधे जानकारी संग्रहीत करता है जो निरीक्षण पर सार्वजनिक रूप से दिखाई देते हैं, और तत्व के मूल एपीआई से भी उपलब्ध हैं।

$.fn.dataएक हास्यास्पद जगह में जानकारी संग्रहीत करता है। यह स्थानीय चर नामक एक बंद स्थान पर स्थित है, data_userजो स्थानीय रूप से परिभाषित फ़ंक्शन डेटा का एक उदाहरण है। यह चर सीधे jQuery के बाहर से सुलभ नहीं है।

के साथ डेटा सेट attr()

• से सुलभ $(element).attr('data-name')
• से सुलभ element.getAttribute('data-name'),
• मूल्य के रूप में था, तो data-nameसे सुलभ भी $(element).data(name)और element.dataset['name']औरelement.dataset.name
• निरीक्षण पर तत्व पर दिखाई देता है
• वस्तुएं नहीं हो सकतीं

के साथ डेटा सेट .data()

• से ही सुलभ है.data(name)
• .attr()कहीं से या कहीं से भी सुलभ नहीं
• निरीक्षण पर तत्व पर सार्वजनिक रूप से दिखाई नहीं दे रहा है
• वस्तु हो सकती है

Comments

हाँ, मेरा मुख्य सवाल यह था कि यह डेटा कहाँ संग्रहीत किया गया था, इसलिए उस जानकारी के लिए धन्यवाद!

— मैक्स वाइल्डर

साथ .attr()ही जाने का रास्ता भी है, यदि बाद में आप डेटा को चयनकर्ता के रूप में उपयोग करना चाहते हैं ( .data()नहीं मिलेंगे ; कोडपेन देखें .io

— anon

Answer 3

आप data-*कस्टम डेटा एम्बेड करने के लिए विशेषता का उपयोग कर सकते हैं । data-*गुण हमें एम्बेड कस्टम डेटा करने की क्षमता सभी HTML तत्वों पर जिम्मेदार बताते हैं देता है।

jQuery .data()विधि आपको किसी भी प्रकार के DOM तत्वों का डेटा प्राप्त करने / सेट करने की अनुमति देती है जो कि परिपत्र संदर्भों से सुरक्षित है और इसलिए मेमोरी लीक से।

.attr()मैच के सेट में केवल पहले तत्व के लिए jQuery विधि / सेट विशेषता मान मिलता है।

उदाहरण:

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");