Properties पढ़ना और Modify करना
In this page:
$(selector).prop("name");
$(selector).prop("name", value);Properties पढ़ना
prop() method live DOM property value पढ़ती है, जैसे checked या disabled, जो HTML में originally लिखी गई attribute से अलग हो सकती है। उदाहरण के लिए, किसी checkbox का checked attribute load होने के बाद कभी नहीं बदलता, लेकिन user के click करने पर उसकी checked property update होती है।
उदाहरण: Reading Properties
<!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($("#check").prop("checked"));
</script>
</body>
</html>Properties Set करना
checked, disabled, या selected जैसी boolean DOM properties बदलने के लिए prop() इस्तेमाल करें। सीधे true या false pass करना element की असली behavior toggle करता है, सिर्फ उसका बाहरी markup नहीं।
उदाहरण: Setting Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="check" type="checkbox">
<script>
$("#check").prop("checked", true);
</script>
</body>
</html>Properties Toggle करना
आप किसी property की current value पढ़ सकते हैं और फिर prop() से इसे opposite set कर सकते हैं, यह 'select all' checkboxes जैसे toggle buttons के लिए एक common pattern है। लिखने से पहले पढ़ना आपके code को उस state पर react करने देता है जिसमें user ने element को छोड़ा था।
उदाहरण: Toggle Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="check" type="checkbox">
<button id="btn">Toggle</button>
<script>
$("#btn").on("click", function() {
$("#check").prop("checked", !$("#check").prop("checked"));
});
</script>
</body>
</html>Selected Option
prop() form option elements की selected state पढ़ सकता है, आपको यह check करने देते हुए कि किसी select में इस समय कौन-सा option चुना गया है। यह value attribute पढ़ने की कोशिश करने से ज़्यादा reliable है, क्योंकि selection markup को छुए बिना बदल सकता है।
उदाहरण: Selected Option
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select id="color"><option>Red</option><option selected>Blue</option></select>
<script>
console.log($("#color option:selected").text());
</script>
</body>
</html>Property और Attribute
live form state -- checked, disabled, selected -- के लिए, prop() आमतौर पर सही choice है, क्योंकि यह reflect करता है कि browser में अभी असल में क्या हो रहा है। सिर्फ तभी attr() की तरफ़ जाएँ जब आपको specifically original HTML-authored value चाहिए।
उदाहरण: Property and Attribute
<!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("Live state:", $("#check").prop("checked"));
</script>
</body>
</html>- user के click करने के बाद किसी checkbox पर
.attr("checked", true)इस्तेमाल करना, जो.prop("checked", true)की तरह live state track नहीं करता। .prop("checked")को string"checked"से compare करना, जबकि यह booleantrueयाfalsereturn करता है।data-idजैसे custom attributes के लिए.prop()इस्तेमाल करना, जबकि.attr()या.data()सही तरीका है।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: