[jQuery] attr()로 태그 속성 다룰 수 있습니다.

씨잼 "킁" 듣다가 그만...!!

jQuery를 공부하면서 메서드를 다시 하나씩 공부하기로 시작했습니다.  codeit을 큰맘먹고 결제하면서 귀로 따고, 눈으로 보고, 예제 다시 만들고, 다시 처음으로 돌아가면서 하나씩 열심히 하기로 했습니다. 

<img src="1번이미지" alt="" id="boom">

<script>
	  $('#boom').on('click', function() {
    $('#boom').attr('src', '2번이미지');  
</script>

이번에 공부한 내용은 attr() 메서드입니다.

.attr() : html 태그 속성(attribute)을 다루게 됩니다

 

attr은 기존 걸려있던 값을 다루면서 변경할 때 사용하는 메서드입니다. 현재 태그에서는 #boom이라는 임의의 ID를 작성하였는데, img 태그에 1번이미지 주소를 넣었습니다.

 

#boom img영역을 태그하면 attr()를 클릭하면 src 값이 2번이미지 주소로 변하게 됩니다.

 

지금 위의 값으로는 1회성으로 1번이미지 ▶ 2번이미지 변경하게 됩니다.

 

 

 attr()를 이용하여 오마이걸 유아를 누르게 되면, 오마이걸 아린이로 변경되는 예제를 만들어봤습니다.

 

제 경우에는 attr은 youtube 모달 팝업을 이용하는데도 잘 썼습니다^^