jQuery 속성 대 소품?

jQuery 속성 대 소품?

---

또 다른되지 이제 이것은 어떤 차이 질문이다하는 것은 , 내가 한 몇 가지 테스트를 수행 (http://jsfiddle.net/ZC3Lf/) 개질 prop과 attr의 <form action="/test/"></form>​출력이 되 고 :

1) 소품 수정 테스트
소품 : http://fiddle.jshell.net/test/1
속성 :http://fiddle.jshell.net/test/1

2) 속성 수정 테스트
Prop : http://fiddle.jshell.net/test/1
Attr :/test/1

3) Attr의 다음 소유 수정 테스트
소유 : http://fiddle.jshell.net/test/11
Attr의 :http://fiddle.jshell.net/test/11

4) Prop then Attr 수정 테스트
Prop : http://fiddle.jshell.net/test/11
Attr :http://fiddle.jshell.net/test/11

이제 내 지식이있는 한 몇 가지에 대해 혼란스러워합니다.
Prop : JavaScript
Attr을 통해 수정 한 후 현재 상태 의 값 : 페이지로드시 html에 정의 된 값.

이제 이것이 맞다면

• 를 수정하면 정규화 되는 prop것처럼 보이는 action이유와 반대로 속성을 수정하지 않는 이유는 무엇입니까?
• propin을 1)수정하면 속성 이 수정되는 이유는 무엇 입니까?
• attrin을 2)수정하면 속성 이 수정되는 이유는 무엇 입니까?

---

테스트 코드

HTML

자바 스크립트

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 />');

---

불행히도 귀하의 링크가 작동하지 않습니다.

그러나 일부 통찰력 attr은 모든 속성에 대한 것입니다. prop속성입니다.

이전 jQuery 버전 (<1.6)에서는 attr. 같은 DOM 속성에 도착하기 위해 nodeName, selectedIndex또는 defaultValue당신은 같은 것을해야했다 :

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

그것은 빨려서 prop추가되었습니다.

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

이것은 훌륭했지만 귀찮게도 다음과 같이 이전 버전과 호환되지 않았습니다.

<input type="checkbox" checked>

has no attribute of checked, but it does have a property called checked.

So, in the final build of 1.6, attr does also do prop so that things didn't break. Some people wanted this to be a clean break, but I think that the right decision was made as things didn't break all over the place!

Regarding:

Prop: The value in it's current state after any modifications via JavaScript

Attr: The value as it was defined in the html on page load.

This isn't always true, as many times the attribute is actually changed, but for properties such as checked, there isn't an attribute to change, so you need to use prop.

References:

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

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

---

There is a clear case to see differences between .prop and .attr

consider the HTML below :

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

and the JS below using jQuery :

$(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);
});

creates the following output:

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

---

I have tried this

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

and it outputs as below

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

this may indicates that the action is normalized only when it is read with prop.

---

since jquery 1.6.1+ attr() returns/changes property like before 1.6. thus your tests do not make much sense.

be aware of minor changes in return values.

e.g.

attr(‘checked’): before 1.6 true/false is returend, since 1.6.1. “checked”/undefined is returned.

attr(‘selected’): before 1.6 true/false is returned, since 1.6.1 “selected”/undefined is returned

a detailed overview to this topic in german can be found here:

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

참고URL : https://stackoverflow.com/questions/13247058/jquery-attr-vs-prop