3장 그것에 무언가를 하기 (기본 그 두번째)

이번 장은 메소드와 몇몇 변화시키는 것들을 나열해볼려고 한다.
2장에서는 무언가를 가져오기로 원본을 가져오는 것을 알았다.
3장은 가져온 원본은 다르게 변화시키는 법이다.
내용이 기니 여기에 다 쓸 순 없고, 쓰는 법과 명령어 정도만 나열하겠다.
소스는 http://www.jpub.kr/ 에서 다운 받으면 된다.
소스를 다운받아 직접 실행시켜보고 바꿔보고 하면서 익히는 것이 더 빠를 것이다.

그 전에 메소드가 무엇인지 알아보자.
[그것에 무언가를 하기]는 [제이쿼리 객체가 갖고 있는 메소드를 실행하기]로 말할수 있다.
간단히 메소드란 준비되어 있는 기능을 뜻한다.

1. 스타일 변경하기 

css - 스타일시트나 스타일 속성에서 스타일 변경을 실행하는 매소드

jQueryObject.css('프로퍼티명', '값');

show/hide - 요소의 표시/비표시를 변경하기 위한 메소드

jQueryObject.show();
jQueryObject.hide();

width/height - 요소의 폭/높이를 지정하는 메소드

jQueryObject.width(값);
jQueryObject.height(값);

2. 애니메이션 시키기

fadein/fadeout - 점점 보이거나 점점 흐려지며 안보이는 기능

jQueryObject.fadeIn();
jQueryObject.fadeOut();

slideDown/slideUp -슬라이드 애니메이션이 발생하는 메소드

jQueryObject.slideDown();
jQueryObject.slideUp();

fadein/fadeout/slideDown/slideUp 의 스피드 지정하기(4가지 방법 동일)

jQueryObject.fadeIn(1000); //1000 밀리초(공백으로 두면 기본 400 밀리초)
jQueryObject.fadeIn('slow');
jQueryObject.fadeIn('fast');

animate - 커스텀 애니메이션(사용자 지정 에니메이션)

jQueryObject.animate({
       프로퍼티명 :  값;
});

animate 스피드 지정

jQueryObject.animate({
       top : 200,
       left : 400
}, 1000);  //콤마(,)로 구분하고 1000은 밀리초를 의미한다. ({}) 형식에 유의하자

애니메이션 종료 시에 자바 스크립트 실행시키기

jQueryObject.animate({
       top : 200,
       left : 400
}, 1000, function() {
      alert('애니메이션 완료');
}); //위 소스에서 빨간 부분이 추가 되었다. ({값,값}, 속도, 함수(){내용;}); 이런 형식

3. 내용이나 속성 변경하기

text/html - 요소의 내용을 통째로 바꿔 쓰는 메소드

jQueryObject.text('바꿔 쓴 후의 텍스트');
jQueryObject.html('바꿔 쓴 후의 html');

empty - 요소의 내용물을 비워 버리는 메소드.(내용을 통째로 지울 때 씀)

jQueryObject.empty();

attr - 요소의 속성값을 변경하는 메소드

jQueryObject.attr('속성명', 변경 후의 값);

예) <img scr = "윤아.jpg" alt = "" id = "This" />
     
      $(function(){
            $('#This').attr('src', '서현.jpg');
      });

val - 입력된 값을 변경하는 메소드

jQueryObject.val('변경후의 값');

addClass/removeClass - class 속성값을 조작하기 위한 메소드

jQueryObject.addClass('클래스명');
jQueryObject.removeClass('클래스명');

append/appendTo  - 요소를 움직이기 위한 메소드

append 메소드를 사용하는데는 이동할 요소와 이동할 곳의 요소의 두가지 객체가 필요하다.
A 안에 B를 이동시키는데 시작점과 도착점이 필요한건 당연 ㅡ.ㅡ

jQueryObjectA.append('jQueryObjectB'); //A요소 안에 B요소를 이동

jQueryObjectB.appendTo('jQueryObjectA'); //B요소를 A요소 안에 이동

위는 어차피 똑같은 기능을 하는데 어느걸 안으로 넣을래. 차이다 헷깔리면 1개만 쓰자



원래 뒤에 이벤트가 있는데 너무 길어져서 나눠서 쓰겠다.
이번 장은 끝~