질문자 :Naftali aka Neal
따라서 jQuery 1.6 에는 새로운 함수 prop() 있습니다.
$(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); })
또는 이 경우 그들은 같은 일을 합니까?
그리고 사용으로 전환 할 경우 prop() 모든 이전 attr() 호출 전 1.6로 전환 할 경우 중단됩니다?
업데이트
selector = '#id' $(selector).click(function() { //instead of: var getAtt = this.getAttribute('style'); //do i use: var thisProp = $(this).prop('style'); //or: var thisAttr = $(this).attr('style'); console.log(getAtt, thisProp, thisAttr); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <div id='id' style="color: red;background: orange;">test</div>
(이 바이올린 참조: http://jsfiddle.net/maniator/JpUF2/ )
콘솔은 getAttribute 를 문자열로, attr 을 문자열로 기록하지만 prop 은 CSSStyleDeclaration . 그 이유는 무엇입니까? 그리고 그것이 미래의 코딩에 어떤 영향을 미칩니까?
2012년 11월 1일 업데이트
내 원래 답변은 특히 jQuery 1.6에 적용됩니다. 내 조언은 그대로지만 jQuery 1.6.1은 상황을 약간 변경했습니다. 예측된 깨진 웹 사이트 더미에 직면하여 jQuery 팀 attr() 을 Boolean 속성에 대한 이전 동작에 가까운(그러나 정확히 동일하지는 않음) 것으로 되돌렸습니다. . John Resig도 이에 대해 블로그에 올렸습니다 . attr() 을 선호하라는 그의 권고에 여전히 동의하지 않습니다.
원래 답변
DOM을 직접 사용하지 않고 jQuery만 사용한 적이 있다면 이는 개념적으로는 확실히 개선된 것이지만 혼란스러운 변경이 될 수 있습니다. 그러나 이 변경의 결과로 중단될 jQuery를 사용하는 수많은 사이트에는 좋지 않습니다.
주요 문제를 요약하겠습니다.
- 일반적으로
attr() 보다 prop() 원합니다. - 대부분의 경우
prop() 은 attr() 하던 일을 합니다. attr() 호출을 prop() 로 대체하면 일반적으로 작동합니다. - 속성은 일반적으로 속성보다 다루기 쉽습니다. 속성 값은 문자열일 수 있지만 속성은 모든 유형이 될 수 있습니다. 예를 들어
checked 속성은 Boolean이고 style 속성은 각 스타일에 대한 개별 속성이 있는 객체이며 size 속성은 숫자입니다. - 속성과 이름이 같은 속성이 모두 존재하는 경우 일반적으로 하나를 업데이트하면 다른 하나가 업데이트되지만
value 및 checked 와 같은 입력의 특정 속성에는 해당되지 않습니다. 이러한 속성의 경우 속성은 항상 현재 상태를 나타냅니다. 속성(IE의 이전 버전 제외)은 입력의 기본값/확인에 해당합니다( defaultValue / defaultChecked 속성에 반영됨). - 이 변경 사항은 속성과 속성 앞에 붙어 있는 마법의 jQuery 레이어 중 일부를 제거합니다. 즉, jQuery 개발자는 속성과 속성의 차이점에 대해 약간 배워야 합니다. 이것은 좋은 일입니다.
당신이 jQuery 개발자이고 속성과 속성에 대한 이 전체 비즈니스에 대해 혼란스러워한다면 jQuery가 더 이상 이러한 것들로부터 당신을 보호하기 위해 그렇게 열심히 노력하지 않기 때문에 한 걸음 물러나서 그것에 대해 조금 배워야 합니다. 권위적이지만 다소 건조한 주제에 대한 사양이 있습니다. DOM4 , HTML DOM , DOM 레벨 2 , DOM 레벨 3 . Mozilla의 DOM 문서는 대부분의 최신 브라우저에 유효하며 사양보다 읽기 쉽기 때문에 해당 DOM 참조가 도움이 될 수 있습니다. 요소 속성에 대한 섹션이 있습니다.
속성이 속성보다 처리하기가 더 간단한 방법의 예로 처음에 선택되는 확인란을 고려하십시오. 다음은 이를 수행할 수 있는 두 가지 유효한 HTML입니다.
<input id="cb" type="checkbox" checked> <input id="cb" type="checkbox" checked="checked">
그렇다면 jQuery로 체크박스가 체크되어 있는지 어떻게 알 수 있을까요? 스택 오버플로를 살펴보면 일반적으로 다음 제안을 찾을 수 있습니다.
-
if ( $("#cb").attr("checked") === true ) {...} -
if ( $("#cb").attr("checked") == "checked" ) {...} -
if ( $("#cb").is(":checked") ) {...}
이것은 실제로 1995년 이후로 모든 주요 스크립팅 가능한 브라우저에서 완벽하게 작동 checked Boolean 속성과 관련하여 세상에서 가장 간단한 것입니다.
if (document.getElementById("cb").checked) {...}
속성은 또한 확인란을 선택하거나 선택 취소하는 것을 간단하게 만듭니다.
document.getElementById("cb").checked = false
jQuery 1.6에서 이것은 분명히
$("#cb").prop("checked", false)
checked 속성을 사용하는 아이디어는 도움이 되지 않으며 불필요합니다. 재산은 당신에게 필요한 것입니다.
- 확인란을 선택하거나 선택 취소하는 올바른 방법이
checked 속성을 사용하는 것인지 명확하지 않습니다. - 속성 값은 현재 보이는 상태가 아닌 기본값을 반영합니다(일부 이전 버전의 IE는 제외하므로 상황이 더 어려워짐). 속성은 페이지의 확인란이 선택되었는지 여부에 대해 아무 것도 알려주지 않습니다. http://jsfiddle.net/VktA6/49/를 참조하십시오.
나는 Tim이 그것을 아주 잘 말했다고 생각하지만, 뒤로 물러나자:
DOM 요소는 메모리에 있는 객체입니다. OOP의 대부분의 객체와 마찬가지로 속성 이 있습니다. 또한 개별적으로 요소에 정의된 속성의 맵이 있습니다(일반적으로 브라우저가 요소를 생성하기 위해 읽는 마크업에서 가져옴). 요소의 속성 중 일부는 동일하거나 유사한 이름을 가진 특성 (에서 초기 값을받을 value "값"속성에서 초기 값을 가져옵니다; href 은 "HREF"속성에서 초기 값을 가져옵니다,하지만 정확히 같은 값이 아니다; "class" 속성의 className 다른 속성은 다른 방식으로 초기 값을 가져옵니다. 예를 들어, parentNode 속성은 상위 요소가 무엇인지에 따라 값을 가져옵니다. 요소에는 "스타일" 속성이 있든 없든 style
http://example.com/testing.html 페이지에서 이 앵커를 고려해 보겠습니다.
<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>
일부 무상 ASCII 예술(그리고 많은 것을 생략함):
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| HTMLAnchorElement |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| href: "http://example.com/foo.html" |
| 이름: "fooAnchor" |
| 아이디: "fooAnchor" |
| className: "테스트 하나" |
| 속성: |
| href: "foo.html" |
| 이름: "fooAnchor" |
| 아이디: "fooAnchor" |
| 클래스: "테스트 1" |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
속성과 속성은 별개입니다.
이제 그것들은 구별되지만, 이 모든 것이 처음부터 설계되는 것이 아니라 진화했기 때문에 많은 속성은 설정하면 파생된 속성에 다시 씁니다. 그러나 모두가 그렇지 href 에서 볼 수 있듯이 매핑이 항상 "값을 전달"하는 것은 아니며 때로는 해석이 포함됩니다.
속성이 객체의 속성이라는 것에 대해 이야기할 때 추상적으로 말하는 것이 아닙니다. 다음은 jQuery가 아닌 코드입니다.
var link = document.getElementById('fooAnchor'); alert(link.href); // alerts "http://example.com/foo.html" alert(link.getAttribute("href")); // alerts "foo.html"
(이 값은 대부분의 브라우저에 따라 다르며 약간의 차이가 있습니다.)
link 개체는 진짜이고, 당신은 그것에 속성에 액세스하고, 속성을 액세스하는 사이에 진짜 차이가있다 볼 수 있습니다.
Tim이 말했듯이 대부분 의 경우 우리는 속성으로 작업하기를 원합니다. 부분적으로는 해당 값(심지어 이름까지)이 여러 브라우저에서 더 일관된 경향이 있기 때문입니다. 우리는 대부분 속성과 관련된 속성이 없을 때(사용자 정의 속성) 또는 해당 특정 속성에 대해 속성과 속성이 1:1이 아니라는 것을 알고 있는 경우에만( href 및 "href"와 같이) 작업하기를 원합니다. ).
표준 속성은 다양한 DOM 사양에 나와 있습니다.
이 사양에는 뛰어난 색인이 있으므로 해당 사양에 대한 링크를 편리하게 보관하는 것이 좋습니다. 나는 항상 그들을 사용합니다.
예를 들어 사용자 정의 속성에는 코드에 메타 데이터를 제공하기 위해 요소에 넣을 수 data-xyz data- 접두사를 고수하는 한 HTML5부터 유효합니다). (최신 버전의 jQuery data 함수를 통해 data-xyz 요소에 대한 액세스를 제공하지만 해당 함수는 data-xyz 속성에 대한 접근자가 아닙니다. attr 함수를 사용하여 data-xyz 속성과 상호 작용합니다.)
attr 함수는 문자 그대로 속성을 얻는 것이 아니라 원하는 것을 얻는 것과 관련된 복잡한 논리를 사용했습니다. 개념을 융합했습니다. prop 및 attr 로 이동하는 것은 그것들을 분리하기 위한 것이었습니다. v1.6.0의 jQuery를 잠시 너무 멀리 그 점에서 갔다,하지만 기능은 신속하게 다시 추가되었다 에 attr 사람들이 사용하는 일반적인 상황을 처리 할 수 attr 기술적으로 사용해야 할 때 prop .
이 변경 사항은 jQuery에 오랫동안 적용되었습니다. 수년 동안 그들은 이름에서 기대할 수 있는 결과가 아니라 대부분 DOM 속성을 검색하는 attr() 이라는 함수에 만족했습니다. attr() 과 prop() 분리하면 HTML 속성과 DOM 속성 사이의 혼란을 어느 정도 완화하는 데 도움이 됩니다. $.fn.prop() 은 지정된 DOM 속성을 $.fn.attr() 은 지정된 HTML 속성을 가져옵니다.
작동 방식을 완전히 이해하기 위해 다음은 HTML 속성과 DOM 속성의 차이점에 대한 확장된 설명입니다.
HTML 속성
통사론:
<body onload="foo()">
목적: 마크업이 이벤트, 렌더링 및 기타 목적을 위해 연결된 데이터를 가질 수 있도록 합니다.
심상:
class 속성은 본문에 표시됩니다. 다음 코드를 통해 액세스할 수 있습니다.
var attr; attr = document.body.getAttribute("class"); //IE 8 Quirks and below attr = document.body.getAttribute("className");
속성은 문자열 형식으로 반환되며 브라우저마다 일치하지 않을 수 있습니다. 그러나 일부 상황에서는 중요할 수 있습니다. 위에서 예시한 것처럼 IE 8 쿼크 모드(및 그 이하)는 속성 이름 대신 get/set/removeAttribute에서 DOM 속성 이름을 예상합니다. 이것은 차이점을 아는 것이 중요한 많은 이유 중 하나입니다.
DOM 속성
통사론:
document.body.onload = foo;
목적: 요소 노드에 속하는 속성에 대한 액세스 권한을 부여합니다. 이러한 속성은 속성과 유사하지만 JavaScript를 통해서만 액세스할 수 있습니다. 이것은 DOM 속성의 역할을 명확히 하는 데 도움이 되는 중요한 차이점입니다. 이 이벤트 핸들러 할당은 쓸모없고 이벤트를 수신하지 않기 때문에 속성은 속성과 완전히 다릅니다(본문에는 onload 이벤트가 없고 onload 속성만 있음).
심상:
여기에서 Firebug의 "DOM" 탭 아래에 속성 목록이 표시됩니다. DOM 속성입니다. 이전에 알지 못한 채 사용했을 것이기 때문에 그 중 상당수를 즉시 알아차릴 수 있습니다. 그들의 값은 JavaScript를 통해 받게 될 것입니다.
선적 서류 비치
예시
HTML: <textarea id="test" value="foo"></textarea>
자바스크립트: alert($('#test').attr('value'));
이전 버전의 jQuery에서는 빈 문자열을 반환합니다. 1.6에서는 적절한 값 foo 반환합니다.
두 함수에 대한 새 코드를 살펴보지 않고 혼란이 코드 자체보다 HTML 속성과 DOM 속성 간의 차이와 더 관련이 있다고 자신 있게 말할 수 있습니다. 바라건대, 이것은 당신을 위해 몇 가지 사항을 해결했습니다.
-매트
속성은 DOM에 있습니다. 속성은 DOM으로 구문 분석되는 HTML에 있습니다.
추가 세부 사항
속성을 변경하면 변경 사항이 DOM에 반영됩니다(때로는 다른 이름으로 사용).
예: class 속성을 변경하면 DOM에서 해당 태그 className class 가 이미 사용 중이기 때문입니다). 태그에 속성이 없는 경우에도 비어 있거나 기본값이 있는 해당 DOM 속성이 있습니다.
예: 태그에 class 속성이 없지만 DOM 속성 className 은 빈 문자열 값과 함께 존재합니다.
편집하다
하나를 변경하면 다른 하나가 컨트롤러에 의해 변경되고 그 반대의 경우도 마찬가지입니다. 이 컨트롤러는 jQuery가 아니라 브라우저의 기본 코드에 있습니다.
혼란을 일으키는 것은 HTML 속성과 DOM 객체 간의 구별일 뿐입니다. this.src this.value this.checked 등과 같은 DOM 요소의 기본 속성에 대해 편안하게 작동하는 사람들을 위해 .prop 은 가족을 매우 따뜻하게 환영합니다. 다른 사람들에게는 혼란을 가중시키는 층일 뿐입니다. 그것을 명확히 하자.
.attr 과 .prop 의 차이점을 확인하는 가장 쉬운 방법은 다음 예입니다.
<input blah="hello">
-
$('input').attr('blah') : 예상대로 'hello' 를 반환합니다. 여기에는 놀라움이 없습니다. -
$('input').prop('blah') : [HTMLInputElement].blah 를 수행하려고 하기 때문에 undefined 반환하고 해당 DOM 개체에 그러한 속성이 존재하지 않습니다. 범위에 해당 요소의 속성으로만 존재합니다(예: [HTMLInputElement].getAttribute('blah')
이제 다음과 같이 몇 가지를 변경합니다.
$('input').attr('blah', 'apple'); $('input').prop('blah', 'pear');
-
$('input').attr('blah') : 'apple' 반환 응? 이것이 해당 요소에서 마지막으로 설정되었으므로 "배"가 아닌 이유는 무엇입니까? 속성은 DOM 입력 요소 자체가 아니라 입력 속성에서 변경되었기 때문에 기본적으로 거의 서로 독립적으로 작동합니다. -
$('input').prop('blah') : 'pear'
당신이 정말로 조심해야 할 것은 위의 이유로 애플리케이션 전체에서 동일한 속성에 대해 이러한 사용법을 혼합하지 않는 것입니다.
차이점을 보여주는 바이올린 참조: http://jsfiddle.net/garreh/uLQXc/
.attr 대 .prop :
라운드 1: 스타일
<input style="font:arial;"/>
-
.attr('style') -- 일치하는 요소(예: "font:arial;" -
.prop('style') CSSStyleDeclaration 같은 스타일 선언 객체를 반환합니다.
2라운드: 가치
<input value="hello" type="text"/> $('input').prop('value', 'i changed the value');
-
.attr('value') -- 'hello' 반환 * -
.prop('value') 'i changed the value' 반환합니다.
* 참고: 이러한 이유로 jQuery에는 .prop('value') .val() 메서드가 있습니다.
TL;DR
대부분의 경우 attr() ()보다 prop() 을 사용합니다.
속성 은 입력 요소의 현재 상태입니다. 속성 은 기본값입니다.
속성에는 다른 유형의 항목이 포함될 수 있습니다. 속성에는 문자열만 포함될 수 있습니다.
더러운 체크
이 개념은 차이가 관찰 가능한 예를 제공합니다. http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty
사용해 보기:
- 버튼을 클릭하십시오. 두 확인란이 모두 선택되었습니다.
- 두 확인란을 모두 선택 취소합니다.
- 버튼을 다시 클릭하십시오.
prop 확인란만 선택되었습니다. 쾅!
$('button').on('click', function() { $('#attr').attr('checked', 'checked') $('#prop').prop('checked', true) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>attr <input id="attr" type="checkbox"></label> <label>prop <input id="prop" type="checkbox"></label> <button type="button">Set checked attr and prop.</button>
disabled on button 과 같은 일부 속성의 disabled="disabled" 추가하거나 제거하면 http://www.w3.org/TR/html5/forms.html#attr 이기 때문에 항상 속성(HTML5에서는 IDL 속성이라고 함)이 토글됩니다. -fe-disabled 말한다:
비활성화된 IDL 속성은 비활성화된 콘텐츠 속성을 반영해야 합니다.
필요없이 HTML을 수정하기 때문에 추악하지만, 당신은 그것을 벗어날 수 있습니다.
input type="checkbox" checked="checked" 와 같은 다른 속성의 경우 checked="checked" 콘텐츠 속성을 추가하거나 제거해도 더 이상 검사 상태가 토글되지 않기 때문에 문제가 발생 합니다.
이것이 HTML 수정의 복잡한 부작용에 의존하는 대신 유효 속성에 직접 영향을 미치므로 .prop 을 사용해야 하는 이유입니다.
모든 것이 문서에 있습니다 .
특성과 속성의 차이는 특정 상황에서 중요할 수 있습니다. jQuery 1.6 이전에는 .attr() 메서드가 일부 속성을 검색할 때 속성 값을 고려하는 경우가 있었는데, 이로 인해 일관성 없는 동작이 발생할 수 있었습니다. jQuery 1.6부터 .prop() 메서드는 속성 값을 명시적으로 검색하는 방법을 제공하는 반면 .attr()은 속성을 검색합니다.
따라서 소품을 사용하십시오!
속성 은 HTML 텍스트 문서/파일 에 있는 반면(== 이것이 구문 분석된 HTML 마크업의 결과라고 상상해 보세요),
속성 은 HTML DOM 트리에 있습니다 (== 기본적으로 JS 의미에서 일부 개체의 실제 속성).
중요한 것은 이들 중 많은 항목이 동기화된다는 점입니다( class 속성 class 속성도 업데이트됩니다. 그렇지 않으면). 그러나 일부 속성은 예기치 않은 속성과 동기화될 수 있습니다. 예를 들어 속성 checked 은 속성 defaultChecked 에 해당하므로
- 확인란을 수동으로 선택하면
.prop('checked') .attr('checked') 및 .prop('defaultChecked') 값은 변경되지 않습니다. -
$('#input').prop('defaultChecked', true) .attr('checked') 도 변경되지만 요소에는 표시되지 않습니다.
경험상 .prop() 메서드는 부울 속성/속성 및 html에 없는 속성(예: window.location)에 사용해야 합니다. 다른 모든 속성(html에서 볼 수 있는 것)은 .attr() 메서드를 사용하여 계속 조작할 수 있고 조작해야 합니다. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )
.prop() 이 선호되는 위치를 보여주는 표입니다 .attr() 을 계속 사용할 수 있음에도 불구하고).
.attr() 대신에 .prop()을 사용하려는 이유는 무엇입니까? 후자가 공식적으로 권장됩니다.
-
.prop() 는 문자열, 정수, 부울 등 모든 유형을 반환할 수 있습니다. .attr() 항상 문자열을 반환합니다. -
.prop() .attr() 보다 약 2.5배 빠릅니다.
.attr() :
- 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.
- 페이지 로드 시 html에 정의된 요소의 값을 제공합니다.
.prop() :
- 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.
- javascript/jquery를 통해 수정된 요소의 업데이트된 값을 제공합니다.
일반적으로 속성을 사용하려고 합니다. 다음에 대한 속성만 사용:
- 사용자 정의 HTML 속성 가져오기(DOM 속성과 동기화되지 않았기 때문에).
- DOM 속성과 동기화되지 않는 HTML 속성 가져오기, 예를 들어
<input value="abc">.
attributes -> HTML
properties -> DOM
jQuery를 1.6 전에, attr() 속성을 검색 할 때 방법은 때때로 계정에이 발생하지 않고 일치하지 않는 행동을 속성 값을했다.
prop() 메서드의 도입은 속성 값을 명시적으로 검색하는 방법을 제공하는 반면 .attr() 은 속성을 검색합니다.
문서:
jQuery.attr() 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.
jQuery.prop() 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.
prop() 사용에 대해 부드럽게 알림 예:
if ($("#checkbox1").prop('checked')) { isDelete = 1; } else { isDelete = 0; }
위의 함수는 체크박스1이 체크되어 있는지 아닌지를 확인하는데 사용됩니다. 체크되어 있다면: return 1; 그렇지 않은 경우: 0을 반환합니다. 여기에서 GET 함수로 사용되는 prop() 함수.
if ($("#checkbox1").prop('checked', true)) { isDelete = 1; } else { isDelete = 0; }
위의 함수는 체크박스1을 체크하고 항상 1을 반환하도록 설정하는 데 사용됩니다. 이제 함수 prop()을 SET 함수로 사용합니다.
방해하지 마세요.
P/S: Image src 속성을 확인할 때. src 가 비어 있으면 prop 은 페이지의 현재 URL(잘못)을 반환하고 attr은 빈 문자열(오른쪽)을 반환합니다.
.attr() 할 수 있는 한 가지는 .prop() 할 수 없는 일입니다. CSS 선택기에 영향을 줍니다.
다음은 다른 답변에서 볼 수 없었던 문제입니다.
CSS 선택기 [name=value]
-
.attr('name', 'value') 응답합니다. - 하지만 항상
.prop('name', 'value')
.prop() 은 소수의 속성 선택자에만 영향을 미칩니다.
.attr() 은 모든 속성 선택기에 영향을 줍니다.
1) 속성이 DOM에 있습니다. 속성은 DOM으로 구문 분석되는 HTML에 있습니다.
2) $( elem ).attr( "checked" ) (1.6.1+) "checked" (String) 체크박스 상태로 변경됩니다.
3) $( elem ).attr( "checked" ) (pre-1.6) true (Boolean) 체크박스 상태로 변경됨
data-img, data-xyz 와 같은 사용자 정의 속성보다는 DOM 객체에 사용하고 싶습니다.
또한 차이 중 일부에 접근 할 때 checkbox 값 href 와 attr() 와 prop() 와 DOM 출력을 가지 변화와 같은 prop() 에서 전체 링크로 origin 와 Boolean 체크 박스 값 (pre-1.6)
우리와 함께 할 수있는에만 액세스 할 DOM 요소 prop , 다른 하나는 다음이 제공 undefined
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>prop demo</title> <style> p { margin: 20px 0 0; } b { color: blue; } </style> </head> <body> <input id="check1" type="checkbox" checked="checked"> <label for="check1">Check me</label> <p></p> <script> $("input").change(function() { var $input = $(this); $("p").html( ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" + ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" + ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>"; }).change(); </script> </body> </html>
prop() 대 attr()에는 다음과 같은 몇 가지 추가 고려 사항이 있습니다.
selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked 및 defaultSelected..etc는 .prop() 메서드로 검색하고 설정해야 합니다. 해당 속성이 없으며 속성일 뿐입니다.
입력 유형 확인란의 경우
.attr('checked') //returns checked .prop('checked') //returns true .is(':checked') //returns true
prop 메서드는 checked, selected, disabled, readOnly..etc에 대한 부울 값을 반환하는 반면 attr은 정의된 문자열을 반환합니다. 따라서 if 조건에서 .prop('checked')를 직접 사용할 수 있습니다.
.attr()은 내부적으로 .prop()를 호출하므로 .attr() 메서드는 .prop()를 통해 직접 액세스하는 것보다 약간 느립니다.
코드가 이러한 방식으로 작성된 경우 Gary Hole 답변은 문제 해결과 매우 관련이 있습니다.
obj.prop("style","border:1px red solid;")
prop 함수는 CSSStyleDeclaration 객체를 반환하기 때문에 위의 코드는 일부 브라우저에서 제대로 작동하지 않습니다(내 경우에는 IE8 with Chrome Frame Plugin
따라서 다음 코드로 변경
obj.prop("style").cssText = "border:1px red solid;"
문제를 해결했습니다.
출처 : http:www.stackoverflow.com/questions/5874652/prop-vs-attr