봉봉의 개인 블로그
2017-11-14(prop , attr) 본문
.attr() 과 .prop() 의 차이
JQuery를 사용하다 보면 태그들의 속성값을 정의하거나 가져오기 위해 .attr() 함수를 사용하는 경우가 많을 것이다.
그런데 jquery 1.6 이후 부터 .attr() 함수가 용도에 따라 .attr() 과 prop() 으로 분리 되었다.
attr() 과 prop() 의 차이는 무엇인가.
attr() : html의 속성(attribute)을 다룬다.
prop() : javascript 프로퍼티 (property)를 다룬다.
예시1.
1 2 3 4 5 6 | <a id="get_comment" href="#comment">코멘트</a> <script> var $comment = $('#get_comment'); alert($comment.attr('href')); alert($comment.prop('href')) </script> | cs |
이런식의 코드에서 alert 창에 뜨는 것은 무엇인가.
4번째 줄의 alert의 값은 "#comments"
5번째 줄의 alert의 값은 "http://test.com/path/page#comment"
가 된다.
예시2.
1
2
3
4
5
6
<checkbox id="agree" type="checkbox" checked />
<script>
var $checkbox = $('#agree');
alert($checkbox.attr('checked'));
alert($checkbox.prop('checked'));
</script>
이런식의 코드에서 alert 창에 뜨는 것은 무엇인가.
4번째 줄의 alert의 값은 "checked"
5번째 줄의 alert의 값은 "true"
가 된다.
결론은 html에 쓴 속성값을 다루고 싶을때는 attr() 함수를 사용하고,
그 외에 javascript의 프로퍼티 값을 사용할 경우는 prop() 함수를 사용하면 된다.
'입사후 공부한내용' 카테고리의 다른 글
| 2017-11-29(Ajax Dto 객체 넘겨서 받기) (0) | 2017.11.29 |
|---|---|
| 2017-11-28(Array List Ajax 로 넘기기, 체크 박스 전체 선택) (0) | 2017.11.28 |
| 2017-11-10(심플 롤링 배너 만들기(순서대로 위 아래 왼쪽 오른쪽)) (0) | 2017.11.10 |
| 2017-11-06(javascript return) (0) | 2017.11.06 |
| 2017-11-06(Javascript : javascript:void(0)란 ?) (0) | 2017.11.06 |
Comments