jQuery - 콘텐츠 및 속성 가져오기


jQuery에는 HTML 요소와 속성을 변경하고 조작하는 강력한 방법이 포함되어 있습니다.


jQuery DOM 조작

jQuery의 매우 중요한 부분 중 하나는 DOM을 조작할 수 있다는 것입니다.

jQuery에는 요소와 속성에 쉽게 액세스하고 조작할 수 있도록 하는 여러 DOM 관련 메서드가 함께 제공됩니다.

DOM = 문서 개체 모델

DOM은 HTML 및 XML 문서에 액세스하기 위한 표준을 정의합니다.

"W3C DOM(문서 개체 모델)은 프로그램과 스크립트가 콘텐츠, 구조 및 문서 스타일."


콘텐츠 가져오기 - text(), html() 및 val()

DOM 조작을 위한 간단하지만 유용한 세 가지 jQuery 메서드는 다음과 같습니다.

  • text() - 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
  • html() - 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환합니다.
  • val() - 양식 필드의 값을 설정하거나 반환합니다.

다음 예제는 jQuery text()html()메서드를 사용하여 콘텐츠를 가져오는 방법을 보여줍니다.

예시

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

다음 예제는 jQuery val()메소드를 사용하여 입력 필드의 값을 가져오는 방법을 보여줍니다.

예시

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});


속성 가져오기 - attr()

jQuery attr()메서드는 속성 값을 가져오는 데 사용됩니다.

다음 예는 링크에서 href 속성 값을 가져오는 방법을 보여줍니다.

예시

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

다음 장에서는 내용 및 속성 값을 설정(변경)하는 방법에 대해 설명합니다.


jQuery 연습

연습으로 자신을 테스트하십시오

연습:

jQuery 메서드를 사용하여 <div> 요소의 텍스트 콘텐츠 를 반환 합니다.

$("div").();


jQuery HTML 참조

모든 jQuery HTML 메소드에 대한 전체 개요를 보려면 jQuery HTML/CSS 참조 로 이동하십시오 .