[jQuery기초] 요소조작_이벤트_animate_show&hide_css

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

animate

css 속성의 애니메이션 효과를 만들 수 있다.

// CSS
#box { width:300px; height:300px; background:red; }

// HTML
<div id="box"></div>

// jQuery
$('#box').animate({
  opacity : 0.25,
  width : '100px',
  height : '100px'
  
}, 5000, function(){ // 5000은 5초를 의미
	// 종료 후 실행될 코드 작성
});

 

show & hide

선택자를 즉시 표시하거나 감춘다.
css 메서드를 통해 display를 조작하는 것과 유사하지만 show & hide 메서드는 사용자가 입력했던 display의 처음 값으로 복원해준다.
css에 display:none !important 를 입력한 경우 show 메서드 적용이 안된다.

// CSS
#box{ display:inline-block width:100px; height:100px; background:red; }

// HTML
<div id="box"></div>
<button class="show">Show</button>
<button class="hide">Hide</button>

// jQuery
$('.show').on('click', function(){
	$('#box').show();
}); // hide 후 show할 경우 display:inline-block이 유지된다.

$('.hide').on('click', function(){
	$('#box').hide();
});

 

css

스타일 요소에 접근하여 값을 가져오거나 설정할 수 있다.

// CSS
#box{ width:100px; height:100px; background-color:red; }

// HTML
<div id="box"></div>

// CSS
#box{ width:100px; height:100px; background-color:red; }

// HTML
<div id="box"></div>

// jQuery
$('#box').css('background-color'); // 색상 값 반환
$('#box').css('backgroundColor'); // 색상 값 반환
$('#box').css('width', '500px'); // width 설정
$('#box').css({ 'width' : '500px', 'height' : '500px'}) // 배열로 속성 여러개 설정