3. [jQuery] jQuery를 사용하는 이유

오늘은 JavaScript를 두고 jQuery 를 사용하는 이유에 대해서 알아보겠습니다. 

 

1. 동일한 역할, 짧은 코드 

HTML 을 조작하는 코드가 매우 짧아짐을 확인 할 수 있습니다. 

 

내부의 HTML 을 조작하는 코드 

// JS 
document.getElementById('test').innerHTML=? 

// jQuery
$('.test').html(?)

 

이벤트 리스너 (on)

// JavaScript
document.getElementById('btn').addEventListener('click',function(){
        document.getElementsByClassName('hello').style.display='none';
})

// Jquery
$('#btn').on('click',function(){
	$('.hello').css('display','none');
})

---

 

2. jQuery 셀렉터를 사용할 때 한번에 여러 개 처리 가능

: JS 에서는 class를 선택할 때 한번에 여러개 선택이 안됩니다. 

getElementsByClassName을 할 때, 반드시 순서를 지정해야 합니다.

 

getElementsByClassName 중에서 s 는 복수를 의미합니다. class 가 해당 이름인 것을 모두 찾아냅니다.

하지만 이 중에서 순서를 지정해야 이를 사용 할 수 있습니다. 

이 말은 곧 한번에 같은 class들을 같이 다룰 수 없다는 의미가 됩니다. 

 

JS

document.getElementsByClassName('btn')[0].addEventListener('click',function(){
  document.getElementsByClassName('hello')[0].style.display='none';
})

 

하지만 jQuery에서는 이를 한번에 해결 가능합니다. 

 

jQuery

$('.btn').on('click',function(){
 	$('.hello').css('display','none');
})

 

그럼 jQuery에서는 class들을 각기 다루고 싶을때는 그렇게 하지 못할까요? 아닙니다. 

셀렉터 옆에  .eq( 원하는 순서 ) 를 입력하면 됩니다. 

---

 

3. 다양한 UI 애니메이션 구현이 가능해진다. 

: jQuery 내에서 이미 구현되어 있는 메소드를 활용하여 다양한 애니메이션을 한줄 cut 이 가능해진다. 

 

원래는 사라지게 하려면 CSS 를 활용하여 다음과 같이 작성했었는데 

$('.test').css('display','none');

jQuery를 활용하면 다음과 같이 한줄 컷이 가능해집니다. 

$('.target').hide()

show() fadeIn() slideDown(), hide(), fadeOut(), slideUp() 등 다양한 애니메이션을 활용가능해집니다.