*attr(), prop()의 차이
.attr()은 HTML의 속성을 취급, ----- HTML으로써 기록되어있는 속성의 내용
.prop()는 JavaScript 프로퍼티를 취급
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <body> <!-- attr(), prop()의 차이 --> <!-- .attr()은 HTML의 속성을 취급, HTML으로써 기록되어있는 속성의 내용 .prop()는 JavaScript 프로퍼티를 취급 --> <a id = "test" href="#test"> 눌러주세요</a> <script> var link = $("#test"); alert("attr : " + link.attr('href')); // prop : http://localhost:8088/Front-EndEx/JQuery0709/sample22.html#test alert("prop : " + link.prop('href')); // attr : #test </script> </body> | cs |
:: alert 출력값
//prop : http://localhost:8088/Front-EndEx/JQuery0709/sample22.html#test
//attr : #test
단, href에 절대경로로 쓰면 prop랑 attr은 똑같은 값이 나온다.
ex) href = "http://google.com/"
attr : http://google.com/
prop : http://google.com/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script> $(function(){ $("#check").change(function(){ alert("attr " + $(this).attr("checked")); alert("prop " + $(this).prop('checked')); }); }); </script> <body> <input type = "checkbox" id = "check" checked> </body> ------------------------------------------------------ 1. 체크가 된 상태라면 // attr() : checked // prop() : true 2. 체크가 풀린 상태라면 // attr() : checekd // prop() : false | cs |
attr()은 태그의 속성을 알려주는 것이고
checked : "checked" 로 설정되어 있다.
:: checked 정보
Attribute : checked
Data Type : ENUM
Enumerated Values :
- checked
그래서 체크가 '선택되어도' , 체크가 '선택되지 않아도' ---- checked로 뜬다.
하지만 prop()를 사용한다면
체크가 선택되고 안되고의 HTML로 접근하여
프로퍼티를 확인하여 true인지 false인지 값을 돌려준다
'JAVA > javascript, jQuery' 카테고리의 다른 글
| JQuery - Ajax (0) | 2018.07.10 |
|---|---|
| JQuery -animate (0) | 2018.07.10 |
| JQuery - 라디오필터 label for사용법 (0) | 2018.07.09 |
| JQuery - event안의 blur처리 (0) | 2018.07.09 |
| JQuery(contains/has/only-child) (0) | 2018.07.09 |