jQuery 기본 (특징, 선택자, 흐름)

 

jQuery는 2006년 존 레식이 처음으로 공개한 자바스크립트 라이브러리이다. 

HTML 문서의 탐색과 조작, 이벤트 핸들링, 애니메이션, Ajax 등을 멀티브라우저를 지원하는 API를 통해 더욱 간편하게 사용할 수 있다.

 

- 라이브러리 : 자주 사용하는 기능과 효과를 Javascript 코드로 미리 만들어두고 재활용할 수 있게 모아둔 것.

- Ajax : JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml (비동기식 자바스크립트와 xml)의 약자이다. JavaScript를 사용한 비동기 통식, 클라이언트와 서버간에 XML 데이터를 주고받는 기술. 즉, 자바스크립트를 통해 서버에 데이터를 요청하는 것.

 

 

jQuery 특징

• 문법이 간결하다.
• CSS 스타일의 selector를 사용할 수 있어 사용하기 쉽다.
• 크로스플랫폼을 지원하여 어떤 브라우저에서도 동일하게 동작한다.
• 다른 라이브러리들과 충돌을 일으키지 않는다.

 

jQuery 로딩

jquery를 사용할 때 html 문서가 로딩 된 뒤에 실행해줘야하기 때문에 

$ (document).ready(function(){});을 반드시 붙여주고 중괄호 안에 코드들을 입력해야한다.

$(function(){}); 로 줄일 수 있다.

 

$(document).ready(function(){});

//단축
$(function(){});

만약 html에 script 태그가 body 하단에 있다면 이미 문서가 로딩 된 뒤에 실행되는 순서기 때문에 위 코드로 시작할 필요가 없다.

 

jQuery 선택자

jQuery는 HTML 문서 안의 요소를 탐색하여 조작하는 것이 기본이기 때문에 selector(셀렉터)를 사용하여 탐색하는 방법을 알아두는 것이 중요하다.

 selector(셀렉터)란 HTML 문서 안의 요소를 찾는 방법으로 태그, 아이디, 클래스 등을 탐색한다.

 

- jQuery의 selector 사용법 : $("태그명")

 

위처럼 $ 달러사인, 괄호 안에 큰따옴표 혹은 작은 따옴표를 쓰고 안에 태그명을 넣어주면 된다.

javascript를 이용해서 요소를 선택하려면 document.getElementsByTagName('태그명') 를 써줘야하는데 jQuery는 javascript를 쓰는 것보다 훨씬 문장이 간결하다.

 

- id 선택자 : $("#id명")

- class 선택자 : $(".class명")

 

jQuery 실행흐름

(1) $() 함수에서 명령 대상이 되는 html 요소를 jQyery 객체로 변환

(2) 변환한 jQuery 객체에 메소드를 호출해서 html 요소를 변경한다.