jQuery

제이쿼리는 기본적으로 자바스크립트와 비슷하다. 하지만 자바스크립트를 좀 더 간편하게 사용할 수 있게 한다.

예를 들면,

//자바스크립트
document.getElementById('title').innerHTML = '바보';
//제이쿼리
$('#title').html('바보');

이렇게 절반정도로 짧게 줄일 수 있다.

제이쿼리에선 셀렉터로 $('무언가')를 사용한다. 클래스는 $('.클래스이름')으로 아이디는 $('#아이디이름')으로 쓴다. 그리고 메소드는 html의 무언가를 바꿀 땐 html('바꿀내용') css의 무언가를 바꿀 땐 css('속성', '값')으로 쓴다.

클래스를 추가하거나 삭제할 땐 addClass, removeClass를 사용할 수 있다. 많은 메소드가 있으므로 찾아서 사용하면 된다.

 

자바스크립트로 셀렉터를 쓸 때 같은 클래스가 3개가 있다면

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

이런 식으로, 뒤에 [숫자]를 매겨 몇번 째 greeting이라는 클래스를 찾을 건지 써야하지만(일일히 다 써야함 없으면 에러)

제이쿼리는

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

이런 식으로, 한번만 쓰면 세개를 다 바꿔준다. (제이쿼리도 $('greeting').eq(0)로 요소를 찾을 순 있음)

 

그리고,

addEventListener 대신 on을 써줄 수 있다.

 $('.btn').on('click', function(){ 버튼누르면 실행할 코드~~ } );

이런 식으로, 길이를 줄일 수 있다.

 

그리고 애니메이션을 쉽게 줄 수 있다.

$('.greeting').hide()
$('.greeting').fadeOut()
$('.greeting').slideUp()

이렇게 애니메이션을 쉽게 줄 수 있다. (반대는 각각 show(), fadeIn(), slideDown() 이다.)

 

그리고 toggle(),  fadeToggle(),  slideToggle() 을 이용해서 토글(클릭) 시 사라지게 나타나게 할 수도 있다.