programing

jQuery tract vs prop?

topblog 2023. 10. 10. 20:02
반응형

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

반응형