jQuery
JavaScript와 다른 특별한 소프트웨어가 아니라 미리 작성된 코드를 모아둔 것
HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 브라우저 호환성이 있는 JavaScript 라이브러리이다.
직접 JS 코드를 작성하여 모든 기능을 구현할 수도 있지만, 이 경우에 코드가 복잡하고, 개발환경과 다른 브라우저에서 잘 작동을 안하는 등 브라우저 간 호환성을 직접 고려해야하는 등의 문제가 있기 때문에 전문 개발자가 작성한 라이브러리를 가져와서 사용하면 편하다.
초기 목적
출시되었을 당시 좀 더 근본적인 목표는 모든 웹 브라우저에서 동일한 방법으로 자바스크립트를 구현하는 것이었다. 이것은 동시기에 나온 다른 자바스크립트 라이브러리도 마찬가지였다. jQuery가 나왔던 2000년대 중반은 웹 브라우저들간의 자바스크립트 호환성이 낮아서 개발자들이 골치를 썩던 시절이었다. 따라서 라이브러리에서 제공하는 별도의 API를 통해 자바스크립트 코드를 작성하고, 라이브러리에서 이 코드를 사용자들이 접속한 웹 브라우저에 맞게 변환하여 실행하는 여러 라이브러리가 나왔고, 그 중 가장 쉽고 간편한 API 문법을 제공했던 jQuery가 살아남은 것이다.
-나무위키-
기능
- DOM 엘리먼트 선택
- DOM 트래버설 및 수정(CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원)
- 이벤트
- CSS 조작
- 특수효과 및 애니메이션
- AJAX 및 JSON, XML 파싱
- JavaScript 플러그인을 통한 확장성
- 유틸리티 - 브라우저 종류와 버전, "each" 함수
현황
React, Vue.js, Svelte 같은 SPA용 프레임워크나 라이브러리에 밀리고 있다. 프레임워크를 통해 컴포넌트, MVC, 양방향 데이터 바인딩 등의 고수준적인 개념을 활용하는 것에 반해 밑바닥 DOM을 건드리는 jQuery는 입지가 약해졌다.
2021년 하반기 기준, JavaScript의 기능 자체가 좋아지면서 jQuery 의존도가 점차 낮아지고 있는 경향이다.
시작하기
- 임포트
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>- jQuery 사용방법: ID
CSS와 마찬가지로 jQuery를 쓸 때 특정 요소를 '가리켜야' 조작할 수 있다. CSS에서는 선택자로 class를 주로 사용했는데, jQuery에서는 고유한 하나의 요소를 가리키는 id를 주로 사용한다.
document.getElementById("element").style.display = "none"; 이 아래처럼 바뀐다.
$('#element').hide();
DOM
Document Object Model / 문서 객체 모델
오늘날 JavaScript가 가장 널리 쓰이는 분야는 클라이언트용 인터페이스이다. 이 때 주로 JavaScript는 웹 브라우저에서 제공되는 DOM API를 사용하게 된다.
JavaScript에서 HTML의 문서에 접근하는 API를 뜻하는 용어로 DOM이 등장하였다. 초창기 ECMA 5의 등장과 본격화 이전 브라우저 전쟁에서 알 수 있다시피 마이크로소프트는 자사만의 구현을 고집하였고, 이는 DOM의 구현이 각 벤더 사마다 다르다는 것을 의미했다. 위에서 말한 Internet Explorer 8 이하의 브라우저들이 addEventListener가 아닌 attachEvent 등 Microsoft 자사의 문법을 개발했다고 했는데, 이 메서드들은 모두 document object 아래에 있다. 다행히 이 문제점은 제2차 브라우저 전쟁 이후 구글이 마이크로소프트를 꺾음으로서 JavaScript 표준화로 점차 사라졌다.
그중에서도 DOM의 경우 ECMAScript 쪽에 의한 제정보다는 애플, 구글 등이 WHATWG(Web Hypertext Application Technology Working Group)를 구성하고 HTML5 표준을 정한 것에 의해 표준화 되었다.
-나무위키-
