JAVASCRIPT#41 - jQuery 사진경로 변경, select 태그와 change 이벤트!

I'm nothing without you AJ.

JAVASCRIPT#41 - HTML FORM에 대하여 폼 이벤트

1. html 폼 form 태그에 대하여

- form 태그는 input 태그의 모음, 집합체로 보면 된다.

form 태그 형태 예제

<form>

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

<input type="submit"></input>

</form>

* submit 이벤트

- form 태그안에 존재하는 input 태그의 submit 타입 버튼을 통해 호출됨.

- 입력된 데이터 값은 인풋태그에 할당된 name값이나 id값 으로 셀렉트후 val()로 접근가능.

- form자체가 값을 집합시키거나 가지지는 못하는듯.

2. select 이벤트 vs change 이벤트

- select 이벤트는 인풋태그내의 내용이 선택(클릭,드래그)되면 발동. (셀렉트 태그와 관련없음 인풋관련 이벤트!)

- change 이벤트는 셀렉트 태그에서 옵션이 선택되면 발동.

- 해깔리지 않게 주의.

3. select 태그?

<select id="ponies">
            <option>Applejack</option>
            <option>Rainbow Dash</option>
            <option>Twilight Sparkle</option>
            <option>Rarity</option>
            <option>Pinkie Pie</option>
            <option>Fluttershy</option>

</select>

선택할수있는 옵션줌.

change이벤트를 통해서 select 값이 선택&변경되면 발동시킬 수 있고

현재 선택된 옵션값은 val() 함수로 알아낼 수 있음.

3. action 아트리뷰트?

- form 태그의 아트리뷰트로 쓰여 form 안에서 받은 데이터(form-data)를 어디로 보낼지 결정하는 값.

- 사용형식 : <form action="URL">

4. event.preventDefault();

- html에 할당된 기본 액션및 스크립트, 이벤트 발생거부, 막는 명령어.

5. jQuery로 css 속성바꾸는 방법

- .css({css내용;});

6. jQuery로 사진 바꾸기 이미지 경로 src 바꾸는 방법.

- $("셀렉터").attr("src", "새로운경로");

7. fadeOut fadeIn 함수와 사용하기

- fadeOut("지연시간", 완료함수). 애니메이션이 완료되면 완료함수를 호출하게함.

jQuery로 사진 경로변경및 select 태그와 change 이벤트 :: 내사랑 나의 작은 포니들 사진보기 예제 ♥

포니포니.zip

비압축 고화질 포니 사진때문에 용량이 오메가 ;ㅅ;