[jQuery] 제이쿼리 attr(), prop() 비교 및 차이점을 알아보자

[jQuery] 제이쿼리 attr(), prop() 차이점을 알아보자

 

JAVA 1.6버전을 기준으로 차이가 있다. 

1.6버전 이하에는 attr()에서 property와 attribute가 구분되지않고 사용되었으나 
1.6버전 이후부터는 attr()는 속성(attribute),  prop()는 프로퍼티(property)를 나누어 사용하게 되었다. 

프로퍼티와 속성은 내용이 다른데 같이 사용하고 있었다. 
개발자가 사용하는데 혼란이 있어 아마도 나누어 버린것같다. 

attr() HTML의 속성(attribute)를 취급 
prop() HTML의 프로퍼티(property)를 취급 

attr는 속성값이나 정보를 조회하는곳에 사용할때 (style, src등등) 사용하고 
--> html attribute 값이 모두 String으로 넘어온다. 

prop()은 프로퍼티를 사용할떄 (활성화,체크,선택여부)등 제어하는 업무에 사용한다. 
-->javascript 프로퍼티값이 넘어오기 떄문에 date, function, boolean 형식으로도 가져올수 있다.

 

이제조금 이해가 되셨나요?
실제 코드로 찍어보아요!

 

1. a태그에 href를 #none값을 셋팅하고 attr()과 prop()를 확인해보자.

<div>
<a href="#none" id="link">링크</a>
<button type="button" onClick="diff('attr')">attr</button>
<button type="button" onClick="diff('prop')">attr</button>
</div>

<script type="text/javascript">
	function diff(type) {
                    if ("attr" === type) {
                        console.log($("#link").attr('href'));
                        // 결과 :  #none
                    } else if ("attr" === type) {
                        console.log($("#link").prop('href'));
                        // 결과 : http://www.localhost:8080/front/intro/join#none"
                    }
                }	
}
</script>

 

$("#link").attr('href') 의 값은 href의 #none 스트링값이 넘어왔다.

$("#link").prop('href') 의 값은 href의 프로퍼티 값인  http://www.localhost:8080/front/intro/join#none" 이 넘어왔다.

 

 

2. 이번엔 체크박스로 테스트해봅시다.

<div>
<input type="checkbox" id="test02" checked="checked">
<button type="button" onClick="diff('attr')">attr</button>
<button type="button" onClick="diff('prop')">attr</button>
</div>

<script type="text/javascript">
	function diff(type) {
                    if ("attr" === type) {
                        console.log($("#test02").attr('checked'));
                        // 결과 :  "checked"
                    } else if ("attr" === type) {
                        console.log($("#test02").prop('checked'));
                        // 결과 : true
                    }
                }	
}
</script>

 

$("#test02").attr('checked')의 값은 checked 스트링이 넘어왔다.

$("#test02").prop('checked')의 값은 true가 넘어왔다. checkbox에 체크가 안되어있으면 false가 넘어온다.

 

사용할때 용도에 맞게 사용하시면됩니다!