Attributes पढ़ना और Modify करना
In this page:
$(selector).attr("name");
$(selector).attr("name", "value");
$(selector).removeAttr("name");Attributes पढ़ना
attr() method href, src, या title जैसे किसी HTML attribute की current value सीधे markup से पढ़ता है। यह हमेशा HTML में set की गई original value, या attr() से आपने आख़िरी बार explicitly assign की गई value return करता है -- कोई भी state changes नहीं जिन्हें browser internally track करता है।
उदाहरण: Reading Attributes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<a id="link" href="https://example.com">Link</a>
<script>
console.log($("#link").attr("href"));
</script>
</body>
</html>Attributes Set करना
किसी attribute को बदलने के लिए attr() को एक name और एक value pass करें, जैसे किसी image का src या किसी link का href update करना। jQuery markup को तुरंत update करता है, और किसी jQuery collection पर इसे call करना एक ही call में हर matched element को update करता है।
उदाहरण: Setting Attributes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<img id="pic" src="old.jpg">
<script>
$("#pic").attr("src", "new.jpg");
</script>
</body>
</html>कई Attributes
आप एक ही call में कई attributes set करने के लिए attr() को name/value pairs का एक plain object pass कर सकते हैं। यह तब काम का है जब आपको किसी element को configure करना हो -- जैसे किसी img का src, alt, और title -- तीन अलग calls chain करने के बजाय एक साथ।
उदाहरण: Multiple Attributes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<img id="pic">
<script>
$("#pic").attr({src: "photo.jpg", alt: "A photo", title: "My Photo"});
</script>
</body>
</html>Attributes हटाना
removeAttr() किसी attribute को इसे एक खाली string set करने के बजाय element से पूरी तरह हटा देता है। disabled या required जैसी attribute हटाना असल में element की behavior बदल देता है, सिर्फ उसका markup नहीं।
उदाहरण: Removing Attributes
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field" disabled>
<script>
$("#field").removeAttr("disabled");
</script>
</body>
</html>Attribute बनाम Property
href, src, और title जैसे HTML attributes के लिए attr() इस्तेमाल करें -- markup में सीधे लिखी गई values। live DOM state reflect करने वाली properties के लिए, जैसे कोई checkbox इस समय checked है या नहीं, इसके बजाय prop() इस्तेमाल करें, क्योंकि user interaction के बाद ये दोनों अलग हो सकते हैं।
उदाहरण: Attribute vs Property
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="check" type="checkbox" checked>
<script>
console.log("attr:", $("#check").attr("checked"), "prop:", $("#check").prop("checked"));
</script>
</body>
</html>- किसी checkbox की current state पढ़ने के लिए
.attr("checked")इस्तेमाल करना, जो original HTML attribute देता है, यह नहीं कि user ने अभी क्या ticked किया है। .attr("src", "a.jpg", "alt", "x")से कई attributes set करने की कोशिश करना, जबकि कई attributes के लिए.attr({src: "a.jpg", alt: "x"})जैसा एक object चाहिए।.attr("href")पढ़ना और पूरे resolved URL की उम्मीद करना, जबकि यह exactly वही return करता है जो markup में लिखा है जैसेpage.html।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: