jQuery - jQuery 기본 문법

jQuery

jQuery는 JavaScript 라이브러리로, JavaScript를 손쉽게 사용할 수 있도록 해주는 라이브러리이다.

 

선택자

• jQuery는 CSS 선택자를 사용해서 HTML 요소를 선택한다.
• 선택한 요소를 조작하거나 이벤트를 바인딩하는 데 사용된다. 
• 선택자는 $( ) 함수를 사용해서 만든다.

$("#myElement")		// ID가 myElement인 요소 선택

$(".myElements")		// Class가 myElements인 요소들을 선택

$("p")		// 모든 <p> 요소 선택

 

이벤트 처리

• jQuery를 사용하면 HTML 요소에 이벤트 핸들러를 쉽게 추가할 수 있다.

// 버튼 클릭 이벤트 핸들러 추가
$("#button").click(function() {
	// 이벤트 처리 로직
});

 

요소 조작

• jQuery를 사용하여 HTML 요소를 동적으로 조작할 수 있다.

$("#element").text("새로운 텍스트");	// 텍스트 설정

$("#element").html("<b>굵은 텍스트</b>");		// HTML 내용 설정

$("#image").attr("src", "new-image.jpg");	// 속성 설정

$("#list").append("<li>새로운 아이템</li>");	// 요소 추가

$("#element").remove();		// 요소 삭제

 

애니메이션

• jQuery를 사용해서 요소의 애니메이션을 만들 수 있다.

$("#myElement").fadeOut();		// 서서히 사라지는 애니메이션

$("#myElement").fadeIn();		// 서서히 나타나는 애니메이션

$("#myElement").animate({ left: "200px", top: "100px" });		// 이동 애니메이션

 

AJAX(비동기 통신)

jQuery를 사용하면 AJAX 요청을 쉽게 수행할 수 있다.

$.ajax({
  url: "data.json",
  type: "GET",
  dataType: "json",
  success: function(data) {
    // AJAX 요청 성공 시 처리 로직
  },
  error: function(error) {
    // AJAX 요청 실패 시 처리 로직
  }
});