Javascript & JQuery & CSS

객체 속성에 값을 넣어줄때 JQuery의 attr과 prop 함수를 사용합니다.

jQuery 버전이 올라가면서 prop() 메서드가 추가되었습니다. 'ㅁ'

이 둘은 비슷하면서 많이 다릅니다. 용도에 맞게 사용을 해야지 잘못하면 삽질을 할 수 있습니다.

attr 함수를 이용해 특정 원소에 true, false 값을 줘서 체크 하고 있었는데, attr의 경우 리턴값이 무조건 string으로

넘어오는 것을 모르고, 현재 속성 값이 false인데 왜 조건문에서 계속 true로 빠지는지 고민 하고 있었습니다.

JQuery의 문서를 보니 attr의 리턴값이 string이라는 것을 보고나서야 문제를 알아낼 수 있었죠.

( 죄다 var, var, var, var로만 변수를 관리하니 이게 string인지 boolean인지... )

위와 같이 true, false를 이용한 체크를 할대는 prop 함수를 사용해야 합니다.

그럼, 사용방법을 알아 보도록 하겠습니다.

1. attr()

attr(attributeName)

이 함수는 객체의 속성값을 가지고 오는 객체 입니다. 리턴값은 문자열 string 입니다.

아래는 간단하게 div의 class 문자열값을 가져오는 예제 입니다.
 

		<script>
			$("#btn_area").click(function() {
				var divclassname = $("#area").attr("class")
				alert(divclassname);
			});
		</script>

		<div id="area" class="bg_red"> Div 입니다.</div>

위 소스에서 $("#area").attr("class") 는 area 객체의 class 속성을 가지고 옵니다. bg_red 가 되겠네요...

attr() 함수에 인자값이 두개가 있을 경우가 있습니다. 이런경우는 속성을 적용해 주는 명령입니다.

attr(attributeName, value)
 

	$("img").attr("src" , "/images/hat.gif");
	$("img").attr("title", "jQuery");
	$("img").attr("alt", "jQuery Logo");

        //action 지정및 전송
	$("#Frm").attr({"action":"/proc/coun2_proc.asp"}).submit();  

위와 같은 방식으로 img 객체에 src, title, alt 속성들을 적용시켜 줄 수 있습니다.

그러나 위에처럼 세번 선언할 필요 없이 아래처럼 한방에 쓸 수 있다
 

		<script>	
			$("img").attr({ 
				src: "/images/hat.gif",
				title: "jQuery",
				alt: "jQuery Logo"
			});
		</script>

이런식으로 : 과 , 를 사용해서 여러개를 한번에 줄 수 있다.
 

	$("img").attr("title", function(i) {
   	     return (i + 1) + "번째 이미지입니다";
	});

위의 코드는 모든 이미지 들을 가져와서 그들의 title 어트리뷰트의 값을 동적인 문자열로 설정하는 예입니다.

두 번째 인자로 function이 사용되고 있는 부분이 재미있는 부분입니다.

Jquery Callback Functions 을 사용한 방법입니다......

즉, 그 함수의 반환 값이 결과적으로 img의 title 어트리뷰트 값이 되는 것입니다.

function(i)의 인자인 i는 0부터 시작하는 요소의 인덱스 값이기에, 상기 결과에 의해서 각각의 이미지들은

“1번째 이미지입니다”, “2번째 이미지입니다”와 같은 title을 갖게 됩니다.

2. removeAttr()

.removeAttr() 함수는 자바스크립트의 기본 함수인 .removeAttribute() 함수를 이용한 것입니다.

객체의 속성을 제거 하는 함수 입니다.

예제를 보도록 하겠습니다.

		<button>Enable</button>
		
		<input type="text" disabled="disabled" value="can't edit this" />
		<script>
			$("button").click(function () {
			$(this).next().removeAttr("disabled")
			  .focus()
			  .val("editable now");
			});
		</script>

위의 예제를 테스트 해 보시기 바랍니다.

페이지를 읽을 때 disabled="disabled" 속성이 있어서 읽기 모드 인데요. 버튼을 클릭하면 이 속성을 삭제하게 되면 text box 가 활성화가 됩니다.
3. prop()
jquery 1.6.1 버전부터 attr과 prop으로 나뉘어져 사용하기 시작하였습니다.

prop() 함수도 attr() 함수와 비슷하게 사용이 됩니다. 그러나, 결과값이 약간 다를 수 있습니다.

예를 들어 입력양식이 적용이 안된다던지, href 값이 다르다던지..... 테스트로 알아봐야 겠습니다.

<a href="/test.html" id="anchor"> a href 테스트 링크 입니다. </a>

이 링크 객체의 href 값을 뽑아 보도록 하겠습니다.
 

		alert($("#anchor").attr("href"));
		alert($("#anchor").prop("href"));

위와 같이 attr() 와 prop() 를 이용해서 두번의 alert 창이 생기는걸 확인 할 수 있습니다. 그러나, 결과는 다릅니다.

attr() -> /test.html

prop() -> http://ankyu.entersoft.kr/test.html

리턴되는 결과같이 다릅니다.

attr() 속성은 href 텍스트 문자를 그대로 불러와서 출력해 주는것 같고. prop() 함수는 test.html 문서객체로 인식해서 실제 경로가 나오는것 같습니다.

$("input[name='chk']").prop({checked: true});

위 와 같은 형태로 속성값을 줄수 있습니다. input name='chk' 이 객체에 checked 속성을 true 로 넣어 줄 수 있습니다.