close

jQuery를 사용한 DOM 조작- 기술 및 예제

jQuery를 사용한 DOM 조작을 통해 DOM 구조를 대상으로 웹 페이지의 데이터를 수정, 추가, 제거 또는 상호 작용할 수 있습니다. jQuery는 DOM 조작 작업을 수행하기 위한 편리한 메서드와 기능을 제공합니다.

다음은 구체적인 예와 함께 각 섹션에 대한 설명입니다.

 

요소 선택

  • $("p"): <p> 페이지의 모든 요소를 ​​선택합니다.
  • $(".myClass"): 클래스가 있는 모든 요소를 ​​선택합니다 myClass.
  • $("#myElement"): ID가 인 요소를 선택합니다 myElement.
  • $("parentElement").find(".childElement"): childElement 에서 클래스가 있는 모든 자식 요소를 선택합니다 parentElement.

예:

$("p").css("color", "red");

 

콘텐츠 변경

  • $("#myElement").html("<b>Hello World</b>"): ID가 있는 요소에 대한 HTML 콘텐츠를 설정합니다 myElement.
  • $("p").text("New text"): 모든 요소의 텍스트 내용을 설정합니다 <p>.

예:

$("p").text("New paragraph");

 

요소 추가 및 제거

  • $("ul").append("<li>New item</li>"): <li> 순서가 없는 목록의 끝에 요소를 추가합니다( <ul>).
  • $(".myClass").remove() myClass: 페이지에서 클래스가 있는 모든 요소를 ​​제거합니다 .

예:

$("ul").append("<li>Item 4</li>");

 

속성 및 클래스 변경

  • $("img").attr("src", "new-image.jpg"): src 모든 <img> 요소의 속성 값을 변경합니다.
  • $("#myElement").addClass("newClass") newClass: ID가 있는 요소에 클래스를 추가합니다 myElement.
  • $("#myElement").removeClass("oldClass") oldClass: ID가 있는 요소에서 클래스를 제거합니다 myElement.

예:

$("img").attr("alt", "New Image");

 

이벤트 처리

$("button").click(function() { }) <button>: 요소 클릭 시 이벤트 핸들러 함수를 등록합니다 .

예:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

효과 및 애니메이션

  • $("#myElement").hide(): ID가 있는 요소를 숨깁니다 myElement.
  • $("#myElement").show(): ID가 있는 요소를 표시합니다 myElement.
  • $("#myElement").fadeOut(): ID가 인 요소에 대해 페이드 아웃 효과를 수행합니다 myElement.
  • $("#myElement").fadeIn(): ID가 인 요소에 대해 페이드 인 효과를 수행합니다 myElement.

예:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});