दिलचस्प पोस्ट
रूबी 1.9 मानक सीएसवी लाइब्रेरी क्या है? मल्टीपार्ट / फ़ॉर्म-डेटा के साथ एएसपी.नेट एमवीसीए अजाक्स फॉर्म पोस्ट कैसे करें? उद्देश्य-सी फ़्रेमवर्क को स्विफ्ट प्रोजेक्ट में आयात करते समय ब्रिजिंग हेडर में "फ़ाइल नहीं मिली" प्राप्त करना एडीए में द्विघात समीकरण MySQL recursion? एक ही लाइन पर अजगर प्रिंट PHP सरल HTML DOM पार्सर का उपयोग करते हुए अजीब त्रुटि त्रुटि: इवेंटलेट इंस्टॉल करते समय कमांड 'जीसीसी' एक्जिट स्टेटस 1 में विफल हुआ बाह्य भाग को अपने फ़्लोटिंग सामग्री के रूप में एक ही ऊंचाई पर स्वचालित रूप से बनाएं WPF कॉम्बोबॉक्स: टेक्स्टबॉक्स और ड्रॉप-डाउनसूची में अलग टेम्पलेट कौन सा HTML पार्सर सबसे अच्छा है? जावा में उम्मीद के रूप में यह regex काम क्यों नहीं करता है? क्या पिछले ईवेंट को अधिलेखित किए बिना कई ईवेंट हैंडलर्स को JqGrid ईवेंट में बाँधना संभव है? आईफोन – ग्रांड सेंट्रल डिस्पैच मुख्य धागा XmlDocument से नोड्स निकालना

jQuery डेटा बनाम एटआर?

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

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

Solutions Collecting From Web of "jQuery डेटा बनाम एटआर?"

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

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

डेटा को बाद में jQuery में .data() का उपयोग कर लिया जा सकता है:

 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 

साथ ही, डेटा विशेषताओं के लिए नामकरण सम्मेलन में छिपी हुई "gotcha" का एक सा है:

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() द्वारा लौटाई गई को hyphenated कुंजी सेट नहीं होगा:

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

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

एचटीएमएल के लिए, हायफ़नेटेड फॉर्म का इस्तेमाल करते रहें। एचटीएमएल एट्रिब्यूट्स को स्वतः एएससीआईआई-लोअरकेस प्राप्त करना माना जाता है , इसलिए <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 के संस्करणों में गलत तरीके से पार्स किया गया था , और अब jQuery 1.8 आरसी 1 की Number में पार्स नहीं किया गया है।

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 पर डालें, जैसे कि एक unary + ऑपरेटर के साथ।

जेएस (cont।):

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

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

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

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

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

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

डेटा सेट .data()

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