डेटा। JQuery की दुनिया में, यह उन सभी जानकारी के बिट्स के बारे में है जो सीधे तत्वों से जुड़े होते हैं (बजाय, कहते हैं, केवल स्वयं के साथ एक चर)। "क्लाइंट साइड" (ब्राउज़र में, सर्वर के बजाय) पर डेटा के बिट्स को सहेजने का एक टन तरीका है। किसी भी प्रकार, कुकीज़, लोकलस्टोरेज, इंडेक्सडीबी, और जो बाकी सभी को जानता है, के चर हैं। डेटा का उपयोग तब किया जाता है जब वह डेटा किसी विशिष्ट तत्व के लिए विशेष रूप से प्रासंगिक हो।
कई jQuery तरीकों की तरह, इसमें दोनों एक सेटर (दो पैरामीटर) हैं:
$("#thing").data("name", "value");
और एक गेट्टर (एक पैरामीटर):
$("#thing").data("name"); // "value"
आप इसे किसी भी jQuery ऑब्जेक्ट पर उपयोग कर सकते हैं। यदि उस ऑब्जेक्ट में कई तत्व हैं, तो उन सभी का डेटा मान तब मिलता है जब आप इसे सेटर के रूप में उपयोग करते हैं। यदि आप उस वस्तु में कई तत्व हैं जब आप इसे एक गटर के रूप में उपयोग करते हैं, तो यह पहले तत्व का उपयोग करेगा।
संभवतः डेटा के बारे में सोचने का एक तरीका यह है कि तत्व एक नेमस्पेस की तरह है। बहुत सारे तत्व एक ही डेटा "नाम" का उपयोग कर सकते हैं, लेकिन उनके अलग-अलग मूल्य हैं।
एक पुराने सीएसएस-ट्रिक्स डेमो, गूगल मैप्स स्लाइडर में एक वास्तविक दुनिया का उपयोग मामला है। उस डेमो में, स्थानों की एक सूची और एक अंतर्निहित Google मानचित्र है। जैसे ही आप स्थानों पर होवर करते हैं, मैप उस स्थान को केंद्र में ले जाता है। ऐसा करने के लिए, मानचित्र API को निर्देशांक की आवश्यकता होती है। यह उन स्थानों के लिए HTML में उस डेटा को रखने के लिए समझ में आता है, लेकिन हमें इसे देखने की आवश्यकता नहीं है। data-*
HTML में विशेषताओं के लिए एक सही उपयोग का मामला है (HTML5 में नया)। स्थानों की सूची में एक सूची आइटम तब इस तरह हो सकता है:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*
कहने का एक तरीका है data- anything
। आप केवल डेटा विशेषताएँ बना सकते हैं। कुछ भी जो आप चाहते हैं। इस मामले में हमने अक्षांश के लिए एक और देशांतर के लिए एक अलग बनाया। जब एक माउस हॉवर ईवेंट उस सूची आइटम पर आग लगाता है, तो हम .data()
सूचना को बंद करने और एपीआई के साथ उपयोग करने के लिए सरल रूप से jQuery गेट्टर का उपयोग करते हैं।
तो अब हमने डेटा को दो तरीकों से देखा है, डेटा जो कि दोनों जावास्क्रिप्ट से ही सेट और प्राप्त होता है, और वह डेटा जो HTML में शुरू होता है और जावास्क्रिप्ट द्वारा उपयोग किया जाता है। दोनों ठीक हैं और एपीआई समान है। आप .data()
rel = "jQuery"> में जानकारी के लिए एक गेटर के रूप में उपयोग करने के बारे में सोच सकते हैं$("#thing").attr("rel"); // or any other attribute
यदि आप चाहें, तो आप इसे इस तरह भी इस्तेमाल कर सकते हैं:
$("#thing").attr("data-geo-lat");
.data()
गेटर सिर्फ एक शॉर्टकट है। और मैं इसे पसंद करता हूं क्योंकि यह आपको सही मानसिकता में लाता है।
हालांकि, यह ध्यान रखना महत्वपूर्ण है कि .data()
सेटर के रूप में उपयोग करने से वास्तव data-*
में HTML में विशेषता में परिवर्तन नहीं होता है । यह एक अच्छा डिफ़ॉल्ट है क्योंकि DOM में फेरबदल नहीं करने का मतलब है कि यह तेज़ है। यदि आपको HTML में विशेषता को बदलने की आवश्यकता है, तो .attr()
एक सेटर के रूप में विधि का उपयोग करें । यह भी ध्यान दें कि .attr()
आपको "डेटा-" उपसर्ग को शामिल करने की आवश्यकता है जिसे आपको उपयोग करने की आवश्यकता नहीं है .data()
।
$("#thing").attr("data-name", "Chris");
आपको ऐसा करने की आवश्यकता हो सकती है ताकि आप सुनिश्चित कर सकें कि एप्लिकेशन के अन्य हिस्सों तक पहुंच है, या यदि आप कुछ ऐसा कर रहे हैं जैसे कि सीएसएस चयनकर्ताओं ने उन्हें फिर से लिखा है (जैसे (data-something="whatever") ( )
)