JS(10). jQuery(2).문법

1.  jQuery의 기본 구조

• $: jQuery 객체를 시작하는 키워드.
• 선택자: DOM 요소를 선택하기 위한 CSS 선택자.
• 동작: 선택한 요소에서 수행할 작업(메서드).

$(선택자).동작(매개변수);

예제:

$("p").css("color", "red"); // 모든 <p> 태그의 텍스트 색상을 빨간색으로 변경

 

2. jQuery 선택자

jQuery는 CSS 선택자를 기반으로 DOM 요소를 선택합니다.

태그 선택자	$("tag")	특정 태그를 선택	$("p") (모든 <p> 태그 선택)
ID 선택자	$("#id")	특정 ID를 가진 요소를 선택	$("#myId")
클래스 선택자	$(".class")	특정 클래스를 가진 요소를 선택	$(".myClass")
전체 선택자	$("*")	모든 요소를 선택	$("*")
복합 선택자	$("tag.class")	특정 태그와 클래스를 모두 만족	$("p.highlight")
속성 선택자	$("[attr=value]")	특정 속성과 값을 가진 요소를 선택	$("[type='text']") = $(":text")

 

3. jQuery에서 지원하는 주요 입력 타입 선택자들

:text	<input type="text"> 선택	$(":text")
:password	<input type="password"> 선택	$(":password")
:checkbox	<input type="checkbox"> 선택	$(":checkbox")
:radio	<input type="radio"> 선택	$(":radio")
:button	<input type="button"> 선택	$(":button")
:submit	<input type="submit"> 선택	$(":submit")
:file	<input type="file"> 선택	$(":file")
:reset	<input type="reset"> 선택	$(":reset")

 

 

4. jQuery 주요 메서드

jQuery에는 DOM 조작, 이벤트 처리, 애니메이션 등을 위한 다양한 메서드가 있습니다.

1) DOM 조작

.html()	요소의 HTML 콘텐츠를 가져오거나 설정	$("#box").html("<b>New Content</b>");
.text()	요소의 텍스트를 가져오거나 설정	$("#box").text("New Text");
.val()	폼 요소의 값을 가져오거나 설정	$("#input").val("New Value");
.append()	선택한 요소의 내부 끝에 새로운 콘텐츠를 추가	$("#list").append("<li>New Item</li>");
.prepend()	선택한 요소의 내부 시작에 새로운 콘텐츠를 추가	$("#list").prepend("<li>First Item</li>");
.remove()	선택한 요소를 DOM에서 삭제	$(".item").remove();
.empty()	선택한 요소의 모든 자식 요소를 제거	$("#container").empty();

---

2) 스타일 변경

.css()	CSS 속성을 가져오거나 설정	$("p").css("color", "blue");
.addClass()	요소에 하나 이상의 클래스를 추가	$("p").addClass("highlight");
.removeClass()	요소에서 특정 클래스를 제거	$("p").removeClass("highlight");
.toggleClass()	클래스가 있으면 제거, 없으면 추가	$("p").toggleClass("active");

 

3) 이벤트 처리

클릭 및 기본 이벤트
.click()	클릭 이벤트를 처리	$("#btn").click(function() {...});
.dblclick()	더블 클릭 이벤트를 처리	$("#btn").dblclick(function() {...});
.hover()	마우스를 올렸을 때와 뗐을 때 이벤트 처리	$("#div").hover(inFunc, outFunc);
.mousedown()	마우스를 누를 때 이벤트 처리	$("#btn").mousedown(function() {...});
.mouseup()	마우스를 뗄 때 이벤트 처리	$("#btn").mouseup(function() {...});
.mousemove()	마우스를 요소 위에서 움직일 때 이벤트 처리	$("#div").mousemove(function() {...});
.mouseenter()	마우스가 요소 위로 올라왔을 때 실행	$("#div").mouseenter(function() {...});
.mouseleave()	마우스가 요소를 떠났을 때 실행	$("#div").mouseleave(function() {...});
키보드 이벤트
.keydown()	키보드를 눌렀을 때 실행	$("#input").keydown(function() {...});
.keyup()	키보드를 뗐을 때 실행	$("#input").keyup(function() {...});
.keypress()	키를 누를 때 실행 (Deprecated, 비추천)	$("#input").keypress(function() {...});
입력 및 폼 이벤트
.blur()	입력 필드가 포커스를 잃었을 때 실행	$("#input").blur(function() {...});
.focus()	입력 필드가 포커스를 얻었을 때 실행	$("#input").focus(function() {...});
.change()	입력 필드의 값이 변경되었을 때 실행	$("#select").change(function() {...});
.submit()	폼이 제출되었을 때 실행	$("#form").submit(function() {...});
.select()	입력 필드 텍스트를 선택했을 때 실행	$("#input").select(function() {...});
윈도우 및 문서 이벤트
.resize()	창 크기가 변경되었을 때 실행	$(window).resize(function() {...});
.scroll()	사용자가 스크롤할 때 실행	$(window).scroll(function() {...});
.load()	요소가 로드되었을 때 실행 (Deprecated)	$(window).load(function() {...});
.unload()	페이지가 언로드될 때 실행 (Deprecated)	$(window).unload(function() {...});
동적 이벤트 처리
.on()	특정 이벤트에 대해 동적으로 이벤트 핸들러 등록	$("#div").on("click", function() {...});
.off()	이벤트 핸들러 제거	$("#div").off("click");
.one()	한 번만 실행되는 이벤트 등록	$("#btn").one("click", function() {...});

 

4) 애니메이션

메서드설명예제

.hide()	요소를 숨김	$("#box").hide();
.show()	숨겨진 요소를 표시	$("#box").show();
.toggle()	요소를 표시/숨김 전환	$("#box").toggle();
.fadeIn()	요소를 점점 나타나게 함	$("#box").fadeIn(1000);
.fadeOut()	요소를 점점 사라지게 함	$("#box").fadeOut(1000);
.slideUp()	요소를 위로 슬라이드하며 숨김	$("#box").slideUp(500);
.slideDown()	요소를 아래로 슬라이드하며 표시	$("#box").slideDown(500);