jQuery learning_jquery에서 prop과 attr의 차이점에 대한 소개 예

1. .prop( propertyName )
일치 세트
에서 첫 번째 요소의 속성 값을 가져옵니다. 2.
.prop( propertyName, value )
.prop( map )
.prop (propertyName, function(index, oldPropertyValue))
일치하는 요소 집합에 하나 이상의 속성을 설정합니다

.prop()와 .attr()의 차이점

다음은 jQuery1에 관한 것입니다. .6 및 1.6.1의 속성 모듈 변경 사항과 .attr() 메서드 및 .prop() 메서드의 선호되는 사용에 대한 설명입니다.

속성 모듈 변경 사항 속성과 속성 간의 모호성을 제거하기 위한 것이지만 1.6 이전의 모든 버전에서는 속성과 속성을 처리하는 데 단일 메서드(.attr())가 사용되었기 때문에 jQuery 커뮤니티에서 약간의 혼란을 야기했습니다. 그러나 이전 .attr() 메서드에는 몇 가지 버그가 있어 유지 관리가 어렵습니다. jQuery1.6.1은 속성 모듈을 업데이트하고 몇 가지 버그를 수정합니다.

elem.checked true (Boolean) 체크박스 상태에 따라 변경됩니다
$(elem).prop("checked") true (Boolean) 체크박스 상태에 따라 변경됩니다
elem.getAttribute("checked ") "checked"(문자열) 체크박스의 초기 상태; ​​변경되지 않음
$(elem).attr("checked")(1.6) "checked"(String) 체크박스의 초기 상태; ​​변경되지 않음
$(elem).attr("checked")(1.6.1 ) "checked"(문자열) 체크박스 상태에 따라 변경됩니다.
$(elem).attr("checked")(pre-1.6) true ( 부울) 체크박스 상태로 변경

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked ") )

이 세 가지 모두 부울 값을 반환합니다.

jQuery 1.6에서 .attr() 메서드의 변경 사항을 더 명확하게 하기 위해 .attr()을 사용하는 몇 가지 예를 소개합니다. 이전 버전의 jQuery에서는 정상적으로 작동했지만 이제는 .prop 대신 () 메소드를 사용해야 합니다:

우선, 윈도우나 문서에서 .attr() 메소드를 사용하는 것은 jQuery 1.6에서는 윈도우나 문서에 속성이 있을 수 없기 때문에 제대로 작동하지 않습니다. 여기에는 속성(예: 위치 또는 ReadyState)이 포함되어 있으며 .prop() 메서드를 사용하거나 단순히 기본 JavaScript 메서드를 사용하여 조작해야 합니다. jQuery 1.6.1에서는 창과 문서에서 .attr()을 사용하면 오류가 발생하는 대신 자동으로 .prop을 사용하도록 변환됩니다.

두 번째로 앞에서 언급한 selected, selected 및 기타 부울 속성은 이러한 속성과 해당 속성 간의 특별한 관계로 인해 특별하게 취급됩니다. 기본적으로 속성은 다음 HTML에서 볼 수 있는 것입니다.



checked와 같은 부울 속성은 기본값 또는 초기 값으로만 ​​설정됩니다. 체크박스 요소에서는 체크박스 요소 선택 여부에 관계없이 페이지가 로드될 때 체크된 속성이 설정됩니다.

속성은 브라우저가 현재 값을 기록하는 데 사용하는 것입니다. 일반적으로 속성은 해당 속성(있는 경우)을 반영합니다. 그러나 부울 속성의 경우에는 그렇지 않습니다. 사용자가 체크박스 요소를 클릭하거나 선택 요소에서 옵션을 선택할 때 부울 속성이 최신 상태로 유지됩니다. 그러나 해당 부울 속성은 위에서 언급한 것처럼 브라우저에서 초기 값을 저장하는 데만 사용됩니다.

$(":checkbox").get(0).checked = true

// $(":checkbox:first").prop("checked"와 동일합니다. , true);

jQuery1.6에서 다음 방법을 사용하여 selected를 설정하는 경우:

$(“:checkbox”).attr(“checked”, true); >
체크박스 요소는 반드시 설정해야 하는 속성이므로 체크하지 않으나 모든 설정은 초기값이 됩니다.

그러나 jQuery 1.6이 출시되자 jQuery 팀은 브라우저가 페이지 로딩에만 관심을 가질 때 일부 값을 설정하는 것이 특별히 유용하지 않다는 것을 이해했습니다. 따라서 이전 버전과의 호환성과 .attr() 메서드의 유용성을 유지하기 위해 계속해서 .attr() 메서드를 사용하여 jQuery 1.6.1에서 이러한 부울 속성을 가져오고 설정할 수 있습니다.

가장 일반적인 속성은 선택됨, 선택됨, 비활성화됨 및 읽기 전용이지만 다음은 부울 속성/속성을 동적으로 가져오고 설정하기 위해 .attr() 사용을 지원하는 jQuery 1.6.1의 전체 목록입니다.

autofocus, 자동 재생, 비동기, 확인됨, 제어, 연기, 비활성화됨,

숨김, 루프, 다중, 열기, 읽기 전용, 필수, 범위 지정, 선택됨

여전히 다음을 사용하는 것이 좋습니다. .prop() 메서드 이러한 부울 속성/속성을 설정하려면 이러한 사용 사례가 .prop() 메서드를 사용하도록 변환되지 않더라도 코드는 jQuery 1.6.1에서 계속 정상적으로 실행됩니다.

다음은 일부 속성 및 속성의 목록입니다. 일반적인 상황에서는 해당 메서드(아래 목록 참조)를 사용하여 이를 가져오고 설정해야 합니다. 다음은 첫 번째 사용법이지만 .attr() 메서드는 모든 속성에서 작동합니다.

참고: 일부 DOM 요소 속성도 아래에 나열되어 있지만 새로운 .prop() 메서드에서만 실행됩니다.

* 예: window.location

** 필요한 경우(필요한 경우) .width()

값을 가져오거나 설정하는 데 .attr() 또는 .prop()를 사용하면 안 됩니다.대신 .val() 메소드를 사용하십시오(.attr("value","somevalue")를 사용하더라도 1.6 이전과 마찬가지로 계속 실행할 수 있습니다)

3. 선호하는 사용법

.prop() 메소드는 HTML에 존재하지 않는 부울 속성/속성 및 속성(예: window.location)을 처리하는 데 사용해야 합니다. 다른 모든 속성(HTML에서 볼 수 있는 속성)은 .attr() 메서드를 사용하여 계속해서 조작할 수 있고 조작해야 합니다.

위의 요약은 충분히 명확하게 설명되었으므로 더 이상 요약할 필요가 없습니다.

참고:
http://hxq0506.iteye.com/blog/1046334