.prop () बनाम .attr ()

2297

तो jQuery 1.6 में नया फ़ंक्शन है prop()।

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

या इस मामले में वे एक ही काम करते हैं?

और मैं अगर है का उपयोग कर के लिए स्विच करने के लिए है prop(), सभी पुराने attr()कॉल अगर मैं 1.6 करने के लिए स्विच टूट जाएगा?

अपडेट करें

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

स्निपेट का विस्तार करें

(इस पहेली को भी देखें: http://jsfiddle.net/maniator/JpUF2/ )

कंसोल getAttributeएक स्ट्रिंग के attrरूप में और एक स्ट्रिंग के रूप में लॉग करता है , लेकिन propए CSSStyleDeclaration, क्यों के रूप में? और यह भविष्य में मेरी कोडिंग को कैसे प्रभावित करता है?

— नफतली उर्फ नील
स्रोत

17

यह निश्चित ब्याज का होगा: books.google.ca/…

28

@ नहीं, यह इसलिए है क्योंकि यह परिवर्तन jQuery को स्थानांतरित करता है। HTML विशेषताओं और DOM गुणों के बीच का अंतर बड़े पैमाने पर है।

7

यह jQuery के परिवर्तनों को वापस देखने के लिए मुझे दुखी करता है। वे गलत दिशा में जा रहे हैं।

4

@Neal। हां, और यह दो तरीकों को अलग करने के बजाय समस्या को और जटिल कर देता है।

6

@BritishDeveloper का उत्तर केवल एक्स या वाई का उपयोग करने के बजाय केवल यह बताने में अधिक जटिल है क्योंकि यह इस बात पर निर्भर करता है कि आप क्या प्राप्त करना चाहते हैं। क्या आप विशेषता चाहते हैं, या आप संपत्ति चाहते हैं? वे दो बहुत अलग चीजें हैं।

— केविन बी

1874

अपडेट 1 नवंबर 2012

मेरा मूल उत्तर विशेष रूप से jQuery 1.6 पर लागू होता है। मेरी सलाह वही है लेकिन jQuery 1.6.1 ने चीजों को थोड़ा बदल दिया: टूटी हुई वेबसाइटों के अनुमानित ढेर के सामने, jQuery की टीम बूलियन विशेषताओं के लिए अपने पुराने व्यवहार के करीब (लेकिन बिल्कुल वैसी ही नहीं) पर वापस आ attr()गई । जॉन रेसिग ने भी इसके बारे में ब्लॉग किया था । मैं उस कठिनाई को देख सकता हूं जो वे अभी भी पसंद करने के लिए अपनी सिफारिश से असहमत थे attr()।

मूल उत्तर

यदि आपने कभी केवल jQuery का उपयोग किया है और सीधे DOM का उपयोग नहीं किया है, तो यह एक भ्रामक परिवर्तन हो सकता है, हालाँकि यह निश्चित रूप से एक वैचारिक सुधार है। JQuery का उपयोग करने वाली साइटों के bazillions के लिए इतना अच्छा नहीं है जो इस परिवर्तन के परिणामस्वरूप टूट जाएगा।

मैं मुख्य मुद्दों को संक्षेप में बताऊंगा:

आप आमतौर पर के prop()बजाय चाहते हैं attr()।
अधिकांश मामलों में, prop()वही करता है जो वह करता था attr()। के लिए कॉल की जगह attr()के साथ prop()में अपने कोड आम तौर पर काम करेंगे।
गुण आमतौर पर विशेषताओं की तुलना में सरल होते हैं। एक गुण मान केवल एक स्ट्रिंग हो सकता है जबकि एक संपत्ति किसी भी प्रकार की हो सकती है। उदाहरण के लिए, checkedसंपत्ति एक बूलियन है, styleसंपत्ति प्रत्येक शैली के लिए व्यक्तिगत गुणों के साथ एक वस्तु है, sizeसंपत्ति एक संख्या है।
जहां एक ही नाम के साथ एक संपत्ति और एक विशेषता दोनों मौजूद हैं, आमतौर पर एक को अपडेट करने से दूसरे को अपडेट किया जाएगा, लेकिन इनपुट की कुछ विशेषताओं के लिए यह मामला नहीं है, जैसे valueऔर checked: इन विशेषताओं के लिए, संपत्ति हमेशा वर्तमान स्थिति का प्रतिनिधित्व करती है विशेषता (IE के पुराने संस्करणों को छोड़कर) इनपुट के डिफ़ॉल्ट मूल्य / चेकनेस ( defaultValue/ defaultCheckedसंपत्ति में परिलक्षित) से मेल खाती है ।
यह परिवर्तन विशेषताओं और गुणों के सामने फंसे जादू jQuery की कुछ परत को हटा देता है, जिसका अर्थ है कि jQuery डेवलपर्स को गुणों और विशेषताओं के बीच के अंतर के बारे में थोड़ा सीखना होगा। यह एक अच्छी बात है।

यदि आप एक jQuery डेवलपर हैं और गुणों और विशेषताओं के बारे में इस पूरे व्यवसाय से भ्रमित हैं, तो आपको एक कदम वापस लेने और इसके बारे में थोड़ा जानने की आवश्यकता है, क्योंकि jQuery अब इस सामान से आपको ढालने की इतनी कोशिश नहीं कर रहा है। इस विषय पर आधिकारिक लेकिन कुछ हद तक शुष्क शब्द के लिए, चश्मा है: DOM4 , HTML DOM , DOM स्तर 2 , DOM स्तर 3 । मोज़िला का DOM प्रलेखन अधिकांश आधुनिक ब्राउज़रों के लिए मान्य है और ऐनक की तुलना में पढ़ना आसान है, इसलिए आपको उनका DOM संदर्भ मददगार लग सकता है। तत्व गुणों पर एक खंड है ।

गुणों से निपटने के लिए गुण कैसे सरल हैं, इसका एक उदाहरण के रूप में, एक चेकबॉक्स पर विचार करें जो शुरू में चेक किया गया है। ऐसा करने के लिए मान्य HTML के दो संभावित टुकड़े हैं:

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

तो, आपको कैसे पता चलेगा कि चेकबॉक्स को jQuery के साथ चेक किया गया है? स्टैक ओवरफ्लो को देखें और आपको आमतौर पर निम्नलिखित सुझाव मिलेंगे:

if ( $("#cb").attr("checked") === true ) {...}
if ( $("#cb").attr("checked") == "checked" ) {...}
if ( $("#cb").is(":checked") ) {...}

यह वास्तव में checkedबूलियन संपत्ति के साथ करने के लिए दुनिया की सबसे सरल चीज है , जो कि 1995 के बाद से हर प्रमुख स्क्रिप्ट योग्य ब्राउज़र में मौजूद है और त्रुटिपूर्ण रूप से काम करता है:

if (document.getElementById("cb").checked) {...}

प्रॉपर्टी चेकबॉक्स की तुच्छता को चेक या अनचेक करता है:

document.getElementById("cb").checked = false

JQuery 1.6 में, यह स्पष्ट रूप से बन जाता है

$("#cb").prop("checked", false)

checkedएक चेकबॉक्स को स्क्रिप्ट करने के लिए विशेषता का उपयोग करने का विचार अप्राप्य और अनावश्यक है। संपत्ति वह है जो आपको चाहिए।

यह स्पष्ट नहीं है कि चेकबॉक्स को चेक या अनचेक करने का सही तरीका क्या checkedविशेषता का उपयोग कर रहा है
विशेषता मान वर्तमान दृश्यमान स्थिति के बजाय डिफ़ॉल्ट को दर्शाता है (IE के कुछ पुराने संस्करणों को छोड़कर, इस प्रकार चीजें अभी भी कठिन बना रही हैं)। विशेषता आपको इस बारे में कुछ नहीं बताती है कि पृष्ठ पर चेकबॉक्स चेक किया गया है या नहीं। Http://jsfiddle.net/VktA6/49/ देखें ।

— टिम डाउन
स्रोत

2

@TJCrowder, फिर कौन से?

— नफ्ताली उर्फ नील

9

@ नील: यदि आप यह जानना चाहते हैं कि DOM तत्वों में क्या गुण हैं और विशेषताएँ उनके मूल्यों को कैसे प्रभावित कर सकती हैं, तो इन लिंक को हाथ में रखें: DOM2 HTML विनिर्देशन , DOM2 कल्पना और DOM3 कल्पना। प्रत्येक मामले में अनुक्रमित उत्कृष्ट हैं और आपको सीधे संपत्ति के गहन विवरण से जोड़ते हैं, जहां इसका मूल्य आता है, आदि

— टीजे क्राउडर

4

@ नील: रे जो इसे अलग बनाता है: सूचना का स्रोत और प्रकृति। valueउदाहरण के लिए, टिम का उदाहरण देखें। एक फ़ंक्शन जिसे गुण "मान" के बजाय संपत्ति कोattr पुनः प्राप्त करता है, बहुत मायने नहीं रखता (और वे अलग हो सकते हैं)। आगे जाना, गुण करना और गुण करना स्पष्ट होगा, हालांकि संक्रमण कुछ के लिए दर्दनाक होगा। इसे गलत तरीके से न लें, वापस जाने और ऐनक पढ़ने के लिए कुछ भी नहीं है कि क्या गुण हैं। valueattrprop

— टीजे क्राउडर

54

@ नील: एक DOM तत्व एक ऑब्जेक्ट है। गुण किसी अन्य प्रोग्रामिंग ऑब्जेक्ट की तरह ही उस ऑब्जेक्ट के गुण हैं। उन प्रॉप्स में से कुछ मार्कअप में विशेषताओं से अपने प्रारंभिक मूल्यों को प्राप्त करते हैं, जो डोम ऑब्जेक्ट पर विशेषताओं के एक अलग नक्शे में भी संग्रहीत किए जाते हैं । ज्यादातर मामलों में, किसी प्रॉम्प्ट पर लिखने से केवल प्रॉप में बदलाव होता है, हालांकि दुख की बात है कि कुछ प्रॉप्स हैं जो अंतर्निहित एट्रर ( valueउदाहरण के लिए) के माध्यम से कोई भी बदलाव लिखते हैं , लेकिन आइए ज्यादातर इसे अनदेखा करने की कोशिश करते हैं। 99% समय, आप सहारा के साथ काम करना चाहते हैं। यदि आपको वास्तविक विशेषता के साथ काम करने की आवश्यकता है, तो आप शायद यह जान जाएंगे।

— टीजे क्राउडर

4

@ समय: " valueइनपुट की संपत्ति बदलने से valueआधुनिक ब्राउज़रों में इसकी विशेषता नहीं बदल जाती है" मुझे नहीं लगता कि ऐसा किया है, यही कारण है कि मैंने इसे एक उदाहरण के रूप में उपयोग करना शुरू कर दिया है, लेकिन जब मैंने उदाहरण को कोड करना शुरू किया, तो डर गया अगर यह क्रोम, फ़ायरफ़ॉक्स, ओपेरा, IE पर अपडेट नहीं हुआ ... - jsbin.com/ahire4 मुझे लगता है कि मैं input[type="button"]अपने प्रयोग के लिए उपयोग कर रहा था । यह a - jsbin.com/ahire4/2 पर एट्रिब्यूट के बारे में बात करते हुए विशेषता को अपडेट नहीं करता है !! न केवल तत्व, बल्कि इसका प्रकार ...input[type="text"]

— टीजे क्राउडर

664

मुझे लगता है कि टिम ने इसे काफी अच्छा कहा है , लेकिन चलो वापस कदम:

एक DOM एलिमेंट एक ऑब्जेक्ट है, मेमोरी में एक चीज है। ओओपी में अधिकांश वस्तुओं की तरह, इसमें गुण हैं । यह भी, अलग से, तत्व पर परिभाषित विशेषताओं का एक नक्शा है (आमतौर पर मार्कअप से आता है कि ब्राउज़र तत्व बनाने के लिए पढ़ता है)। तत्व के के कुछ गुण उनके प्राप्त प्रारंभिक से मान गुण एक या समान नाम (के साथ value"मूल्य" विशेषता के अपने प्रारंभिक मूल्य हो जाता है; href"href" विशेषता के अपने प्रारंभिक मूल्य हो जाता है, लेकिन यह वास्तव में एक ही मूल्य नहीं है, classNameसे "वर्ग" विशेषता)। अन्य संपत्तियों को उनके प्रारंभिक मूल्यों को अन्य तरीकों से प्राप्त होता है: उदाहरण के लिए, parentNodeसंपत्ति को इसका मूल्य उसके मूल तत्व के आधार पर मिलता है;style संपत्ति, चाहे उसकी "शैली" विशेषता हो या न हो।

आइए इस एंकर पर एक पृष्ठ पर विचार करें http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

कुछ आभारी कला ASCII (और बहुत सारा सामान छोड़कर):

+ ------------------------------------------- +
| HTMLAnchorElement |
+ ------------------------------------------- +
| href: "http://example.com/foo.html" |
| नाम: "fooAnchor" |
| आईडी: "fooAnchor" |
| className: "टेस्ट वन" |
| विशेषताएँ: |
| href: "foo.html" |
| नाम: "fooAnchor" |
| आईडी: "fooAnchor" |
| वर्ग: "परीक्षण एक" |
+ ------------------------------------------- +

ध्यान दें कि गुण और गुण अलग-अलग हैं।

अब, हालांकि वे अलग-अलग हैं, क्योंकि यह सब जमीन से डिजाइन किए जाने के बजाय विकसित हुआ है, कई गुणों को वे उस विशेषता पर वापस लिखते हैं जिसे उन्होंने निर्धारित किया था। लेकिन सभी नहीं करते हैं, और जैसा कि आप hrefऊपर से देख सकते हैं , मानचित्रण हमेशा एक सीधा "पास ऑन वैल्यू" नहीं होता है, कभी-कभी इसमें व्याख्या भी शामिल होती है।

जब मैं किसी वस्तु के गुणों के बारे में बात करता हूं, तो मैं अमूर्त में नहीं बोल रहा हूं। यहाँ कुछ गैर- jQuery कोड है:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(वे मान अधिकांश ब्राउज़रों के अनुसार हैं; कुछ भिन्नताएँ हैं।)

linkवस्तु एक असली बात है, और तुम वहाँ एक तक पहुँचने के बीच कोई वास्तविक अंतर है देख सकते हैं संपत्ति उस पर, और एक तक पहुँचने विशेषता ।

जैसा कि टिम ने कहा, समय का विशाल बहुमत , हम गुणों के साथ काम करना चाहते हैं। आंशिक रूप से ऐसा इसलिए है क्योंकि उनके मूल्य (उनके नाम भी) ब्राउज़रों में अधिक सुसंगत हैं। हम ज्यादातर केवल उन विशेषताओं के साथ काम करना चाहते हैं जब इससे संबंधित कोई संपत्ति नहीं है (कस्टम विशेषताएँ), या जब हम जानते हैं कि उस विशेष विशेषता के लिए, विशेषता और संपत्ति 1: 1 नहीं है (जैसा कि hrefऊपर और "href" के साथ है) ।

मानक गुण विभिन्न DOM चश्मा में निर्धारित किए गए हैं:

DOM2 HTML (काफी हद तक अप्रचलित है, इसके बजाय HTML कल्पना देखें )
DOM2 कोर (अप्रचलित)
DOM3 कोर (अप्रचलित)
DOM4

इन स्पेक्स में बेहतरीन इंडेक्स होते हैं और मैं इन्हें लिंक रखने की सलाह देता हूं; मुझे उन्हें हर समय इस्तेमाल करना है।

उदाहरण के लिए, data-xyzआपके द्वारा अपने कोड में मेटा-डेटा प्रदान करने के लिए तत्वों पर रखी गई कोई भी विशेषता , उदाहरण के लिए, (जब तक कि आप data-उपसर्ग से चिपके हों, HTML5 के रूप में मान्य है )। (JQuery के हाल के संस्करण आपको फ़ंक्शन के data-xyzमाध्यम से तत्वों तक पहुंच प्रदान करते dataहैं, लेकिन यह फ़ंक्शन विशेषताओं के लिए सिर्फ एक एक्सेसर नहीं हैdata-xyz [यह दोनों की तुलना में अधिक और कम करता है]; जब तक आपको वास्तव में इसकी विशेषताओं की आवश्यकता नहीं होती है, मैं attrफ़ंक्शन को इंटरैक्ट करने के लिए उपयोग करूंगा; data-xyzविशेषता के साथ ।)

इस attrफ़ंक्शन के पास कुछ जटिल तर्क होते थे, जो कि वे चाहते थे कि आप वास्तव में विशेषता प्राप्त करने के बजाय चाहते थे। इसने अवधारणाओं को सीमित कर दिया। करने के लिए आगे बढ़ रहा था propऔर attrउन्हें डी-कन्फ़ल करने के लिए था। संक्षेप में v1.6.0 में jQuery उस संबंध में बहुत दूर चला गया, लेकिन सामान्य परिस्थितियों को संभालने के लिए कार्यक्षमता को जल्दी से वापस जोड़ा गया , attrजहां लोग attrतकनीकी रूप से उपयोग करते समय उनका उपयोग करते हैं prop।

— टीजे क्राउडर
स्रोत

वाह। यह नया 1.6.1 अपडेट वास्तव में इस सवाल को थोड़ा कम करता है .. (लेकिन ज्यादा नहीं) लेकिन यह लिंक मूल रूप से अब इसका जवाब देता है

— Naftali उर्फ नील

यह मेरे लिए अशक्त नहीं था, मैंने बस jquery1.7 का उपयोग करके एक बग तय किया था जहां मैं स्थापित कर रहा था। (वर्ग), 'bla') और यह काम नहीं कर रहा था जहाँ .prop ('className', 'bla') ) काम किया

— पांडावुड

@PandWood: क्रोम 17, फ़ायरफ़ॉक्स 11, ओपेरा 11, IE6, IE8, IE9 और सफारी 5. पर 1.7.0 , 1.7.1 , और 1.7.2.attr('class', 'bla') में मेरे लिए उम्मीद के मुताबिक काम करता है

— टीजे क्राउडर

धन्यवाद, मेरे मामले में कुछ विशिष्ट होना चाहिए, मुझे यह जांचने दें और एक परीक्षण मामले के साथ वापस आना चाहिए। लेकिन कोड बदलने के रूप में हमारे पास अभी है, "प्रोप / क्लासनेम" के बजाय, "attr" के बजाय हमारे लिए एक बड़ा बग ठीक करता है जो हिट होने पर हम jquery1.4 से 1.7 तक चले गए - सभी ब्राउज़रों पर

— पांडा वर्ड

3

@TJCrowder re: .data- यह मौजूद होने पर विशेषता के डिफ़ॉल्ट मान को पढ़ेगा , लेकिन यदि आप इसे लिखते हैं, तो यह तत्व की छिपी हुई संपत्ति को बदल देगा , और विशेषता को अपडेट नहीं करेगा।

— अलनीतक

250

यह परिवर्तन jQuery के लिए एक लंबा समय रहा है। वर्षों से, वे एक समारोह के नाम से संतुष्ट attr()हैं, जो ज्यादातर DOM गुणों को प्राप्त करता है, न कि उस परिणाम से जिसे आप नाम से उम्मीद करेंगे। के अलगाव attr()और prop()एचटीएमएल विशेषताओं और डोम गुणों के बीच भ्रम की स्थिति से कुछ को कम मदद करनी चाहिए। $.fn.prop()निर्दिष्ट डोम गुण को $.fn.attr()पकड़ लेता है , जबकि निर्दिष्ट HTML विशेषता को पकड़ लेता है।

पूरी तरह से समझने के लिए कि वे कैसे काम करते हैं, यहाँ HTML विशेषताओं और DOM गुणों के बीच अंतर पर एक विस्तृत विवरण दिया गया है:

HTML विशेषताएँ

वाक्य - विन्यास:

<body onload="foo()">

उद्देश्य: मार्कअप को घटनाओं, प्रतिपादन और अन्य उद्देश्यों के लिए इसके साथ जुड़े डेटा रखने की अनुमति देता है।

विज़ुअलाइज़ेशन: HTML विशेषताएँ शरीर पर वर्ग गुण यहाँ दिखाया गया है। यह निम्नलिखित कोड के माध्यम से सुलभ है:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

विशेषताएँ स्ट्रिंग रूप में वापस आ जाती हैं और ब्राउज़र से ब्राउज़र में असंगत हो सकती हैं। हालांकि, वे कुछ स्थितियों में महत्वपूर्ण हो सकते हैं। जैसा कि ऊपर उदाहरण दिया गया है, IE 8 क्विरक्स मोड (और नीचे) विशेषता नाम के बजाय गेट सेट / निकालने / हटाने में एक DOM प्रॉपर्टी के नाम की अपेक्षा करता है। यह कई कारणों में से एक है कि अंतर को जानना क्यों महत्वपूर्ण है।

डोम गुण

वाक्य - विन्यास:

document.body.onload = foo;

उद्देश्य: उन गुणों तक पहुंच प्रदान करता है जो तत्व नोड्स से संबंधित हैं। ये गुण विशेषताओं के समान हैं, लेकिन केवल जावास्क्रिप्ट के माध्यम से सुलभ हैं। यह एक महत्वपूर्ण अंतर है जो डोम गुण की भूमिका को स्पष्ट करने में मदद करता है। कृपया ध्यान दें कि विशेषताएँ गुणों से पूरी तरह से भिन्न हैं , क्योंकि यह ईवेंट हैंडलर असाइनमेंट बेकार है और ईवेंट को प्राप्त नहीं करेगा (बॉडी में ऑनलोड इवेंट नहीं है, केवल ऑनलोड विशेषता है)।

दृश्य: डोम गुण

यहां, आप फायरबग में "DOM" टैब के तहत गुणों की एक सूची देखेंगे। ये DOM प्रॉपर्टीज हैं। आप तुरंत उनमें से कुछ को नोटिस करेंगे, जैसा कि आप इसे जाने बिना ही इस्तेमाल कर चुके होंगे। उनके मूल्य वे हैं जो आप जावास्क्रिप्ट के माध्यम से प्राप्त करेंगे।

प्रलेखन

उदाहरण

HTML: <textarea id="test" value="foo"></textarea>

जावास्क्रिप्ट: alert($('#test').attr('value'));

JQuery के पुराने संस्करणों में, यह एक रिक्त स्ट्रिंग देता है। 1.6 में, यह उचित मान देता है, foo।

या तो फ़ंक्शन के लिए नए कोड पर नज़र रखे बिना, मैं विश्वास के साथ कह सकता हूं कि HTML विशेषताओं और DOM गुणों के बीच के अंतर के साथ भ्रम अधिक है, कोड के साथ ही। उम्मीद है, यह आपके लिए कुछ चीजों को मंजूरी दे दी।

-मैट

— K.Dᴀᴠɪs
स्रोत

7

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

10

लड़का, मैं भी अब उलझन में हूँ। तो $('#test').prop('value')कुछ वापस नहीं करता? और न ही .attr('checked')एक चेकबॉक्स के लिए? लेकिन यह करने के लिए इस्तेमाल किया? अब आपको इसे बदलना होगा prop('checked')? मुझे इस भेद की आवश्यकता समझ में नहीं आती - HTML विशेषताओं और DOM गुणों के बीच अंतर करना क्यों महत्वपूर्ण है? आम उपयोग-मामला क्या है जिसने इस बदलाव को "एक लंबा समय आने वाला" बना दिया है ? दोनों के बीच के अंतर को खत्म करने में क्या गलत है, क्योंकि ऐसा लगता है कि उनके उपयोग-मामले ज्यादातर ओवरलैप होते हैं?

— ब्लूराजा - डैनी पीफ्लुगुएफ्ट

5

@BlueRaja: क्योंकि दो अवधारणाओं के बीच एक गंभीर अंतर्निहित अंतर है, अगर आप इसे कालीन के नीचे ब्रश करते हैं जैसे कि jQuery का उपयोग किया जाता है, तो अप्रत्याशित विफलताएं होती हैं। valueसबसे स्पष्ट मामलों में से एक है, क्योंकि valueसंपत्ति आपको एक क्षेत्र का वर्तमान मूल्य valueदेगी , लेकिन विशेषता आपको मूल मूल्य देगी जो कि value="..."विशेषता में घोषित किया गया था , जो वास्तव में defaultValueसंपत्ति है। (हालांकि यह विशेष मामला आईई <9 में बग्स द्वारा फिर से भ्रमित हो जाता है।)

— बॉबीस

4

@BlueRaja: इसका जवाब और भी जटिल है। :-) attr('value', ...)jQuery <1.6 में सेट करना संपत्ति सेट करता है, इसलिए वर्तमान मूल्य बदल जाता है और डिफ़ॉल्ट मान नहीं होता है। 1.6 में यह विशेषता निर्धारित करता है, इसलिए सिद्धांत रूप में डिफ़ॉल्ट मान बदलता है और वर्तमान मूल्य नहीं होता है। हालाँकि, वहाँ (अधिक) ब्राउज़र विसंगतियां हैं कि वास्तव में valueविशेषता क्या सेटिंग करती है। IE में यह वर्तमान मूल्य भी निर्धारित करता है; कुछ ब्राउज़रों में यह केवल वर्तमान मूल्य सेट करता है यदि वर्तमान मूल्य पहले से सेट नहीं किया गया है। [रोता]

— bobince

1

जैसे @Quentin ने कहा, "विशेषताएँ HTML द्वारा परिभाषित की गई हैं। गुण DOM द्वारा परिभाषित किए गए हैं।" सबसे सरल संस्करण जो मैंने पढ़ा है।

— एलन डोंग

240

एक संपत्ति DOM में है; एक विशेषता HTML में है जिसे DOM में पार्स किया गया है।

आगे का विवरण

यदि आप एक विशेषता बदलते हैं, तो परिवर्तन DOM (कभी-कभी एक अलग नाम के साथ) में परिलक्षित होगा।

उदाहरण: classकिसी टैग की विशेषता बदलने classNameसे DOM में उस टैग की संपत्ति बदल जाएगी । यदि आपके पास टैग पर कोई विशेषता नहीं है, तो भी आपके पास खाली या डिफ़ॉल्ट मान के साथ संबंधित DOM प्रॉपर्टी है।

उदाहरण: जबकि आपके टैग में कोई classविशेषता नहीं है, DOM प्रॉपर्टी classNameएक खाली स्ट्रिंग मान के साथ मौजूद है।

संपादित करें

यदि आप एक को बदलते हैं, तो दूसरे को एक नियंत्रक द्वारा बदल दिया जाएगा, और इसके विपरीत। यह नियंत्रक jQuery में नहीं है, लेकिन ब्राउज़र के मूल कोड में है।

— yunzen
स्रोत

तो क्या इसका मतलब यह है कि विशेषता को अपडेट करना बेहतर है क्योंकि तब आप यह सुनिश्चित कर रहे हैं कि विशेषता और संपत्ति दोनों अपडेट हो जाएं और संरेखण में हैं?

— ल्यूक

1

@ ड्यूक डोम आंतरिक तकनीकी प्रतिनिधित्व है, मॉडल है। HTML विशेषताएँ एक बाहरी प्रतिनिधित्व, एक दृश्य हैं। यदि आप एक को बदलते हैं, तो दूसरे को एक नियंत्रक द्वारा बदल दिया जाएगा, और इसके विपरीत।

— yunzen

@ हेरसेकर तो क्या वे दोनों एक नियंत्रक के माध्यम से सिंक में रखे गए हैं? मुझे लगता है कि यह सिर्फ jQuery के attr और प्रोप तरीकों के भीतर है? यहाँ आपकी फ़ेल्ड का एक संशोधन है जहाँ मैं इसे और अधिक खोजता हूँ - jsfiddle.net/v8wRy - और अब तक वे समतुल्य प्रतीत होते हैं।

— ल्यूक

3

"यदि आप एक को बदलते हैं, तो एक नियंत्रक द्वारा दूसरे को बदल दिया जाएगा, और इसके विपरीत। यह नियंत्रक jQuery में नहीं है, लेकिन ब्राउज़र के मूल कोड में है।" यह अधिकांश विशेषताओं / गुणों के लिए सही नहीं है। बहुमत के लिए यह केवल एकतरफा अनुवाद है जहां एक गुण संबंधित संपत्ति के प्रारंभिक मूल्य को निर्धारित करता है । शीर्ष दो उत्तर इस बारे में विस्तार से बताते हैं।

— ।

@Vincent। मैं नहीं देखता, जहां शीर्ष दो उत्तर मेरे उत्तर के विपरीत कुछ कहते हैं। बेशक अधिकांश गुण संगत DOM गुणों के प्रारंभिक मूल्य हैं। लेकिन वे परस्पर निर्भर हैं। jQuery('p').prop('className', 'foo');Chrome कंसोल में कुछ आज़माएँ और आप देखेंगे, कि कैसे प्रत्येक पैराग्राफ़ की thg classविशेषता है 'foo'। बेशक स्रोत कोड में नहीं है, जो सर्वर से आता है। वह एक स्थिरांक है।

— युनजेन

140

यह HTML विशेषताओं और DOM ऑब्जेक्ट्स के बीच का अंतर है जो भ्रम का कारण बनता है। उन लोगों के लिए जो डोम तत्वों के मूल गुणों जैसे कि this.src this.value this.checkedआदि पर सहज अभिनय कर रहे हैं .prop, परिवार के लिए बहुत गर्मजोशी से स्वागत है। दूसरों के लिए, यह भ्रम की एक अतिरिक्त परत है। आइए स्पष्ट करते हैं कि।

सबसे आसान तरीका है के बीच अंतर को देखने के लिए .attrऔर .propनिम्नलिखित उदाहरण है:

<input blah="hello">

$('input').attr('blah'): 'hello'उम्मीद के मुताबिक रिटर्न । यहां कोई सुपरराइज नहीं करता।
$('input').prop('blah'): रिटर्न undefined- क्योंकि यह करने की कोशिश कर रहा है [HTMLInputElement].blah- और उस डोम ऑब्जेक्ट पर ऐसी कोई संपत्ति मौजूद नहीं है। यह केवल उस तत्व की विशेषता के रूप में दायरे में मौजूद है[HTMLInputElement].getAttribute('blah')

अब हम कुछ चीजों को बदलते हैं:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

$('input').attr('blah'): 'apple'अह? क्यों नहीं "नाशपाती" क्योंकि यह उस तत्व पर अंतिम सेट किया गया था। क्योंकि संपत्ति को इनपुट विशेषता पर बदल दिया गया था, न कि DOM इनपुट तत्व को - वे मूल रूप से लगभग एक दूसरे के स्वतंत्र रूप से काम करते हैं।
$('input').prop('blah'): लौटता है 'pear'

जिस चीज़ से आपको वास्तव में सावधान रहने की ज़रूरत है, वह यह है कि उपरोक्त कारण के लिए अपने आवेदन में एक ही संपत्ति के लिए इनका उपयोग न करें ।

अंतर प्रदर्शित करने वाली एक फ़ेल्ड देखें: http://jsfiddle.net/garreh/uLQXc/

`.attr`बनाम `.prop`:

दौर 1: शैली

<input style="font:arial;"/>

.attr('style') - मिलान तत्व यानी के लिए इनलाइन शैलियों देता है "font:arial;"
.prop('style') - स्टाइल डिक्लेरेशन ऑब्जेक्ट यानी CSSStyleDeclaration

दौर 2: मूल्य

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

.attr('value')- रिटर्न 'hello'*
.prop('value') - लौटता है 'i changed the value'

* नोट: इस कारण से jQuery की एक .val()विधि है, जो आंतरिक रूप से बराबर है.prop('value')

— गैरी ग्रीन
स्रोत

@ नील बजाओ, यह बेहतर ढंग से jquery कार्यों की संरचना का संदर्भ देता है। "$ ('इनपुट')। प्रोप ('ब्लाह'): अपरिभाषित रिटर्न देता है - क्योंकि यह [HTMLInputElement] .blah करने की कोशिश कर रहा है - और उस DOM ऑब्जेक्ट पर ऐसी कोई संपत्ति मौजूद नहीं है। यह केवल एक विशेषता के रूप में दायरे में मौजूद है। उस तत्व की यानी [HTMLInputElement] .getAttribute ( 'blah') "

— Uğur Gümüşhan

2

Doc, api.jquery.com/prop से भिन्न लगता है : ".prop () विधि को .attr () विधि के बजाय अक्षम और जाँचने के लिए उपयोग किया जाना चाहिए। प्राप्त करने के लिए .val () विधि का उपयोग किया जाना चाहिए। मूल्य तय करना।"

— हंस

53

टी एल; डॉ

का प्रयोग करें prop()अधिक attr()मामलों के बहुमत में।

एक संपत्ति इनपुट तत्व की वर्तमान स्थिति है। एक विशेषता डिफ़ॉल्ट मान है।

एक संपत्ति में विभिन्न प्रकार की चीजें हो सकती हैं। एक विशेषता में केवल तार हो सकते हैं

— agjmills
स्रोत

1

यदि संभव हो तो कुछ आसान नमूना जो उर कह रहे हैं और यह भी दिखाना है कि कब उपयोग करना है prop() and when to go for attr()। उत्तर की प्रतीक्षा कर रहे हैं :)

— मऊ

36

गन्दी जाँच

यह अवधारणा एक उदाहरण प्रदान करती है जहां अंतर देखने योग्य है: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

कोशिश करके देखो:

बटन को क्लिक करे। दोनों चेकबॉक्स चेक किए गए।
दोनों चेकबॉक्स को अनचेक करें।
फिर से बटन पर क्लिक करें। केवल propचेकबॉक्स चेक किया गया। बैंग

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

स्निपेट का विस्तार करें

के लिए कुछ विशेषताओं की तरह disabledपर buttonजोड़ने या सामग्री की विशेषता को हटाने disabled="disabled"हमेशा संपत्ति (एचटीएमएल 5 में आईडीएल विशेषता कहा जाता है) को टॉगल करता है क्योंकि http://www.w3.org/TR/html5/forms.html#attr-fe-disabled का कहना है:

अक्षम IDL विशेषता अक्षम सामग्री विशेषता को प्रतिबिंबित करना चाहिए।

इसलिए आप इसके साथ भाग सकते हैं, हालांकि यह बदसूरत है क्योंकि यह बिना आवश्यकता के HTML को संशोधित करता है।

जैसे अन्य विशेषताओं के लिए checked="checked"पर input type="checkbox", बातें, तोड़ने क्योंकि एक बार आप उस पर क्लिक करें, यह गंदा हो जाता है, और फिर जोड़ने या हटाने के checked="checked"सामग्री की विशेषता में नहीं checkedness टॉगल अब और है ।

यही कारण है कि आपको अधिकतर उपयोग करना चाहिए .prop, क्योंकि यह HTML को संशोधित करने के जटिल दुष्प्रभावों पर निर्भर होने के बजाय, सीधे प्रभावी संपत्ति को प्रभावित करता है।

— सिरो सेंटिल्ली 冠状病毒冠状冠状冠状冠状
स्रोत

पूर्णता भी इन बदलावों की कोशिश के लिए: बटन क्लिक करने से पहले जांच 1) और फिर पहले चेकबॉक्स 2 हटाते) (यह एक के लिए आप स्निपेट) बदलने के लिए पहला इनपुट एक दो की आवश्यकता होगी checkedविशेषता:checked="checked"

— ᴠɪɴᴄᴇɴᴛ

33

सभी डॉक्टर में है :

विशिष्ट स्थितियों में विशेषताओं और गुणों के बीच का अंतर महत्वपूर्ण हो सकता है। JQuery 1.6 से पहले, .attr () विधि कभी-कभी कुछ विशेषताओं को पुनर्प्राप्त करते समय संपत्ति मूल्यों को ध्यान में रखती है, जिससे असंगत व्यवहार हो सकता है। JQuery 1.6 के रूप में, .prop () विधि संपत्ति के मूल्यों को स्पष्ट रूप से पुनर्प्राप्त करने का एक तरीका प्रदान करती है, जबकि .attr () विशेषताओं को पुनः प्राप्त करती है।

तो प्रोप का उपयोग करें!

— अरनौद एफ।
स्रोत

2

तो इसका मतलब है कि जब मैं 1.6 पर स्विच करता हूं, तो चीजों का एक बहुत टूट जाएगा ??

— नौफटली उर्फ नील

नहीं, यह केवल एक असंगत व्यवहार है, अगर यह पहले काम करता है, तो यह हमेशा jQuery 1.6 के साथ काम करेगा, यह सिर्फ इतना सुरक्षित है;)

— अरनौद एफ

6

मुझे याद आने लगता है। $.attr()अधिकांश संपत्तियों को पुनर्प्राप्त करने के बाद मैंने इसके साथ काम किया, न कि "कभी-कभी"। इससे होने वाला भ्रम आज भी गुंजायमान है। अफसोस की बात है, मुझे HTML विशेषताओं बनाम DOM संपत्तियों पर एक निश्चित पढ़ने में बहुत परेशानी हो रही है , इसलिए मैं यहां थोड़ा सा उत्तर लिख सकता हूं।

3

@ अरनौद-च सच नहीं। चेकबॉक्स को चेक करने के लिए attr ('चेक') का उपयोग करने वाले 1.6 से पहले के सभी कोड अब टूट जाएंगे।

— CaptSaltyJack

3

@Matt McDonald: किस तरह की "... HTML विशेषताओं बनाम DOM संपत्तियों पर एक निश्चित पढ़ने में परेशानी होती है ..." क्या आपका मतलब है? गुण (प्रतिबिंबित और अन्यथा) DOM2 HTML विनिर्देश में वर्णित हैं ; आपको DOM2 और DOM3 स्पेक्स को भी संदर्भित करना पड़ सकता है ।

— टीजे क्राउडर

28

विशेषताएँ आपके HTML पाठ दस्तावेज़ / फ़ाइल (== कल्पना करें कि यह आपके HTML मार्कअप का परिणाम है), जबकि
गुण HTML DOM ट्री (== मूल रूप से JS अर्थ में किसी वस्तु की वास्तविक संपत्ति हैं) में हैं।

महत्वपूर्ण रूप से, उनमें से कई सिंक किए गए हैं (यदि आप classसंपत्ति को अपडेट करते हैं, तो classhtml में विशेषता भी अपडेट की जाएगी, और अन्यथा)। लेकिन कुछ विशेषताओं को अप्रत्याशित गुणों के साथ समन्वयित किया जा सकता है - उदाहरण के लिए, गुण संपत्ति सेchecked मेल खाती है , इसलिए defaultChecked

चेकबॉक्स को मैन्युअल रूप से चेक करने से .prop('checked')मान बदल जाएगा , लेकिन मान .attr('checked')और परिवर्तन नहीं होंगे.prop('defaultChecked')
सेटिंग $('#input').prop('defaultChecked', true)भी बदल जाएगी .attr('checked'), लेकिन यह एक तत्व पर दिखाई नहीं देगा।

अंगूठे का नियम है : .prop()विधि का उपयोग बूलियन विशेषताओं / गुणों के लिए और उन गुणों के लिए किया जाना चाहिए जो HTML में मौजूद नहीं हैं (जैसे कि window.location)। अन्य सभी विशेषताएँ (जिन्हें आप html में देख सकते हैं) और .attr() विधि के साथ छेड़छाड़ करते रहना चाहिए । ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

और यहां एक तालिका है जो दिखाती है कि कहां .prop()पसंद किया जाता है (हालांकि .attr()अभी भी इसका इस्तेमाल किया जा सकता है)।

आप कभी-कभी .attr () के बजाय .prop () का उपयोग क्यों करना चाहेंगे, जहाँ बाद में आधिकारिक तौर पर सलाह दी जाती है?

.prop()किसी भी प्रकार - स्ट्रिंग, पूर्णांक, बूलियन वापस कर सकते हैं; जबकि .attr()हमेशा एक स्ट्रिंग लौटाता है।
.prop()की तुलना में लगभग 2.5 गुना तेज कहा जाता है .attr()।

— lakesare
स्रोत

कुछ बदल दिया गया है, इस तरह के: $('#myImageId').prop('src', 'http://example.com/img.png'), var class = $('.myDivClass').prop('class'), या $('#myTextBox').prop('type', 'button')। और इतने पर ...

@ Mr.Wolf, माफ करना, मुझे लगता है आप क्या मतलब नहीं मिलता है। क्या बदल गया'? वाक्य-विन्यास हमेशा से ऐसा ही रहा है।

— झीलों

मुझे लगता है कि आपके उत्तर की तालिका अनावश्यक है। क्योंकि .prop()सभी गुणों के साथ ठीक काम करता है। आप .prop()स्तंभ के सभी गुणों को चिह्नित नहीं करना चाहते हैं , क्या आप?

@ Mr.Wolf, मुझे लगता है कि यह आवश्यक है, क्योंकि, जैसा कि पहले ही कहा गया है, यह दिखाता है कि जहां .prop()पसंद किया जाता है (भले ही .attr()अभी भी इस्तेमाल किया जा सकता है)

— lakesare

मैं आमतौर पर .attr()एक घटना को परिभाषित करने के लिए उपयोग करता हूं जो .prop()नहीं कर सकता। इस तरह $('.myDiv').attr('onclick', 'alert("Hello world!")'):। यदि आप इसे बदलते .attr()हैं .prop(), तो यह काम नहीं करेगा। पूरी तरह से, मुझे लगता है कि .attr()मूल्य निर्धारित करने या प्राप्त करने के लिए उपयोग करने का कोई कारण नहीं है id/class/href/checked/src.....। ध्यान दें कि मैं नहीं कहता कि आप गलत हैं।

20

.attr():

मिलान तत्वों के सेट में पहले तत्व के लिए एक विशेषता का मूल्य प्राप्त करें ।
आपको तत्व का मूल्य देता है क्योंकि यह पृष्ठ लोड पर HTML में परिभाषित किया गया था

.prop():

मिलान तत्वों के सेट में पहले तत्व के लिए एक संपत्ति का मूल्य प्राप्त करें ।
उन तत्वों के अद्यतन मूल्यों को देता है जिन्हें जावास्क्रिप्ट / jquery के माध्यम से संशोधित किया जाता है

— केजीएन-वेब
स्रोत

13

आमतौर पर आप गुणों का उपयोग करना चाहते हैं। केवल के लिए विशेषताओं का उपयोग करें:

एक कस्टम HTML विशेषता प्राप्त करना (क्योंकि यह DOM प्रॉपर्टी के साथ सिंक नहीं किया गया है)।
एक HTML गुण प्राप्त करना जो DOM प्रॉपर्टी के साथ सिंक नहीं करता है, जैसे कि एक मानक HTML विशेषता का "मूल मान" प्राप्त करें, जैसे <input value="abc">.

— Naor
स्रोत

7

attributes -> एच.टी.एम.एल.

properties -> डोम

— nKS
स्रोत

8

मुझे पता है कि आप क्या कहना चाहते हैं, लेकिन HTML एक मार्कअप भाषा है, और DOM एक HTML से बाहर का प्रतिनिधित्व करता है। एक पहचान में गुण और गुण दोनों होते हैं ।

— t.niese

@ t.niese, attirbutesDOM

— NkS

संक्षिप्त उत्तर सरल है।

— नबी काज

6

JQuery 1.6 से पहले, attr()विधि ने कभी-कभी गुण प्राप्त करते समय संपत्ति मूल्यों को ध्यान में रखा, यह असंगत व्यवहार का कारण बना।

prop()विधि का परिचय संपत्ति के मूल्यों को स्पष्ट रूप से पुनर्प्राप्त करने का एक तरीका प्रदान करता है, जबकि .attr()विशेषताओं को पुनः प्राप्त करता है।

डॉक्स:

jQuery.attr() मिलान तत्वों के सेट में पहले तत्व के लिए एक विशेषता का मूल्य प्राप्त करें।

jQuery.prop() मिलान तत्वों के सेट में पहले तत्व के लिए एक संपत्ति का मूल्य प्राप्त करें।

— Gothburz
स्रोत

3

धीरे से उपयोग करने के बारे में अनुस्मारक prop(), उदाहरण:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

ऊपर दिए गए फ़ंक्शन का उपयोग यह जांचने के लिए किया जाता है कि चेकबॉक्स 1 चेक किया गया है या नहीं, अगर चेक किया गया है: 1 वापस; यदि नहीं: रिटर्न 0. फंक्शन प्रोप () का उपयोग यहां GET फ़ंक्शन के रूप में किया जाता है।

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

ऊपर दिए गए फ़ंक्शन का उपयोग चेकबॉक्स 1 को चेक करने के लिए और ALWAYS वापसी 1 में सेट करने के लिए किया जाता है। अब फ़ंक्शन प्रोप () एक सेट फ़ंक्शन के रूप में उपयोग किया जाता है।

गड़बड़ मत करो।

पी / एस: जब मैं छवि src संपत्ति की जाँच कर रहा हूँ । यदि src खाली है, प्रोप पेज (गलत) की वर्तमान URL, और वापसी में attr वापसी रिक्त स्ट्रिंग (दाएं)।

— user2657778
स्रोत

आप इस उदाहरण में गलत कर रहे हैं: <img src="smiley.gif" alt="Smiley face" width="42" height="42" onclick="alert($(this).prop('src'))">। यह काम करना चाहिए और छवि स्थान को वापस करना चाहिए।

2

एक बात `.attr()`यह है कि `.prop()`नहीं कर सकते हैं: सीएसएस चयनकर्ताओं को प्रभावित करते हैं

यहाँ एक मुद्दा है जो मैंने अन्य उत्तरों में नहीं देखा है।

सीएसएस चयनकर्ता [name=value]

जवाब देंगे .attr('name', 'value')
लेकिन हमेशा नहीं .prop('name', 'value')

.prop() केवल कुछ विशेषता-चयनकर्ताओं को प्रभावित करता है

input[name] ( साभार @TimDown )

.attr() सभी विशेषता-चयनकर्ताओं को प्रभावित करता है

input[value]
input[naame]
span[name]
input[data-custom-attribute](न तो .data('custom-attribute')इस चयनकर्ता को प्रभावित करेगा)

— बॉब स्टीन
स्रोत

0

1) एक संपत्ति DOM में है; एक विशेषता HTML में है जिसे DOM में पार्स किया गया है।

2) $ (elem) .attr ("चेक किया गया") (1.6.1+) "चेक किया हुआ" (स्ट्रिंग) चेक करने की स्थिति में परिवर्तन होगा

3) $ (elem) .attr ("चेक किया गया") (प्री-1.6) सही (बूलियन) चेकबॉक्स स्थिति के साथ बदला गया

अधिकतर हम DOM ऑब्जेक्ट के लिए उपयोग करना चाहते हैं, फिर कस्टम विशेषता पसंद करते हैं data-img, data-xyz।
इसके अलावा अंतर से कुछ जब तक पहुँचने checkboxमूल्य और href के साथ attr()और prop()साथ डोम उत्पादन के साथ बात परिवर्तन के रूप में prop()से पूर्ण कड़ी के रूप में originऔर Booleanचेकबॉक्स के लिए मूल्य (pre-1.6)
हम केवल DOM तत्वों को propअन्य के साथ एक्सेस कर सकते हैं, फिर यह देता हैundefined

कोड स्निपेट दिखाएं

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

स्निपेट का विस्तार करें

— पार्थ त्रिवेदी
स्रोत

0

प्रोप () बनाम attr () में कुछ और विचार हैं:

चयनितइंडेक्स, टैगनाम, नोडनेम, नोडटाइप, ओनरडिमेंटमेंट, डिफाल्टचेक, और डिफॉल्ट सेलेक्टेड..टीक को पुनर्प्राप्त किया जाना चाहिए और .prop () विधि के साथ सेट किया जाना चाहिए। इनकी संगत विशेषताएँ नहीं हैं और ये केवल गुण हैं।

इनपुट प्रकार चेकबॉक्स के लिए

   .attr('checked') //returns  checked
   .prop('checked') //returns  true
   .is(':checked') //returns true

प्रोप विधि चेक, चयनित, अक्षम, readOnly..etc के लिए बूलियन मान देता है जबकि अटर रिटर्न परिभाषित स्ट्रिंग। तो, अगर आप सीधे .prop ('चेक') का उपयोग कर सकते हैं।
.attr () कॉल .prop () आंतरिक रूप से इसलिए .attr () विधि उन्हें सीधे .prop () के माध्यम से एक्सेस करने की तुलना में थोड़ी धीमी होगी।

— रिशु रंजन
स्रोत

-2

इस तरह से कोड लिखे जाने पर समस्या को हल करने के लिए गैरी होल उत्तर बहुत प्रासंगिक है

obj.prop("style","border:1px red solid;")

चूंकि प्रोप फ़ंक्शन रिटर्न CSSStyleDeclarationऑब्जेक्ट, उपरोक्त कोड कुछ ब्राउज़र में ठीक से काम नहीं करेगा ( IE8 with Chrome Frame Pluginमेरे मामले में परीक्षण किया गया)।

इस प्रकार इसे निम्नलिखित कोड में बदल रहा है

obj.prop("style").cssText = "border:1px red solid;"

समस्या का हल किया।

— zawhtut
स्रोत

.prop () बनाम .attr ()

HTML विशेषताएँ

वाक्य - विन्यास:

डोम गुण

वाक्य - विन्यास:

प्रलेखन

उदाहरण

आगे का विवरण

.attrबनाम .prop:

दौर 1: शैली

दौर 2: मूल्य

आप कभी-कभी .attr () के बजाय .prop () का उपयोग क्यों करना चाहेंगे, जहाँ बाद में आधिकारिक तौर पर सलाह दी जाती है?

एक बात .attr()यह है कि .prop()नहीं कर सकते हैं: सीएसएस चयनकर्ताओं को प्रभावित करते हैं

`.attr`बनाम `.prop`:

एक बात `.attr()`यह है कि `.prop()`नहीं कर सकते हैं: सीएसएस चयनकर्ताओं को प्रभावित करते हैं