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 단점
◆ 성능 저하 = 라이브러리 파일을 로드해야 하므로 초기 페이지 로딩 시간이 느려질 수 있다.
'console.log("What ? " + Cord); > 개발 공부' 카테고리의 다른 글
| RESTful API란? (0) | 2023.10.04 |
|---|---|
| [Node.js]윈도우에서 Node.js 설치 및 변경하는 방법(downgrade/upgrade) (0) | 2023.09.08 |
| 코드(Code), ID(Identifier), OID(Object IDentifier) 란? (0) | 2023.09.08 |
| EAI란 무엇인가? (0) | 2023.06.30 |
