jQuery attr(), prop(), val(), text()

.attr()

: 선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute) 값을 반환.

.prop()

: 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property) 값을 반환.

글로만 봐서는 속성과 프로퍼티에 대한 개념이 뭔 차이지...이럴 테니 이걸 그래도 이해하기 쉬운 체크박스를 예로 들어보자.

우선 input으로 간단히 체크박스 하나 만들어주고 id값도 지정해주고 check상태로 만들어준다. 

<input type="checkbox" class="btn" id='test' checked="checked" />

그 다음은 개발자도구를 켜서 콘솔창에 가서 attr()이랑 prop()을 해보쟈.
프론트단 만질때는 특히나 개발자도구 켜놓는거 추천!!
자스랑 제이쿼리 테스트해보고 디버깅해볼때 정말정말 유용한데 이것도 한번 나도 정리할겸 담에 포스팅해야겠다.

암튼 다시 돌아와서,
우리가 checked="checked"를 해주었기 때문에 test라는 id를 가진 저 박스의 속성 값은 checked 상태 그대로 나온다.
하지만 프로퍼티는 속성이 실제로 의미하는 값인 체크 상태이냐 아니냐 이런 의미라 체크상태이기 때문에 true라고 나온다.
체크를 해제하고 값을 확인해보면 어떻게 될까????

속성의 값은 변하지 않지만 프로퍼티의 값은 false로 변하는 것을 볼 수 있다.

.val() / .text()

val의 경우 form이나 input의 값을 가져오는 함수라고 생각하면 되고,
text의 경우 div나 p 태그 사이에서 text를 출력해주는 함수라고 생각하면 된다.