[jQuery][국비교육] Day 48

Ga02·2023년 3월 9일

eclipse jquery 국비교육

국비교육

목록 보기

45/82

🔍 jQuery 라이브러리

자바스크립트의 DOM API를 편하게 사용하기 위해 만들어진 라이브러리

순수 자바스크립트를 이용한 DOM API 개발코드보다 jQuery를 이용하면 더 효율적으로 개발할 수 있음
👉🏻 코드 생산성이 향상됨
HTML 노드(요소), 스타일, 속성(attribute), 이벤트 등을 다룰 수 있음
CSS 선택자(Selector) 문법을 이용하여 DOM 객체를 관리

➰ jQuery 주요 기능

DOM
Event
Ajax : 비동기 통신
Effects : 애니메이션, 모션 등의 효과
Plugin : 추가기능

➰ CDN, Content Delivery Network

자주 사용되는 컨텐츠(자료 파일, 이미지, 라이브러리 파일 등등)들을 네트워크 중간 중간에 구축해둔 보조 서버로 복사해두고 사용하는 네트워크 시스템

클라이언트의 요청을 받으면 적절한 위치의 보조(컨텐츠) 서버와 통신하도록 만들어줌
주로 파일들인 컨텐츠들을 효율적으로 전달하기 위해 미리 준비해놓는 네트워크
주로 10MB이상의 파일들을 다루었지만 요즘엔 크기에 상관없이 사용함
서버의 불필요한 네트워크 통신 트래픽(자원 업로드)을 줄여줌
jQuery CDN

➰ jQuery 버전별 특징

1.x : 다양한 브라우저에 호환되는 버전
- 최대한 많은 브라우저(버전)에 jQuery API가 똑같이 호환되도록 하는게 목적인 버전 👉🏻 크로스 브라우저를 최대화
- 브라우저들의 특징에 맞는 고유 기능, 동작을 생략한 경우가 있음
- 라이브러리 파일 자체의 소스코드의 양이 많아져 용량이 커짐
- 최신 1.x 버전 : 1.12.4
2.x : 다양한 기능 제공, 성능 향상을 위해서 IE 8 이하는 지원하지 않음
- 옛날 브라우저에 맞춘 코드를 버리고 경량화, 성능을 개선한 버전 👉🏻 새로운 기능도 추가
- 최신 2.x 버전 : 2.2.4
3.x : 2.x의 업그레이드 버전
- 최신 3.x 버전 : 3.6.4
jQuery Migrate : 1.x의 업그레이드 버전

🔍 jQuery 사용하기

➰ jQuery Core

jQuery 문법이 적용된 코드를 시작함을 알림 jQuery() $()

jQuery Core 키워드를 다른 변수에 저장하는 것도 가능 👉🏻 두개 이상 라이브러리가 섞일 때 사용하면 좋음 / 오류 예방

const J = jQuery
j() ➡ jQuery Core로 사용

➰ jQuery를 이용한 DOM API코드 이용하기

$(document).ready(function() {
	//jQuery DOM API 사용가능
})

➰ jQuery 노드 객체 찾기

$("CSS 셀렉터") $(JS DOM 객체) 👉🏻 jQuery DOM 객체로 반환

jQuery API 중에서 제일 많이 사용됨 ❗ 가장 중요
✔ jsDOM 객체에는 순수 JS DOM API만 적용할 수 있음
✔ jqueryDOM 객체에는 jQuery DOM API만 적용할 수 있음

$("p").style.color = "blue" ➡ 적용 안됨 / 틀린 문법
$("p").css()

➰ n번째 노드에 접근하기

$(객체).eq(n) : n번째 노드를 jQuery DOM 객체로 반환
$(객체).get(n) : n번째 노드를 JS DOM객체로 반환
- $(객체)[n]을 사용하면 JS DOM으로 반환

➰ 순차적으로 노드에 접근하기

반복문 역할을 수행하는 API함수

$(객체).each(function( idx, element ) { 
	//요소마다 각각 반복하면서 실행될 코드
})

idx : 객체의 인덱스가 전달됨
element : 해당 반복에 적용된 객체를 JS DOM으로 저장

**idx, element 매개변수에 해당하는 전달인자는 .each()함수가 알아서 넣어줌

➰ 두 객체가 같은지 비교하기

true / false 반환
$(객체1).is($(객체2))

➰ 하위 노드 중에서 특정 노드 찾기

하위 선택자를 사용하는 것과 비슷

$(객체).find("선택자")

➰ 자식 노드 찾기

$(객체).children() : 자식 노드 전체 반환 👉🏻 자손은 아니고 바로 밑에 있는 자식들만 반환
$(객체).children("선택자") : 선택자에 해당하는 자식노드 반환

➰ 부모 노드 찾기

바로 위에 있는 부모 하나만 찾기

$(객체).parent()
$(객체).parent("선택자")

➰ 조상 노드 찾기

위에 있는 조상 모두 찾기

$(객체).parents()
$(객체).parents("선택자")

➰ 이전 인접 형제 찾기

바로 직전에 나온 한개

$(객체).prev()
$(객체).prev("선택자")

➰ 이전 모든 형제 찾기

같은 부모 밑에 있는 모든 형제

$(객체).prevAll()
$(객체).prevAll("선택자")

➰ 다음 인접 형제 찾기

바로 직후에 나온 한개

$(객체).next()
$(객체).next("선택자")

➰ 다음 모든 형제 찾기