📚 JQuery

---

📕 jQuery 소개

등장배경

Ajax와 DOM의 혁신, 웹 페이지에서 웹 어플리케이션으로의 전환으로 등장하게 되었다.

기본 문법

$("h1").css("color","red").text("hello, world")

• $ : jQuery에서 제공하는 전역함수로, DOM을 jQuery의 Object 라이브러리로 만들어준다.
• (selector) : CSS 선택자 규칙을 이용하여 HTML내 원하는 DOM 요소 선택 가능하다.
• action() : 선택된 요소에 원하는 작업 수행, 기존 DOM API 대비 직관적 + 연속적으로 사용 가능하다.

핵심 개념

• 선택자 : CSS 선택자를 사용하여 원하는 요소 선택하는 기능을 한다.
• 메서드와 메서드 체인 : DOM 조작을 간결하고 직관적인 방식으로 사용 가능하다.
• 이벤트 위임 : 존재하지 않는 요소들에도 이벤트 적용이 가능하다.
• 플러그인 : 기본 기능을 보완하거나 새로운 기능을 추가하여 확장 가능하다.
• Ajax : 서버에서 비동기로 데이터 가져오는 기능에 간결한 API를 제공하여 동적 웹 개발에 용이하다.

---

📗 jQuery 핵심 개념

선택자 (Selector)

• 웹 페이지의 HTML 요소를 쉽고 빠르게 선택할 수 있게 해주는 기능을 한다.
• CSS 선택자와 유사한 문법을 사용한다.
• element 나 document와 같은 node등에 직접 접근 가능하다.

$("p.cls") // 모든 <p> 요소 중 class 가 'cls'인 모든 요소 선택
$(document) // document 노드에 jQuery 방식으로 접근

메서드 (Method)와 체이닝(Chaining)

• 메서드 : HTML 요소를 선택하고 조작하는 기능을 제공한다. ( ex. .text(), .html(), .css() )
• 체이닝 : 여러 jQuery 명령어를 하나의 문장으로 연결하여 간결성과 가독성 향상시킨다.

$("p").css("color","blue").html("Hello, jQuery!").fadeIn("slow")

이벤트 위임 (Event Delegation)

• 부모 요소에 이벤트 핸들러를 할당하여, 자식요소에서 발생하는 이벤트를 관리하는 방식이다.
• 여러 요소에 개별적으로 이벤트 리스너를 추가하는 것보다 효율적이다.
• on() 메서드 : 선택한 요소에 이벤트 핸들러를 등록하고, 선택자를 인자로 전달하여 특정자식 요소에 대한 이벤트만 처리하도록 할 수 있다.

$("#todo-list").on("click",".todo input[type=checkbox]", event => {
	alert("할 일 완료 토글");
} 

플러그인 (Plug-in)

• 기존 jQuery 라이브러리에 외부에서 제작한 새로운 기능이나 UI 요소를 추가하는 작은 도구들을 말한다.
• 갤러리 플러그인을 사용한다면 캐러셀과 좌우 클릭 등 다른 사람들이 만든 기능을 사용 가능하다.
• 모듈성과 확장성의 원칙 강화함으로 추후 만들어지는 프레임워크와 라이브러리에 영감을 주었다.

Ajax, Animation, Utility

• Ajax : 서버와의 비동기 통신을 위한 기능 제공, 페이지를 새로고침하지 않고도 데이터 통신이 가능하다.
• 애니메이션 및 효과 : 다양한 내장 애니메이션을 제공한다. (ex. show, hide, toggle, fadeIn, fadeout)
• 유틸리티 함수 : 다양한 유틸리티 함수를 제공한다. (ex. 배열처리, 객체복사, 타입검사)

---

📘 정리

jQuery가 현대 웹 개발에 미친 영향력

1. Selector 개념 : 추후 웹 표준의 document.querySelectorAll 메서드 도입에 영향을 주었다.
2. DOM 조작 : addClass, removeClass 등은 추후 classList 등의 웹 표준 기능 발전에 기여했다.
3. DOM 탐색 : closest(), matches()와 같은 선택자를 이용한 DOM 탐색 기능이 웹 표준에 추가되었다.
4. 배열 및 객체 유틸리티 : $.each, @$.trim, $.extends 등은 forEach(), assign 등의 표준 기능이 되었다.
5. $(selector).animate() : CSS3의 animation 및 JS의 Element.animate() 등 표준 기능에 영향을 주었다.
6. $.ajax() : axios와 같은 ajax 전용 라이브러리나 fetch API 같은 표준 API 발전에 기여하였다.
7. 플러그인 시스템 : 모듈화와 재사용 그리고 프로그래밍 생태계 개념에 큰 영향을 주었다.

---