jQuery 기본 구문

jQuery에서는 선택자를 통해 선택한 요소들을 jQuery 객체로 반환합니다.

JavaScript
복사

•

기본 형식: $(선택자)

•

예시: $('#id'), $('.class'), $('div')

•

jQuery 객체는 배열과 유사한 형태로 요소들을 저장

jQuery 객체에 대해 수행할 수 있는 다양한 메소드들이 제공됩니다.

분류	주요 메소드
이벤트 처리	click(), hover(), on()
효과	hide(), show(), toggle(), fadeIn()
DOM 조작	append(), remove(), html(), text()
속성 관련	attr(), prop(), addClass(), removeClass()
탐색	find(), parent(), children(), siblings()

메소드	설명	예시
click()	요소를 클릭했을 때 실행될 함수를 정의	$('#btn').click(function() { });
hover()	마우스를 올렸을 때와 벗어났을 때 실행될 함수를 각각 정의	$('#element').hover(function() { /* 마우스 진입 /}, function() { / 마우스 이탈 */});
on()	하나 이상의 이벤트에 대한 핸들러를 연결, 동적으로 생성된 요소에도 적용 가능	$('#div').on('click mouseover', function() { /* 이벤트 처리 */});

메소드	설명	예시
attr()	HTML 속성을 가져오거나 설정하는 메소드	$('#img').attr('src', 'image.jpg');
prop()	JavaScript 프로퍼티를 가져오거나 설정하는 메소드	$('#checkbox').prop('checked', true);
addClass()	선택한 요소에 하나 이상의 클래스를 추가하는 메소드	$('#div').addClass('highlight');
removeClass()	선택한 요소에서 하나 이상의 클래스를 제거하는 메소드	$('#div').removeClass('highlight');