[javascript] DOM 조작과 스타일 변경을 위한 jQuery 메서드

01 Dec 2023

javascript

jQuery는 JavaScript를 기반으로한 강력한 라이브러리로, DOM(Document Object Model) 조작과 스타일 변경을 쉽게 할 수 있는 다양한 메서드를 제공합니다. 이 글에서는 jQuery를 사용하여 DOM 조작과 스타일 변경을 어떻게 할 수 있는지 알아보겠습니다.

1. DOM 조작

DOM 조작은 웹 페이지의 요소를 추가, 제거, 변경 등을 통해 동적으로 조작하는 것을 말합니다. jQuery를 사용하면 DOM 조작을 간단하게 할 수 있습니다.

1.1. 요소 선택

jQuery에서는 $ 또는 jQuery 함수를 사용하여 요소를 선택할 수 있습니다.

// ID 선택자를 사용하여 요소 선택
$("#myElementId");

// 클래스 선택자를 사용하여 요소 선택
$(".myElementClass");

// 태그 선택자를 사용하여 요소 선택
$("div");

1.2. 요소 추가

새로운 요소를 DOM에 추가할 때, jQuery의 append, prepend, after, before 메서드를 사용할 수 있습니다.

// 요소를 자식 요소로 추가
$("#parentElement").append("<div>새로운 요소</div>");

// 요소를 첫 번째 자식 요소로 추가
$("#parentElement").prepend("<div>새로운 요소</div>");

// 요소를 선택한 요소 뒤에 추가
$("#selectedElement").after("<div>새로운 요소</div>");

// 요소를 선택한 요소 앞에 추가
$("#selectedElement").before("<div>새로운 요소</div>");

1.3. 요소 제거

요소를 제거할 때, jQuery의 remove 메서드를 사용할 수 있습니다.

// 요소 제거
$("#myElement").remove();

1.4. 요소 변경

요소를 변경할 때, jQuery의 메서드를 사용하여 속성, 내용, 스타일 등을 변경할 수 있습니다.

// 요소의 속성 변경
$("#myElement").attr("속성명", "새로운 값");

// 요소의 내용 변경
$("#myElement").text("새로운 내용");

// 요소의 스타일 변경
$("#myElement").css("속성명", "새로운 값");

2. 스타일 변경

jQuery를 사용하면 CSS 스타일을 동적으로 변경할 수 있습니다. 스타일 변경은 css 메서드를 사용하여 진행할 수 있습니다.

// 스타일 변경
$("#myElement").css("속성명", "새로운 값");

2.1. 여러 속성 변경

여러 속성을 한 번에 변경할 때는 css 메서드에 객체를 전달하여 변경할 수 있습니다.

// 여러 속성 한 번에 변경
$("#myElement").css({
  "속성명1": "값1",
  "속성명2": "값2",
  "속성명3": "값3"
});

결론

jQuery를 사용하면 JavaScript보다 간편하게 DOM 조작과 스타일 변경을 할 수 있습니다. 위에서 소개한 메서드들을 활용하여 웹 페이지를 동적으로 조작하고 스타일을 변경해보세요.