jQuery 소개

JavaScript 라이브러리인 jQuery에 대해서 알아봅니다.
jQuery


jQuery

jQueryjQuery

jQuery는 빠르고 많은 기능을 지원하는 JavaScript 라이브러리입니다. jQuery는 DOM 조작을 쉽게 해줍니다. 또한 이벤트, 애니메이션, Ajax(추후에 다룸) 등을 다루는 간편한 API를 제공합니다. 또한 크로스 브라우징을 염두에 두고 개발되었습니다.

실제로 지금 이 순간도 전세계의 웹페이지들에서 제일 많이 참조되고 있는 라이브러리라지만, 최근 로컬 응용프로그램의 형태를 따라가는 웹 프로그램의 급속한 발전으로 jQuery는 웹 프론트엔드의 생태계에서 잊혀져가고 있습니다. 그럼에도 여기서 jQuery를 소개하는 이유는 지금까지 공부한 DOM을 추상화한 API를 살펴보면서 추상화가 주는 이점을 살펴보고자 함에 있습니다.

jQuery 객체 및 API

API설명
$ 또는 jQueryjQuery의 최상위 객체
$(DOM 객체)DOM 객체를 받아 jQuery 인스턴스를 생성
$(‘태그’)태그를 받아 jQuery 인스턴스를 생성
$(selector)문서에서 selector에 매치되는 Element들을 찾아 jQuery 인스턴스를 생성
$(callback)문서가 해석되고 DOM이 로드된 후 (DOMContentLoaded 이벤트 후) callback을 실행
jQuery(window);
$(window);
var elements = $([document.head, document.body]);
var div = $('<div style="font-size:2em"><h1>hello</h1>...</div>'); // document.createElement
var inputs = $("#some-id input[type=text].valid, input[type=password]"); // document.querySelectorAll

$(function(){
    // ...
});

jQuery 인스턴스 메소드

jQuery 인스턴스는 DOM 객체들을 원소로하는 배열과 비슷합니다.

API설명
.html(string)element.innerHTML=string 처럼 작동, 인자가 없으면 현재 html을 리턴
.text(string)element.textContent=string 처럼 작동, 인자가 없으면 현재 text를 리턴
.append(element)element.appendChild(element) 처럼 작동
.appendTo(parentElement)element를 parentElement에 삽입
.prepend()element.appendChild(element) 처럼 작동하나 첫째 자식으로 삽입
.prependTo(parentElement)element를 parentElement에 첫째 자식으로 삽입
.remove()element를 부모에서 제거
.remove(selector)element의 자식 중에서 Selector에 매치되는 자식을 제거
.css(property, value)element.style[property] = value 처럼 작동
.css({property1: value1, …})
.addClass(‘class1 class2’)element에 클래스 추가
.removeClass(‘class1 class2’)element에 클래스 제거
.toggleClass(‘class-x’)element에 클래스 토글
.hide()element.style.display = ‘none’ 처럼 작동
.show()element.style.display = ‘block’ 처럼 작동
.toggle()element.style.display 속성을 토글
.attr(name)element.getAttribute(name) 처럼 작동
.attr(name, value)element.setAttribute(name, value) 처럼 작동
.removeAttr(name)element.removeAttribute(name) 처럼 작동
.val()element.value나 textarea 태그의 내용, select 태그의 선택된 value들의 배열 등 적절한 값을 리턴
.val(newValue)element.value=newValue 처럼 적절하게 작동
.on(eventType, handler)element.addEventListener(eventType, handler) 처럼 동작
.one(eventType, handler)1회만 실행되는 이벤트 핸들러를 등록
.click(handler)element.addEventListener('click’, handler) 처럼 동작
.click()element.click() 처럼 동작, element에 click 이벤트를 트리거
.trigger(eventType)element에 eventType의 이벤트를 트리거
.each(callback)배열의 .forEach 메소드처럼 인스턴스에 담긴 DOM 객체들에 대해서 callback을 차례대로 실행
.data(key, value)element와 대응되는 임시 object의 key 속성에 value를 저장
.data(key)element와 대응되는 임시 object의 key 속성에 해당하는 value를 리턴
또는 element의 data-key attribute를 리턴
.data()element와 대응되는 임시 object를 리턴
또는 element의 data-* attribute를 모두 리턴
.removeData(key)element와 대응되는 임시 object의 key 속성을 삭제

jQuery 공식 API다운로드 페이지CDN 페이지
CDN(Content Delivery Network)이란 여러 서버에 동일한 자원을 올려놓고, 접속자가 물리적으로 가까운 곳에서 컨텐츠를 빠르게 불러들일 수 있도록 지원하는 네트워크입니다. 웹 서버에 라이브러리를 복제 할 필요 없이 바로 참조(<script src='...'>)를 통해 외부 스크립트를 로드하기에 적절합니다.

jQuery 예제

목차
3. 웹 프론트엔드
4. 웹 백엔드
저자

김동욱

개발 경력 약 10년, 전문 분야는 웹 및 각종 응용 소프트웨어 플랫폼입니다. Codeflow를 운영하고 있습니다.

2018년 04월 10일 업데이트

지원되지 않는 웹 브라우저거나 예기치 않은 오류가 발생했습니다.