jQuery tract vs prop?
이제 이것은 또 다른 문제가 아닙니다. 차이점 질문은 무엇입니까? 몇 가지 테스트를 수행했습니다(http://jsfiddle.net/ZC3Lf/) 수정합니다.prop
그리고.attr
의<form action="/test/"></form>
출력:
1) prop 수정 테스트
소품:http://fiddle.jshell.net/test/1
특성:http://fiddle.jshell.net/test/1
2) 특성 수정 테스트
소품:http://fiddle.jshell.net/test/1
특성:/test/1
3) 그런 다음 Prop Modification 테스트를 수행합니다.
소품:http://fiddle.jshell.net/test/11
특성:http://fiddle.jshell.net/test/11
4) 적합한 특성 수정 검정
소품:http://fiddle.jshell.net/test/11
특성:http://fiddle.jshell.net/test/11
제가 아는 한, 지금 저는 몇 가지에 대해 혼란스러워하고 있습니다.
Prop : 자바스크립트를 통해 수정 후 현재 상태의 값
특성: html on page load에 정의된 값입니다.
이게 맞다면,
- 수정하는 이유는 무엇입니까?
prop
성공할 것 같습니다action
완전한 자격을 갖추었습니다. 반대로 속성을 수정하지 않는 이유는 무엇입니까? - 수정하는 이유는 무엇입니까?
prop
인에1)
속성을 수정하는 것이 나에게는 말이 안 되는 것입니까? - 수정하는 이유는 무엇입니까?
attr
인에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
깨지지 않게 말입니다어떤 사람들은 이것이 깨끗한 휴식이 되기를 원했지만, 저는 모든 것이 깨지지 않았기 때문에 올바른 결정을 내렸다고 생각합니다!
정보:
제안: 자바스크립트를 통해 수정한 후 현재 상태의 값
특성: html on page load에 정의된 값입니다.
속성이 실제로 변경되는 횟수가 많아 항상 그렇지는 않지만 체크된 속성과 같은 속성의 경우 변경할 속성이 없으므로 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+ atttract ()이 1.6 이전과 같이 반환/changes 속성이므로 테스트는 큰 의미가 없습니다.
반품 값의 사소한 변화를 인식합니다.
예.
속성 ('checked'): 1.6 true/false이 반환되기 전, 1.6.1 이후입니다."checked"/정의되지 않음이 반환됩니다.
atttr ('selected'): 1.6.1 "selected"/undefined이므로 1.6 true/false가 반환되기 전에
독일어로 된 이 주제에 대한 자세한 개요는 여기에서 확인할 수 있습니다.
http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/
언급URL : https://stackoverflow.com/questions/13247058/jquery-attr-vs-prop
'programing' 카테고리의 다른 글
AngularJsngIf로 인해 지시문 내부의 요소를 찾을 수 없습니다. (0) | 2023.10.10 |
---|---|
MySQL 쉼표 문자열을 임시 테이블로 분리 (0) | 2023.10.10 |
자바스크립트 값이 "정수"인지 확인하시겠습니까? (0) | 2023.10.10 |
워드프레스 커스텀 숏코드 편집기 [백본JS & TinyMCE) (0) | 2023.10.10 |
변수 형식을 선행 0이 있는 4자리로 지정 (0) | 2023.10.10 |