[JS/JQuery] JQuery와 Javascript의 차이점

 

JQuery는 DOM작업을 쉽게 처리할 수 있도록 도와주는 라이브러리다.

때문에 자바스크립트 문법이나 라이브러리를 대체하는 프로그래밍 언어는 아니다. 

어떤부분에서 쉽게 처리되는지 문법적인 차이를 살펴보자.

---

 

1. 변수 선언

 // 기존 js 방식
    $jsTitle = document.getElementById('title');
   	console.log($jsTitle);

 // jquery 방식
    $title = $('#title');
    console.log($title);

자바스크립트에서는 getElement를 통해 가져온 반면 ,제이쿼리의 경우는 변수를 바로 가져올 수 있는 것을 확인할 수 있다.

 

 

HTML에 다음과 같은 id의 버튼이 있다고 가정해보자.

  <button id="button">클릭1</button>

그러면 JQuery에서 2, 3번과 같이 적용해볼 수 있다.

 

2. 이벤트 연결

//기존 Javascript 이벤트 연결
document.getElementById('button')
.addEventListener('click', function () {
 	console.log('클릭 !!');
});
     
 //JQuery 이벤트 연결   
$('#button').on('click', function () {
    console.log('JQuery 클릭 !!');
});

 

3.매서드 체인 가능

 

JQuery 다음과 같은 체인 형식의 매서드 구현이 가능하다. (id가 버튼인 곳에 click, mouseover, mouseleave 동시 적용)

      $('#button').click(function () {
        console.log('JQuery 클릭');
      }).mouseover(function () {
        console.log('JQuery 마우스 오버');
      }).mouseleave(function () {
        console.log('JQuery 마우스 떠나기');
      });

물론 JS 처럼 클래스 및 CSS 변경 등도 가능하다.

        //속성변경
        $(this).attr('class', 'color-red');
        //css 변경
        $(this).css('color', 'red');