दिलचस्प पोस्ट
मैं प्रत्येक उपयोगकर्ता के लिए एक नवीनतम रिकॉर्ड तिथि के लिए SQL कैसे पूछूं? मैं NSSetUncaughtExceptionHandler स्विफ्ट में कैसे उपयोग करूँ? AngularJS – आइटम को सशर्त रूप से वापस करने के लिए एनजी-दोहर के साथ एक कस्टम फ़िल्टर की संरचना कैसे करें सी # जुड़ती / जहां Linq और लैम्ब्डा के साथ कोणीय टेम्पलेट्स के साथ HTML को रेंडर कैसे करें पंक्तियां / संयोजन पंक्तियों को मिलाएं matplotlib मेरे चित्र प्रदर्शित नहीं करता है हालांकि मैं pyplot.show () "यह" चर आसानी से सेट करें? Dplyr का उपयोग करते हुए तालिका के प्रत्येक पंक्ति में एक फ़ंक्शन को लागू करना? जावास्क्रिप्ट में समय की देरी कैसे निर्धारित करें क्यों लोग एसक्यूएल कर्सर को इतने नफरत करते हैं? एंड्रॉइड रनऑनयूआईथ्रेड स्पष्टीकरण स्ट्रॉशस में निर्भरता इंजेक्शन प्रवेश सत्र स्कॉड बीन्स आईआई 6 + IE7 ओवरफ़्लो में सीएसएस समस्या: छिपा हुआ; – स्थिति: रिश्तेदार; कॉम्बो MySQL अपडेट वक्तव्य इनर टेबल्स से जुड़ें

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

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

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

वेब के समाधान से एकत्रित समाधान "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() या कहीं और से उपलब्ध नहीं है
  • निरीक्षण पर तत्व पर सार्वजनिक रूप से दिखाई नहीं दे रहा है
  • ऑब्जेक्ट्स हो सकते हैं