Jquery[제이쿼리] 이미지[img] 변경하기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery]로 이미지[img]를 변경해보겠습니다.

위화면처럼 셋팅해주세요~

jpg파일들은 'Js_4_img'라는 폴더를 만들어 따로 관리하였습니다.
자 이제 실행을 해보겠습니다.

3개의 이미지들이 이렇게 크게 나왔습니다.
이제 이미지를 수정해보도록하겠습니다.

우선 수정하기에 앞서 alert(); 함수를 이용하여 첫번쨰 이미지의 경로를 확인해보도록 하겠습니다.
위에처럼 코딩을 하시고 실행하면!

경고창이 뜨면서 첫번째 이미지의 경로가 나온답니다.

이제 모든이미지의 경로를 'Js_4_img/3.jpg' 로 바꾸면서 
width값을 300으로 바꾸도록 하겠습니다.
$('img'). <=== 혹시나 이부분을 이해못하시는 분들을위해 다시 설명해드리면
img라는 태그 대상으로 어떤일을 하겠다라고 생각하시면됩니다.
아래에보시면 class="img1"이라는 부분이있습니다. 
img1이라는 class를 바꾸고 싶으면
$('.img1'). <==이렇게 대상을 선택하시면 됩니다 쉽죠? 

자 실행 화면입니다. 검정,파랑,노랑 순서로 되어있던 이미지들이 3번째이미지로 다 교체되면서가로 길이가 300으로 줄어든 모습입니다.

그럼이제 한번에 가로 세로 길이를 변경해보겠습니다.

변경된 모습입니다.
=====================
$('img').attr('width',200);
$('img').attr('height',400);
=====================
한번에 변경하는게 어렵다고 하시는 분들은 이렇게 따로 하셔도 된답니당.

이번에는 function() 이라는걸 배워보겠습니다.
간단하게 설명해 드리자면 for()문처럼 반복문 정도라고 생각하시면 이해가 빠를꺼라고 생각합니다.
==================
width:function(i){
     return (i+1)*100;
}, 

==================
위 3줄이 width값을 변경하기위한 코딩인데요
i라는 값은img태그의 숫자만큼 반복하게됩니다.
저번처럼 배열형태이기때문에 0 1 2 이렇게 3번 돌게됩니다.
하지만 0*100을하게되면 0이기 떄문에 (i+1)이문구가 사용하게 된것입니다.
return (i+1)*100; <== 자 이문구를 계산하면 (0+1) * 100 = 100
1번쨰 이미지 값의 width:100;이라는 값이 들어가네요
2번쨰 이미지 값의 width:200;이라는 값이 들어가네요
3번쨰 이미지 값의 width:300;이라는 값이 들어가네요
자 이제 확인을 해보겠습니다.

짠 ~ 이렇게 이미지들의 크기가 변경된 모습을 확인할수있습니다.
오늘은 제이쿼리[jquery]로 이미지[img]를 변경해보았습니다.
그럼 다음에 또만나요~