jQuery란 무엇일까?

jQuery

대부분 웹사이트가 사용하고 있는 라이브러리.

라이브러리일 뿐, 자바스크립트와 별개의 언어가 아니다! ('제이쿼리를 자바스크립트로 바꿔주세요'와 같은 말은 잘못된 것임).

 

특징

단점

1. 무겁다.
   • 제이쿼리 없이 순수 자바스크립트로 작성한 코드보다 속도가 10~100배 정도 더 느리다.
2. 모듈화가 되어 있지 않다. 따라서 React, Angular를 사용하는 경우 제이쿼리를 사용하기 어렵다.

장점

1. 코드가 간결해지고 가독성이 높아진다.
   • document.getElementById('id'); 보다 $('#id') 라고 작성하는 게 훨씬 좋으니까!
2. IE와 기타 브라우저에 대한 지원이 좋다. 따라서 하나의 코드로 여러 브라우저에서 다 호환이 된다.
3. 플러그인을 지원하여 원하는 기능을 추가할 수도 있다.
   • 애니메이션, AJAX도 간단하게 할 수 있다.

 

이처럼 jQuery는 단점보다 장점이 훨씬 많으므로, 인기 있는 라이브러리인 것이다!

 

다운로드

크게 세 가지 방법이 있다.

1. jQuery 홈페이지에서 다운로드 받아 홈페이지 안에 넣기
2. CDN 사용하기
3. bower, npm같은 패키지 매니저 사용하기

이 중에서 CDN 사용하는 방법이 가장 간단하고 속도도 빠르다.

 

CDN 사용하는 방법은 정말 간단하다. 그냥 html에서 head 혹은 body 태그 내에 아래 코드를 추가해주기만 하면 된다.

<script src="//code.jquery.com/jquery-latest.min.js"></script>

코드를 입력하면 가장 최신 버전의 jQuery를 다운받아 사용할 수 있게 된다.

 

jQuery Selector(제이쿼리 선택자)

제이쿼리에서 가장 편리한 기능.

CSS 선택자를 그대로 사용할 수 있어서 매우 간단하게 작성할 수 있다.

 

(+) $( ) 형태에 대해서

: $라는 함수의 괄호 안에 인자를 제공하는 것이다. 이 함수가 실행된 후에 내부적인 과정을 거쳐 결과를 반환하는 것임!

 

아이디(#)

$('#id');

jQuery를 사용하기 이전의 형태가 document.getElementById('id'); 인 것을 생각하면 엄청 간단해졌다!

클래스(.)

$('.class');

- before: document.getElementsByClassName('class');

태그

$('tag');

- before: document.getElementsByTagName('p');

속성([])

태그의 속성을 검색할 수도 있다.

$('[value]');	// value라는 속성을 가진 태그 검색하기
$('[value="name"]');	//속성 값까지 선택하기

- before: document.querySelectorAll('[value]');

            document.querySelectorAll('[value="name"]);

 

 

 

 

 

 

---

참고 자료

(jQuery) jQuery(제이쿼리)