jQuery

jQuery

자바스크립트 라이브러리 — 레거시 세대 (현재는 React, Vue, Angular가 주류)

설치 방법

1. 로컬 설치 — *.js 직접 다운로드 후

2. CDN — 외부 서버 자원 참조

<script src="https://code.jquery.com/jquery-4.0.0.js"></script>

$ = jQuery 의 축약 별칭 - $('#btn1') == jQuery('#btn1')

jQuery() 함수 특징

1. CSS 선택자로 태그 검색

2. JS 객체 → jQuery 객체로 변환

3. 동적 태그 생성

4. 검색 결과는 항상 배열(컬렉션) — 자동으로 일괄 처리

BOM / DOM / jQuery 비교

방식	태그 검색	CSS 조작
BOM	document.all['txt1']	obj.style['color']
DOM	document.getElementById('txt1')	obj.style['color']
jQuery	$('#txt1')	obj.css('color', 'blue')

객체 변환

const bom = document.all['btn1'];

// BOM → jQuery
jQuery(bom).css('color', 'blue');

// jQuery → BOM/DOM
$('#btn1')[0].style.color = 'gold';

이벤트 등록/제거

방식	등록	제거
BOM	btn.onclick = fn	btn.onclick = null
DOM	addEventListener('click', fn)	removeEventListener('click', fn)
jQuery 전용	$('#btn').click(fn)	$('#btn').off('click')
jQuery 범용	$('#btn').on('click', fn)	$('#btn').off('click')

// 집합 이벤트 — 자동 일괄 처리
$('.btns').click(() => {
    alert(event.target.value);
});

// 여러 이벤트 동시 등록
$('#box1').on({
    mouseover: () => { $('#box1').css('background-color', 'tomato'); },
    mouseout:  () => { $('#box1').css('background-color', 'gold'); }
});

CSS 조작

// 읽기
$('#box1').css('width');             // 모든 CSS 읽기 가능 (getComputedStyle 필요 없음)

// 쓰기 — 단일
$('#box1').css('color', 'blue');

// 쓰기 — 다중 (객체 전달)
$('#box1').css({
    width: '400px',
    color: 'blue',
    'font-size': '5rem'
});

// classList
$('#box1').addClass('one');
$('#box1').removeClass('two');
$('#box1').toggleClass('three');

###Effect (애니메이션)

메서드	조작 대상	toggle
hide(ms) / show(ms)	display	toggle(ms)
fadeOut(ms) / fadeIn(ms)	opacity	fadeToggle(ms)
slideUp(ms) / slideDown(ms)	높이	slideToggle(ms)
animate({}, ms)	사용자 정의	—

// animate — 상대값 지정
$('#box1').animate({ width: '+=50px', height: '+=50px' }, 1000);

// 메서드 체이닝 — 순차 실행 (jQuery 함수는 항상 원본 객체 반환)
$('#box1')
    .animate({ width: '+=100' }, 2000)
    .animate({ height: '+=100' }, 2000)
    .animate({ fontSize: '+=2rem' }, 2000);

// animate 콜백 — 애니메이션 완료 후 실행
$('#box1').animate({ width: '+=100' }, 2000, function() {
    $('#box1').css('background-color', 'green');
});

콜백 중첩(콜백 지옥) 대신 메서드 체이닝 사용 권장

콘텐츠 / 속성 조작

콘텐츠

jQuery	대응 JS	설명
text()	innerText / textContent	순수 문자열
html()	innerHTML	태그 포함
val()	value	input 값

속성

jQuery	대응 JS	설명
attr('prop')	getAttribute()	HTML 속성 읽기
attr('prop', value)	setAttribute()	HTML 속성 쓰기
prop('prop')	obj.prop	JS 프로퍼티 읽기
prop('prop', value)	obj.prop = value	JS 프로퍼티 쓰기

태그 추가/삭제

$('#box1').append('<img src="catty01.png">');   // 마지막에 추가
$('#box1').prepend('<img src="catty01.png">');  // 처음에 추가
$('#box1').remove();                             // 태그 삭제

Axis (축 탐색)

방향	jQuery	DOM
자식 전체	children()	children
특정 자식	children('.one')	—
자손 검색	find('.one') ⭐	querySelectorAll
첫/마지막 자식	first() / last()	firstElementChild
n번째 자식	eq(n)	children[n]
부모	parent()	parentElement
모든 조상	parents()	—
조상 (조건까지)	parentsUntil('body')	—
이전 형제	prev()	previousElementSibling
다음 형제	next()	nextElementSibling
모든 이전 형제	prevAll()	—
모든 형제	siblings()	—

$('#me').find('.one').addClass('check');         // 자손 중 .one 전체
$('#me').children().eq(1).addClass('check');     // 두 번째 자식
$('#me').parentsUntil('body').addClass('check'); // body 직전까지 조상
$('#me').siblings().addClass('check');           // 모든 형제