한번사는인생

jQuery는 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리입니다.

1) HTML 문서 탐색

브라우저가 웹 페이지를 렌더링할 때 웹 페이지는 DOM(문서 객체 모델)이라는 시각적 표현이 됩니다.

이 모델은 개념적으로 루트와 리프가 있는 특정 노드로 구성된 트리 자료구조로 모델링될 수 있습니다.

예를 들어, Web Step Book에서 제공하는 그림 입니다.

jQuery를 이용하면 DOM의 내용을 쉽게 탐색함으로써 검색할 노드나 요소, 값에 접근하거나 찾을 수 있습니다.

즉, 고유 ID를 가진 div 요소의 텍스트를 찾고 있다면 다음과 같이 손쉽게 할 수 있습니다.

$( 'div#my-unique-element' ).hide();

span 요소를 모두 순회하는 경우에도 다음과 같이 처리할 수 있습니다.

$( 'span' ).each(function() {
    // Process the span element here 
});

2) HTML 문서 조작

이러한 함수 가운데 어떤 함수는 페이지가 로드될 때마다 표시되지 않는 요소를 표시(show)하거나 숨길(hide) 수 있게 하는 것과 같이 간단합니다.

또 어떤 함수는 새로운 요소를 생성하고 기존 요소 끝에 덧붙이거나(append) 전체 리스트 앞에 추가(prepend)할 수 있게 해줍니다.

class 속성을 추가하기 위해 모든 span 요소를 순회하려고 한다면 다음과 같이 할 수 있습니다.

$( 'span' ).each(function() {
    $( this ).addClass( 'my-custom-class' );
});

3) 이벤트 처리

즉, 사용자가 요소를 클릭하거나, 키 입력을 하거나, 마우스를 클릭하면 브라우저는 발생한 이벤트에 해당하는 신호를 발생시킵니다.

이를 통해 사용자와 브라우저의 상호작용을 이용할 수 있습니다.

jQuery 장점 

◆ 문법의 간결성 = js의 문법을 단순화하고 축약된 형태로 제공하여 가독성을 향상시킨다.

◆ 크로스 브라우징 = 다양한 브라우저에서 일관된 동작을 제공하므로 크로스 브라우징에 대한 문제 해결

◆ DOM 조작의 편의성 = 다양한 메서드를 제공하여 개발자가 간편하게 DOM 조작을 수행 가능하다.

◆ Ajax 처리의 용이성 = 비동기 통신을 쉽게 처리할 수 있다.

◆ 풍부한 플러그인 생태계 = 다양한 플러그인이 개발되어 다양한 기능을 추가할 수 있다.

jQuery 단점 

◆ 성능 저하 = 라이브러리 파일을 로드해야 하므로 초기 페이지 로딩 시간이 느려질 수 있다.