1.6 버전 이전에는 attr()에서 property와 attribute가 구분되지 않는 형태로 결과값이 제공되었으나 1.6 버전 이후로 어떤 함수를 써야하는가에 대해 일부 혼란이 있었다고 한다.
1.6 버전부터는 attr()는 속성 그 자체의 값을 반환하고 있으며, prop()는 속성값을 명시적으로 찾아낼 수 있는 방법을 제공한다.
✍
<input type="checkbox" id="test1" checked="checked"> test1
<input type="checkbox" id="test2"> test2 <br>
<div class="testlog"></div>✍
$("input:checkbox").change("on", function() {
$("div.testlog").html("<br/> check1 .attr('checked') : " + $("#test1").attr("checked") +
"<br/> check2 .attr('checked') : " + $("#test2").attr("checked")
+ "<br/> check1 .prop('checked') : " + $("#test1").prop("checked")
+ "<br/> check1 .is(':checked') : " + $("#test1").is(":checked")
);체크박스의 값이 변화할 때마다 각각의 값을 불러다가 div에 뿌리도록 설정했고
아무 체크박스나 클릭하면 이벤트가 동작하므로, test2 체크박스를 클릭했다.
두번째 체크박스는 checked 여부가 바뀌어도 $("#test2").attr("checked") 값은 undefined다.
해당 체크박스에 체크를 하건 안하건 undefined다.
해당 값이 뜨는 이유는 최초 element 선언 시, checked 속성이 없었기 때문에 해당 속성자체를 찾을 수 없어서 undefined가 뜬다.
비교해서 보았을 때 첫 번재 체크박스의 경우는 checked로 뜬다.
반대로 첫 번째 체크박스를 해제했음에도 $("#test1").attr("checked") 의 값은 checked라고 뜬다.
체크박스에 있어서 attr를 통해 얻은 checked의 값은 신뢰할 수 없다.
이를 통해 확실해진것은 attr의 값은 최초 선언되었을 때의 속성값을 가져오는 것으로 보여진다.
attr()는 checked의 값을 checked로 표현하고 있는데, prop()는 실제적으로 checked를 true 혹은 false로 표현하여 실제 체크되어있는가 아닌가를 알 수 있도록 명시적으로 값을 나타낸다.
🧐 jquery API 발췌
form 요소의 disabled, selected, checked와 같은 속성값을 확인 또는 변경하는 경우는 .prop()를 사용하는 것을 권장한다.
📖 정리
.attr() 을 통해서는 element가 가지는 속성값이나 정보를 조회 (style, src, rowspan 등) 하거나 세팅하는 형식의 업무를 하고
.prop() 를 통해서는 element가 가지는 실제적인 상태 (활성화, 체크, 선택여부 등) 를 제어하는 업무를 하는 것이 좋겠다.
