jQuery में .prop() बनाम .attr(): उदाहरणों के साथ चरण-दर-चरण विश्लेषण

परिचय: यह विषय इतना महत्वपूर्ण क्यों है?

यदि आपने कभी jQuery में कोड लिखा है जो किसी HTML तत्व की विशेषता (attribute) का मान प्राप्त या सेट करने वाला था, तो आपने निश्चित रूप से दो विधियों का सामना किया होगा: .prop() और .attr()। पहली नज़र में वे एक ही काम करते हैं। लेकिन व्यवहार में, उनके बीच का अंतर सैकड़ों बगों और Stack Overflow पर हज़ारों प्रश्नों का स्रोत है।

इस चरण-दर-चरण ट्यूटोरियल में, हम एक बार और हमेशा के लिए समझेंगे कि jQuery में .prop() और .attr() कैसे भिन्न हैं, कब किसका उपयोग करना है, और जाल में कैसे नहीं फँसना है। हम लाइव कोड लिखेंगे, ब्राउज़र के वास्तविक व्यवहार को देखेंगे और एक सरल नियम याद रखेंगे।

यह लेख कोई सूखा दस्तावेज़ नहीं है। यह jQuery में सबसे भ्रमित करने वाले विषयों में से एक के लिए आपकी व्यक्तिगत मार्गदर्शिका है।

संक्षेप में: विशेषताएँ बनाम गुण

कोड में गोता लगाने से पहले, आइए सिद्धांत को समझें। DOM (Document Object Model) में दो अवधारणाएँ हैं:

\n
• विशेषता (attribute) — वह जो HTML कोड में लिखा गया है। उदाहरण के लिए, <input type="checkbox" checked="checked">। विशेषताएँ हमेशा स्ट्रिंग होती हैं।
\n
• गुण (property) — वह जो ब्राउज़र द्वारा HTML पढ़ने के बाद DOM तत्व ऑब्जेक्ट में संग्रहीत होता है। गुण किसी भी डेटा प्रकार के हो सकते हैं: स्ट्रिंग, बूलियन, संख्या, ऑब्जेक्ट।
\n

.attr() विधि विशेषताओं के साथ काम करती है। .prop() विधि गुणों के साथ काम करती है। सरल लगता है? हाँ, लेकिन इसमें कुछ बारीकियाँ हैं।

मुख्य जाल: बूलियन विशेषताएँ

सबसे लोकप्रिय उदाहरण जो शुरुआती लोगों को भ्रमित करता है, वह है चेकबॉक्स, रेडियो बटन और अन्य तत्व जिनमें बूलियन विशेषताएँ (checked, disabled, selected, readonly) होती हैं।

कल्पना करें कि आपके पास ऐसा HTML है:

<input type="checkbox" id="myCheckbox" checked>

आप जाँचना चाहते हैं कि चेकबॉक्स चिह्नित है या नहीं। यह लिखना तर्कसंगत है:

console.log( $('#myCheckbox').attr('checked') ); // "checked" (स्ट्रिंग!)\nconsole.log( $('#myCheckbox').prop('checked') ); // true (बूलियन!)

यह रहा अंतर! .attr() स्ट्रिंग "checked" लौटाता है यदि HTML में विशेषता मौजूद है, और undefined यदि नहीं है। जबकि .prop() DOM में तत्व की वर्तमान स्थिति के आधार पर true या false लौटाता है।

अब सबसे दिलचस्प बात: यदि उपयोगकर्ता निशान हटा दे तो क्या होगा?

// उपयोगकर्ता द्वारा निशान हटाने के बाद:\nconsole.log( $('#myCheckbox').attr('checked') ); // "checked"! (HTML नहीं बदला)\nconsole.log( $('#myCheckbox').prop('checked') ); // false (स्थिति बदल गई)

यही कारण है कि चेकबॉक्स की स्थिति जाँचने के लिए .attr() का उपयोग करना एक गलती है। HTML में checked विशेषता अपरिवर्तित रहती है, जबकि DOM में checked गुण गतिशील रूप से बदलता है। .prop() हमेशा सटीक उत्तर देता है।

अंगूठे का नियम

एक सरल नियम है जो आपको गलतियाँ करने से बचाएगा:

\n
• .prop() का उपयोग करें जब आपको किसी तत्व की गतिशील स्थिति प्राप्त या बदलनी हो (उदाहरण के लिए, checked, disabled, selected, input का value)।
\n
• .attr() का उपयोग करें जब आपको HTML से स्थिर विशेषता पढ़नी या बदलनी हो (उदाहरण के लिए, href, src, data-*, id, class)।
\n

याद रखें: .prop() — उन गुणों के लिए जो काम के दौरान बदलते हैं। .attr() — उन विशेषताओं के लिए जो मार्कअप में निर्धारित हैं।

चरण-दर-चरण उदाहरण: disabled के साथ काम करना

आइए एक और क्लासिक मामले पर विचार करें — disabled विशेषता वाला एक बटन।

<button id="myButton" disabled>मुझे दबाएँ</button