jQuery के attr बनाम सहारा?


102

अब यह सिर्फ एक और बात नहीं है कि अंतर का सवाल क्या है , मैंने कुछ परीक्षण किए हैं (http://jsfiddle.net/ZC3Lf/) आउटपुट होने के साथ propऔर इसे संशोधित करता है :attr<form action="/test/"></form>​

1) प्रोप संशोधन परीक्षण
सहारा: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Attr संशोधन परीक्षण
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr तो प्रोप संशोधन परीक्षण
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop तो Attr संशोधन परीक्षण
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

अब मैं कुछ चीजों के बारे में उलझन में हूं, जहां तक ​​मेरा ज्ञान जाता है:
Prop: जावास्क्रिप्ट
Attr के माध्यम से किसी भी संशोधन के बाद इसकी वर्तमान स्थिति में मूल्य : पृष्ठ लोड पर HTML में परिभाषित किया गया था।

अब अगर यह सही है,

  • ऐसा propप्रतीत होता है कि actionपूरी तरह से योग्य बनाने के लिए प्रतीत होता है , और इसके विपरीत विशेषता को संशोधित क्यों नहीं करता है?
  • विशेषता को संशोधित करने propमें 1)संशोधन क्यों करता है , कि मुझे कोई मतलब नहीं है?
  • संपत्ति को संशोधित करने attrमें 2)संशोधन क्यों किया जाता है , क्या वे उस तरह से जुड़े हुए हैं?


टेस्ट कोड

एचटीएमएल

जावास्क्रिप्ट

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

3
के संभावित डुप्लिकेट stackoverflow.com/questions/5874652/prop-vs-attr
goodeye

जवाबों:


71

दुर्भाग्य से आपके कोई भी लिंक काम नहीं करते :(

कुछ अंतर्दृष्टि हालांकि, attrसभी विशेषताओं के लिए है। propगुणों के लिए है।

पुराने jQuery के संस्करणों (<1.6) में, हमारे पास बस था attr। जैसे डोम संपत्तियों के लिए प्राप्त करने के लिए nodeName, selectedIndexया defaultValueआप की तरह कुछ करना था:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

चूसा, इसलिए propजोड़ा गया:

index = $("#foo").prop("selectedIndex");

यह बहुत अच्छा था, लेकिन नाराजगी से यह पिछड़ा संगत नहीं था, जैसा कि:

<input type="checkbox" checked>

की कोई विशेषता नहीं है checked, लेकिन इसमें एक संपत्ति है जिसे कहा जाता है checked

तो, 1.6 के अंतिम निर्माण में, attrऐसा भी करते हैं propताकि चीजें टूट न जाएं। कुछ लोग चाहते थे कि यह एक साफ ब्रेक हो, लेकिन मुझे लगता है कि सही फैसला किया गया क्योंकि चीजें पूरी जगह नहीं टूटीं!

के बारे में:

Prop: जावास्क्रिप्ट के माध्यम से किसी भी संशोधन के बाद वर्तमान स्थिति में इसका मूल्य

Attr: पृष्ठ लोड पर HTML में परिभाषित किया गया मान।

यह हमेशा सच नहीं होता है, क्योंकि कई बार विशेषता वास्तव में बदल जाती है, लेकिन जाँच की गई संपत्तियों के लिए, बदलने की विशेषता नहीं होती है, इसलिए आपको प्रोप का उपयोग करने की आवश्यकता होती है।

संदर्भ:

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr


परीक्षण के लिए लिंक ऊपर "कुछ परीक्षण किए गए" था मैं इसे और अधिक दृश्यमान बनाऊंगा, लेकिन यहां यह वैसे भी है: jsfiddle.net/ZC3Lf
Hailwood

मुझे एक प्रश्न मिलता है, यदि विशेषता अनुकूलित है, न कि DOM गुण, प्रोप () रिटर्न undefined, और attr () अच्छी तरह से काम करता है।

3

.Prop और .attr के बीच अंतर देखने के लिए एक स्पष्ट मामला है

नीचे दिए गए HTML पर विचार करें:

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

और jQuery का उपयोग करके नीचे दिए गए JS:

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

निम्नलिखित आउटपुट बनाता है:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

1

मैंने यह कोशिश की है

console.log(element.prop(property));
console.log(element.attr(property));

और यह नीचे के रूप में आउटपुट

http://fiddle.jshell.net/test/
/test/ 

यह इंगित करता है कि actionयह सामान्यीकृत है जब इसे पढ़ा जाता है prop


मुझे ऐसा नहीं लगता, जैसा कि अन्यथा आउटपुट को 2)सामान्य किया जाएगा!
हेलीवुड

@ हेलवुड यह नहीं होगा, क्योंकि आपको /test/एक्सेस करने के लिए मिला है attr, और फिर सेट किया /test/1गया है attr, जो तत्व का एट्रीब्यूट है। ऐसी कोई प्रक्रिया नहीं है जो सामान्यीकरण को ट्रिगर करे।
हाओचेंग

मैं उलझन में हूं कि आपका क्या मतलब है, 2)ऊपर परीक्षण है element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />'); यदि इसे पढ़ा गया तो सामान्यीकृत किया गया था, क्या अंतिम पंक्ति सामान्यीकृत संस्करण का उत्पादन नहीं करेगी?
हेलवुड

वेरिएबल्स:property = 'action'; body = $('body'); element = $('form');
हैलवुड

सामान्यीकरण केवल तभी ट्रिगर किया जाएगा जब प्रोप एक्सेस किया जाता है, और एटर की पहुंच नहीं होगी।
हाओचेंग

1

1.6.1+ के बाद से jquery 1.6.1+ attr () रिटर्न / परिवर्तन संपत्ति जैसे 1.6। इस प्रकार आपके परीक्षण बहुत मायने नहीं रखते हैं।

वापसी मूल्यों में मामूली बदलाव के बारे में पता होना।

जैसे

attr ('जाँच'): 1.6.1 से पहले 1.6 सच / असत्य से पहले, पुनर्खरीद है। "चेक किया गया" / अपरिभाषित लौटा दिया गया है।

attr ('चयनित'): 1.6 से पहले सच / गलत लौटा दिया गया है, क्योंकि 1.6.1 "चयनित" / अपरिभाषित वापस आ गया है

जर्मन में इस विषय का विस्तृत अवलोकन यहाँ पाया जा सकता है:

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.