[jQuery 11장] 태그속성값 가져오기 attr / prop

태그 속성값이란?

<input type="text" id="id1" name="name1"  />

각 밑줄 친것처럼 각 태그들에 정의되어있는 설정값들이다.

해당 값들의 속성값을 알아오기 위해서는 attr함수를 사용하면 되는데

사용법은

$("태그").attr("옵션key") 와같은 형식으로 지정해주면 된다.

간단한 스크립트로 예를 들어보자

상단에 input태그의 id값을 가져오고 싶을경우

$("input").attr("id")

상단에 input태그의 name값을 가져오고 싶을경우 

$("#id1").attr("name")

등 위와같이 attr함수를 이용하면 해당 속성에대한 값을 추출할수 있을 것이다.

그리고 만약 속성값을 변경하고 싶다면 

$("#").attr("name","새로운네임")

형식으로 지정하면 해당 속성값 변경이 일어난다.

jquery 1.6.x 버전부터 prop라는놈이 추가로 된걸로 알고 있다.

이놈은 뭐할때 유용하냐면 true / false체크 같은것을 사용할때 아주 유용하다

예를들어 체크박스에서 prop를 요즘 자주쓰는데, 

$("#").attr("checked",true);

$("#").attr("checked",false);

또는

$("#").attr("checked","checked");

$("#").attr("checked","");

prop가 지원하기 전에 버전에서는 해당 스크립트로 체크박스를 제어할수 있었는데

prop가 나온후로는

$("#").prop("checked",true);

$("#").prop("checked",false);

로 변경을 해주어야 체크박스 핸들링이 가능하다.

만약 jquery버전업을 했거나 attr함수로 원하는 제어가 안되실 경우에는 prop함수를 사용해보시길 바랍니다.

정확히 어떨때는 prop를 써야한다고 정의를 해드리지 못하겠습니다.

감으로 둘중 하나를 골라서 사용하셔야 한다는...

아마 대부분 attr로 해결이 가능하지만 해결이 불가능할경우!! prop속성을 한번 사용해보시길....

스크립트 비교 소스로 마무리...

스크립트 부분

$(function(){
		//체크가 안되어있을때
		alert($("#check1").attr("checked")+","+$("#check1").prop("checked"));
		//-> 결과 undefined , false
		//체크가 되있을때
		alert($("#check2").attr("checked")+","+$("#check2").prop("checked"));
		//-> 결과 checked , true
	})

샘플 html 태그

<input type="checkbox" id="check1" />
<input type="checkbox" id="check2" checked="checked" />

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!