또 다른되지 이제 이것은 어떤 차이 질문이다하는 것은 , 내가 한 몇 가지 테스트를 수행 (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>

에 속성이 checked없지만이라는 속성이 checked있습니다.

따라서 1.6의 최종 빌드에서는 문제 attr가 발생하지 prop않도록합니다. 어떤 사람들은 이것이 깨끗한 휴식이되기를 원했지만, 모든 일이 깨지지 않았기 때문에 올바른 결정이 내려 졌다고 생각합니다!

에 관해서:

Prop : JavaScript를 통해 수정 한 후 현재 상태의 값

속성 : 페이지로드시 html에 정의 된 값입니다.

속성이 실제로 변경되는 횟수가 많기 때문에 항상 사실은 아니지만 check와 같은 속성의 경우 변경할 속성이 없으므로 prop을 사용해야합니다.

참조 :

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

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

.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]

나는 이것을 시도했다

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

다음과 같이 출력됩니다.

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

이 월에서는 그 나타냄 action이 경우에만 정규화 읽기 와 prop.

jquery 1.6.1+ attr ()은 1.6 이전과 같이 속성을 반환 / 변경합니다. 따라서 귀하의 테스트는 그다지 의미가 없습니다.

반환 값의 사소한 변경에 유의하십시오.

예 :

attr ( 'checked') : 1.6.1 이후로 1.6 이전 true / false는 returend입니다. "선택"/ 정의되지 않음이 반환됩니다.

attr ( 'selected') : 1.6.1 "selected"/ undefined가 반환되었으므로 1.6 이전 true / false 반환

독일어로 된이 주제에 대한 자세한 개요는 여기에서 찾을 수 있습니다.

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