jQuery의 기본 구문에는 선택기(CSS 스타일 선택기)와 메서드를 사용하여 선택한 요소를 조작하는 것이 포함됩니다. 다음은 jQuery의 기본 구문 예제입니다.
요소 선택
-
HTML 태그 이름으로 요소 선택:
$("tagname")예: 페이지의$("p")모든 요소를 선택합니다.<p> -
CSS 클래스로 요소 선택:
$(".classname")예:$(".myClass")"myClass" 클래스가 있는 모든 요소를 선택합니다. -
ID로 요소 선택:
$("#idname")예:$("#myElement")ID가 "myElement"인 요소를 선택합니다. -
속성으로 요소 선택:
$("[attribute='value']")예:$("[data-type='button']")속성이data-type"버튼"으로 설정된 요소를 선택합니다. -
선택 결합:
$("tagname.classname"),$("#idname .classname"), ...
선택한 요소 조작
-
요소의 콘텐츠 변경:
.html(),.text()예:$("#myElement").html("New content")ID가 "myElement"인 요소의 HTML 콘텐츠를 설정합니다. -
요소 속성 수정:
.attr(),.prop()예: 모든 요소의 속성을$("img").attr("src", "newimage.jpg")변경합니다.src<img> -
요소의 CSS 클래스 조작:
.addClass(),.removeClass(),.toggleClass()예:$("#myElement").addClass("highlight")ID가 "myElement"인 요소에 "highlight" 클래스를 추가합니다. -
요소 숨기기/표시:
.hide(),.show(),.toggle()예:$(".myClass").hide()"myClass" 클래스가 있는 모든 요소를 숨깁니다. -
요소에 대한 이벤트 처리:
.click(),.hover(),.submit(), ... 예:$("button").click(function() { ... })클릭 이벤트 핸들러 등록
요소 컬렉션 작업
-
컬렉션 반복:
.each()예: 페이지의$("li").each(function() { ... })각 요소를 반복합니다.<li> -
컬렉션 필터링:
.filter(),.not()예: 요소를$("div").filter(".myClass")필터링<div>하고 "myClass" 클래스가 있는 요소를 선택합니다. -
컬렉션에 요소 삽입:
.append(),.prepend(),.after(),.before()예: ID가 "myElement"인 요소에$("#myElement").append("<p>New paragraph</p>")새 요소를 추가합니다.<p>
효과 및 애니메이션
-
fadeIn/fadeOut 효과 수행:
.fadeIn(),.fadeOut()예:$("#myElement").fadeIn(1000)ID가 "myElement"인 요소를 1초 동안 페이드 인합니다. -
slideUp/slideDown 효과 수행:
.slideUp(),.slideDown()예:$(".myClass").slideUp(500)"myClass" 클래스가 있는 모든 요소를 0.5초 동안 슬라이드 업합니다. -
사용자 지정 애니메이션 수행:
.animate()예:$("#myElement").animate({ left: '250px', opacity: '0.5' })왼쪽 위치와 불투명도를 변경하여 ID가 "myElement"인 요소에 애니메이션을 적용합니다.
이러한 예제는 jQuery 기본 구문의 다양한 측면을 사용하여 요소를 선택하고 해당 속성을 조작하고 효과 또는 애니메이션을 적용하는 방법을 보여줍니다. jQuery는 웹 개발 작업을 단순화하고 향상시키는 다양한 방법과 기능을 제공합니다.