또 다른되지 이제 이것은 어떤 차이 질문이다하는 것은 , 내가 한 몇 가지 테스트를 수행 (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
이유와 반대로 속성을 수정하지 않는 이유는 무엇입니까? prop
in을1)
수정하면 속성 이 수정되는 이유는 무엇 입니까?attr
in을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을 사용해야합니다.
참조 :
답변
.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 반환
독일어로 된이 주제에 대한 자세한 개요는 여기에서 찾을 수 있습니다.