여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. jQuery – HTML – 콘텐츠 및 속성 가져오기
jQuery – HTML – 콘텐츠 및 속성 가져오기
6개월전 작성
6개월전 수정

콘텐츠 및 속성 가져오기

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

jQuery DOM 조작

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

jQuery에는 요소와 속성에 쉽게 액세스하고 조작할 수 있는 다양한 DOM 관련 메서드가 함께 제공된다.

⭐ DOM = 문서 개체 모델. DOM은 HTML 및 XML 문서에 액세스하기 위한 표준을 정의한다.

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

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

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

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

예제 1
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
기본 예시
예제 보기
예제 2
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});
기본 예시
예제 보기

속성 가져오기 – attr()

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

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

예제
$("button").click(function(){
  alert($("#w3s").attr("href"));
});
기본 예시
예제 보기
참고

Mingg`s Diary
밍구
공부 목적 블로그