jQuery에서 prop()와 attr()의 차이 및 attr()와 prop()의 사용 시기

jQuery에서 prop()와 attr()의 차이 및 attr()와 prop()의 사용 시기

이 질문에는 이미 다음과 같은 답변이 있습니다.

.prop() 대 .attr() (18개 답변)

닫힘10년 전에.

jQuery에서 attr()을 사용하는 것을 본 적이 있습니다..prop()가 사용되는 곳도 있습니다.하지만 SO와 구글에서 검색해보니 매우 혼란스럽습니다.이 둘의 정확한 차이점과 사용 시기를 알려주시기 바랍니다.

다음 링크 jQuery attr vs. prop를 봤는데 소품 목록이 있나요?jQuery tract vs prop?

하지만 저는 답을 얻지 못했습니다.

문서로 부터

속성과 속성 간의 차이는 특정 상황에서 중요할 수 있습니다.jQuery 1.6 이전에는 .attr() 메서드가 일부 특성을 검색할 때 속성 값을 고려하는 경우가 있었으며 이로 인해 일관되지 않은 동작이 발생할 수 있었습니다.jQuery 1.6에서 .prop() 메서드는 속성을 검색하는 반면 .attr() 메서드는 속성을 검색하는 방법을 제공합니다.

예

예를 들어, 선택한인덱스, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected를 검색하고 .prop() 메서드로 설정해야 합니다.jQuery 1.6 이전에는 이러한 속성을 .attr() 메서드로 검색할 수 있었지만 이 속성은 특성 범위에 포함되지 않았습니다.이 속성들은 해당하는 속성이 없으며 속성일 뿐입니다.

코멘트 후 업데이트됨

HTML 요소의 속성을 설정할 수 있습니다.소스 코드를 작성하면서 정의하면 브라우저가 코드를 구문 분석하면 해당 DOM 노드가 생성되고 이에 따라 속성을 갖는 객체가 됩니다.

간단한 예로는..

<input type="test" value="test" id="test" />

여기서 유형, 값, id는 특성입니다.브라우저가 렌더링하면 align, alt, autofocus, baseURI, checked 등의 다른 속성을 얻을 수 있습니다.

이 내용을 더 읽어보고 싶다면 링크

.attr()는 해당 HTML 태그의 속성을 변경합니다.

.prop()는 DOM 트리에 따라 해당 HTML 태그의 속성을 변경합니다.

이 링크의 예에서 알 수 있듯이.입력 필드는 "value" 속성을 가질 수 있습니다.입력한 기본값과 동일합니다.사용자가 입력 필드의 값을 변경하면 속성 "value"는 DOM Tree에서 변경되지만 원래 속성은 남아 있습니다.

의 속성에 의 에 하려면 을 으로 하려면 을 의 에 으로 .attr(). 그 값을 할 수 경우(에는 ⑥ ⑦ 사용자가 수 있는 입력 경우 등 라디오 확인란 변경할 이 값을 기능 입력 ) 등 the 라디오 기능 if ( , 경우 can 확인란 that by ( use , user 사용자가 be , changed value 있는 the such.prop()최신 값을 얻을 수 있는 기능입니다.

참조 : HTML : 속성과 속성의 차이

예제 스니펫

$(document).ready(function() {
  console.log($('#test').attr('value') + " - With .attr()");

  $('#answer').click(function() {
    console.log($('#test').attr('value') + " - With .attr()");
    console.log($('#test').prop('value') + " - With .prop()");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Change the input value and check the console...</div>
<input type="text" id="test" value="Sample">
<button id="answer">Click Me</button>

JQuery는 변화하는 라이브러리이며 때때로 정기적으로 개선되기도 합니다. .attr()은 HTML 태그에서 속성을 가져오는 데 사용되며 완벽하게 기능하는 .prop()는 나중에 더 의미 있게 추가되었으며 'checked', 'selected'와 같은 가치 없는 속성과 더 잘 작동합니다.

JQuery의 최신 버전을 사용하는 경우 가능할 때마다 .prop()를 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/16051491/difference-between-prop-and-attr-in-jquery-and-when-to-use-attr-and-prop