21.01.11

[Slide]

$('#flip').hover(function(){
            $('#p1').slideDown('slow')
        },function(){
            $('#p1').slideUp('slow')
        });
        $('#flip2').click(function(){
            $('#p2').slideToggle('fast')
        });

- slideUp(speed, callback) : 요소가 아래서 위로 크기가 작아지며 사라지는 효과
- slideDown(speed, callback) : 요소가 위에서 아래로 크기가 커지며 나타나는 효과
- slideToggle(speed, callback) : slideUp() + slideDown() -> 번갈아가면서 효과
- speed : milliseconds , slow, fast (나타날 때 속도)
- callback : 효과가 끝나고 실행할 기능
 (위와 같은 경우 마우스를 오버를 계속하다가 뗐을 경우에도 계속 올라갔다 내려갔다 하니까
 이 상황을 방지하려고 on으로 이벤트를 걸어주고 callback에 off를 걸어주는 형식으로 사용가능하다)

[Animate]

$('#right').click(function(){
	//animate(*{css},*speed,easing(가속,등가속),callback)
    //한번 100까지 가면 애니메이션이 안일어남
    //$('#obj').animate({'left':'100px'},'slow','swing')
    $('#obj').animate({'left':'+=1000'},'slow','swing');//누를때마다 증가하고싶다면
});
$('#left').click(function(){
	$('#obj').animate({'left':'-=100'},'slow','swing');
});
$('#stop').click(function(){
	$('#obj').stop();
});

- $('셀렉터').animate({변경할 css}, speed, easing, callback);
- easing : linear(가속) , swing(등가속)
- $('#obj').animate({'left':'100px'},'slow','swing') : 
100px까지 가면 더이상 애니메이션이 안일어남
- {'left':'+=100px'} : += 혹은 -= 을 줘서 누를 때마다 증가나 감소하게 한다.
- $('셀렉터').stop(); : 진행중인 내용 정지

$('#step').click(function(){            $('#obj').animate({'left':'+=500'},'slow').animate({'top':'+=500'},'slow').animate({'left':'-=500'},'slow').animate({'top':'=500'},'slow');
});

- $('셀렉터').animate().animate().animate() -> 메서드(함수) 체이닝 

: 각 기능들이 연결 된 것처럼 연속적으로 일어난다.

//클릭하면 obj가 그 위치로 따라오는 애니메이션 구현
$(document).click(function(evt){
	$('#obj').animate({'left': evt.clientX,'top':evt.clientY},'slow','swing')
});

//마우스가 움직이면 follow가 따라오는 기능 구현
$(document).mousemove(function(evt){
	//마우스무브 이벤트는 연속적으로 일어나기 때문에 애니메이션을 굳이 사용할 필요 없다.
	$('#follow').css({'left': evt.clientX, 'top': evt.clientY},'fast')
});

[ 요소추가 ]

< 각각 추가되는 요소의 위치가 다르다>

var i=1;
$('#append').click(function(){ //무언가 추가할 때 가장많이사용
	i++;
    $('ol').append('<li>LIST ITEM '+i+'</li>');
});
$('#ppend').click(function(){
	i++;
    $('ol').prepend('<li>LIST ITEM '+i+'</li>');
});
$('#aft').click(function(){
    i++;
    $('ol').after('<li>LIST ITEM '+i+'</li>');
});
$('#bef').click(function(){
    i++;
    $('ol').before('<li>LIST ITEM '+i+'</li>');
});

- $('셀렉터').append('추가내용') : 선택한 요소 내 마지막 요소에 추가
- $('셀렉터').prepend('추가내용') : 선택한 요소 내 시작점에 추가
- $('셀렉터').after('추가내용') : 선택한 요소 밖의 바로 뒷 부분에 추가
- $('셀렉터').before('추가내용') : 선택한 요소 밖의 바로 앞 부분에 추가
- 추가되는 위치 잘 확인!

$('button').click(function(){
	var aVal = $('#a').val();
    var bVal = $('#b').val();
	var cVal = $('#c').val();
	var dVal = $('#d').val();
	var eVal = $('#e').val();
    $('table').append('<tr><td>'+aVal+'</td><td>'+bVal+
          '</td><td>'+cVal+'</td><td>'+dVal+'</td><td>'+eVal+'</td></tr>');
});

< table에 아래 열에 요소가 추가 되게 구현 >

$('button').click(function(){
	var $elem = $('input[type="text"]');
    var txt = "<tr>"
    for(var i=0; i<$elem.length; i++){
         txt +='<td>'+$elem.eq(i).val()+'</td>';
    }
    txt += "</tr>"
    $('table').append(txt);
});

< id를 사용하지 않고 table에 아래 열에 요소가 추가 되게 구현 >
- id를 사용하지 않고 구현하는건 요소의 순서가 바뀔 때 효율적이지 않음

[ 요소 삭제 ]

$('#empty').click(function(){
	$('.parent').empty();
});
$('#remove').click(function(){
    $('.parent').remove();
});

- $('셀렉터').empty() : 선택한 요소의 하위 요소만 삭제 ( 비우기 )
- $('셀렉터').remove() : 선택한 요소 자체를 삭제( 선택한 요소와 하위 요소 모두 삭제 )

[ 요소 면적 ]

< 구간에 따른 요소 크기 구하는 함수 >
- width() : 요소 너비
- innerWidth() : 요소 너비 + padding
- outerWidth() : 요소 너비 + padding + border
- outerWidth(true) : 요소 너비 + padding + border + margin
- height : 요소 높이
- innerHeight() : 요소 높이 + padding
- outerHeight() : 요소 높이 + padding + border
- outerHeight(true) : 요소 높이+ padding + border + margin

window.onresize = function(){ /
	console.log('window : ' + $(window).width()); //창
	console.log('doc : ' + $(document).width()); //html
}

- onresize : 창의 크기가 바뀔경우 이벤트 발생