JavaScript(jQuery 2)

jQuery를 쓰는 이유

1. 자바스크립트보다 코드가 짧다.

// JavaScript
document.getElementsByClassName('greeting').innerHTML = '안녕';

// jQuery
$('.greeting').html('안녕');

자바스크립트와 제이쿼리 코드를 비교해 보시면 제이쿼리 코드가 훨씬 짧은걸 볼 수 있어요.

---

2. 자바스크립트로 못하는 것을 제이쿼리로 할 수 있다.

<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>

<button class="btn">버튼btn</button>
<button class="btn">버튼btn</button>

위와 같이 동일한 class의 요소를 자바스크립트로 바꿔야 할 때 어떻게 해야될까요?

※ class 이름은 중복이 가능 / id 이름은 중복 불가능

 

document.getElementsByClassName('greeting')[0].innerHTML = '안녕';
document.getElementsByClassName('greeting')[1].innerHTML = '안녕';
document.getElementsByClassName('greeting')[2].innerHTML = '안녕';

동일한 class를 바꾸기 위해서는 하나씩 지정해서 바꾸어 주어야 해요. 

하나씩 지정하기 위해 [0]과 같은 요소를 사용해서 지정해 주셔야 해요.

※ 배열은 0번 부터 시작해요. 그래서 첫번째 요소는 0번부터 지정해주시면 되요.

 

document.getElementsByClassName('greeting').innerHTML = '안녕';

위 처럼 자바스크립트를 작성한다고 모든 글이 바뀌는 것이 아니예요. 

위의 함수는 컴퓨터가 허락하지 않은 함수예요. 우리는 컴퓨터가 허락한 함수만을 사용해야 해요.

그러므로 여러개의 요소가 있을 때 자바스크립트로는 하나씩 지정해서 바꾸어야 되는 거예요.

 

jQuery로 요소를 바꾸기 위해서면 한 줄만 있으면 되요.

$('.greeting').html('안녕');

이 한 줄로 3개 요소를 모두 변경할 수 있어요. 자바스크립트에 비해 간단하고 쉽죠?

제이쿼리로도 만약 요소를 지정하고 싶으면 .eq(0)을 추가하시면 되요.

 

$('.greeting').eq(0).html='안녕';

숫자 0이 있는 자리가 자바스크립트의 [0]과 같은 의미예요.

.eq(0) = [0]으로 이해하시고 사용하시면 되요.

 

버튼 리스너도 동일한 버튼에 동일한 기능을 주고 싶다면 자바스크립트는 [0]으로 요소를 하나씩 지정해서 기능을 주어야 하지만 제이쿼리로 하면 하나의 함수로 기능을 줄 수 있어요.

// JavaScript
document.getElementsByClassName('btn')[0].addEventListener(띄워주셈~);
document.getElementsByClassName('btn')[1].addEventListener(띄워주셈~);

// jQuery
$('btn').on('click', function(){
            띄워주셈~~
        });

---

3. 쉽게 만드는 애니메이션 UI

버튼을 눌렀을 때 보이지 않게 하는 기능 또한 jQuery로 구현할 수 있어요.

그 외에도 슬라이드해서 올라가거나 내려가는 등의 애니메이션도 jQuery로 구현할 수 있어요.

슬라이드 애니메이션과 같은 기능은 JavaScript로 구현할 수 없는 애니메이션이예요.

 

<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>

<button class="btn">버튼btn</button>
<button class="btn">버튼btn</button>

 

위의 <p>태그와 <button>태그를 가지고 왔어요.

자바스크립트로 버튼 둘 중 어느 버튼을 클릭해도 모든 글씨가 사라지는 기능을 만들려면 매우 긴 코드가 나올거예요.

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

위의 코드를 버튼 갯수만큼 반복해야되요. 버튼이 많으면 엄청 많이 반복해야겠죠?

그러면 이번에는 jQuery로 코드를 짜볼께요.

$('.btn').on('click', function(){
	$('.greeting').hide();
});

이렇게 하나만 짜면 끝이예요. 처음 보는 것이 보이죠? .on() 과 .hide()일거예요.

.on(A, B) = .addEventListener(A, B) 이렇게 생각하시면 이해하시기 쉬울거예요.

( )안에 있는 A 와 B는 무엇인가 보면 A는 이벤트(click 과 같은 이벤트 종류) 이고 B는 이벤트가 발생했을 때 실행될 기능이예요.

hide() = style.display='none' 이렇게 생각하시면 되요. jQuery는 자바스크립트의 문법을 사용하지 않기 때문에 style.display='none' 대신에 jQuery문법인 hide()를 사용해야 되요.

그러면 반대로 보여주는 함수는 show()예요.

 

※ jQuery의 함수들을 모두 알려드리기에는 너무나 많고 다양하기 때문에 사용하실 때마다 구글을 통해 찾아보시는 것을 추천드려요.

그냥 hide()가 아닌 접어 올리면서 없어지는 애니메이션을 구현하고 싶으시면 slideUp()을 사용하시면 되요.

반대로 접어 내리는 애니메이션은 slideDown()이 되겠죠?

 

< 연습문제 > 

<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>
<p class="greeting">안녕하세요</p>

<button class="btn">버튼btn</button>
<button class="btn">버튼btn</button>

첫번째 버튼 클릭 시 <p>태그 글 모두 보이기 (접어 내리기)

두번째 버튼 클릭 시 <p>태그 글 모두 숨기기 (접어 올리기)

각각의 버튼에 기능을 jQuery로 추가해보세요.

< 풀이 >

$('.btn').eq(0).on('click', function(){
            $('.greeting').slideDown(); 
        });
        
$('.btn').eq(1).on('click', function(){
           $('.greeting').slideUp(); 
        });

 

Next > JavaScript(Bootstrap&UI)