DOM Nodes पर Metadata Store करना
In this page:
$(selector).data("key", value);
$(selector).data("key");
$(selector).removeData("key");data() क्या है?
data() method visible HTML attributes में लिखे बिना arbitrary JavaScript values को एक DOM element से attach करता है, उन्हें एक internal जगह पर store करते हुए।
उदाहरण: What is data()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card</div>
<script>
$("#card").data("userId", 42);
</script>
</body>
</html>Data पढ़ना
stored information वापस पढ़ने के लिए एक key के साथ data() इस्तेमाल करें, और value एक string, number, object, array, या लगभग कोई भी दूसरी JavaScript value हो सकती है।
उदाहरण: Read Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card</div>
<script>
$("#card").data("userId", 42);
console.log($("#card").data("userId"));
</script>
</body>
</html>कई Values Store करना
आप अलग-अलग keys के साथ data() call करके एक ही DOM element पर metadata के कई pieces store कर सकते हैं, effectively उस element को अपनी छोटी storage देते हुए।
उदाहरण: Store Multiple Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card</div>
<script>
$("#card").data("userId", 42);
$("#card").data("status", "active");
console.log($("#card").data());
</script>
</body>
</html>Stored Data हटाना
removeData method किसी element से पहले store किया गया metadata delete कर देता है, जो तब उपयोगी है जब वह information अब relevant न रहे — उदाहरण के लिए, c।
उदाहरण: Remove Stored Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card</div>
<script>
$("#card").data("loading", true);
$("#card").removeData("loading");
</script>
</body>
</html>एक छोटा data() Project
इस तरह hidden metadata attach करना खासतौर पर buttons, product cards, और दूसरे repeated UI elements के लिए उपयोगी है जहाँ हर instance को कुछ याद रखना है।
उदाहरण: Small data() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button class="product" data-id="7">Buy</button>
<script>
$(".product").on("click", function() {
console.log("Product ID:", $(this).data("id"));
});
</script>
</body>
</html>- यह उम्मीद करना कि
.data("id", 5)HTML मेंdata-idattribute बदल देगा, जबकि यह सिर्फ value को memory में store करता है और attribute वही रहता है। - कई elements वाली एक selection पर
.data("key")call करना और सारी values की उम्मीद करना, जबकि यह सिर्फ पहले element की value return करता है। data-user-idको.data("user_id")से पढ़ना, जबकि jQuery hyphenated attributes को camelCase में convert करता है:.data("userId")।
- Type checking utilities यह पहचानती हैं कि आपके पास किस तरह की value है।
trim()strings साफ करता है, और array helpers lists के साथ काम करते हैं।extend()objects merge करता है,proxy()context bind करता है, और DOM nodes पर metadata store किया जा सकता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: