복붙노트

[JQUERY] .attr VS .prop ()

JQUERY

.attr VS .prop ()

해결법

  1. 1.업데이트 2012년 11월 1일

    업데이트 2012년 11월 1일

    내 원래의 대답은 jQuery를 1.6에 구체적으로 적용됩니다. 내 조언은 약간 동일하지만, jQuery를 1.6.1 변경 일을 남아 : 깨진 웹 사이트의 예측 더미의 얼굴에, JQuery와 팀은 뭔가 가까이에 ATTR ()를 복귀 (하지만 정확히 같은) 부울 속성의 이전 동작 . 존 레식은 그것에 대해 블로그. 나는 그들이에 있던 어려움을 볼 수 있지만 여전히 ATTR을 선호하는 그의 권고에 동의 할 수 있습니다 ().

    원래 대답

    당신은 오직 직접 jQuery를하지 DOM을 사용한 경우는 개념적으로 확실히 개선 있지만,이는 혼란 변경 될 수 있습니다. 하지만 이러한 변화의 결과로 중단됩니다 jQuery를 사용하는 사이트의 bazillions에 대한 좋지 않습니다.

    나는 주요 이슈를 요약합니다 :

    당신이의 jQuery 개발자 및 특성과 속성에 대한이 모든 비즈니스에 의해 혼동하는 경우 jQuery를 더 이상이기 때문에, 당신은이 물건에서 당신을 보호하기 위해 열심히 노력하고, 스텝 백을 가지고 그것에 대해 조금 배울 필요가 없습니다. 주제에 권위하지만 다소 건조 단어를 들어, 사양있다 : DOM4, HTML DOM, DOM 레벨 2를, DOM 레벨 3 모질라의 DOM 문서는 가장 현대적인 브라우저 유효하고 찾을 수 있도록 사양을보다 쉽게 ​​읽을 수 자신의 DOM 참조가 도움이. 요소 속성에 대한 섹션이있다.

    속성 속성보다 더 다루기 간단 방법의 예를 들어, 초기에 확인하는 확인란을 고려한다. 다음은이 작업을 수행하는 유효한 HTML의 두 가지 부분은 다음과 같습니다 :

    <input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

    이 확인란을 jQuery를 함께 체크한다면, 당신은 어떻게 알 수 있습니까? 스택 오버플로에보고 당신은 일반적으로 다음과 같은 제안을 찾을 수 있습니다 :

    이것은 실제로 존재하고 1995 년부터 모든 주요 스크립트 브라우저에서 완벽하게 일했다 확인 된 부울 속성, 함께 할 수있는 세계에서 가장 단순한 것입니다 :

    (document.getElementById를 ( "CB"). 확인) {...} 경우

    속성은 또한 확인 또는 사소한 확인란의 선택을 취소합니다 :

    document.getElementById를 ( "CB"). 확인 = 거짓

    jQuery를 1.6, 이것은 명확하게

    $ ( "#의 CB"). 소품 ( "확인", false)를

    체크 박스를 스크립팅에 대해 확인 속성을 사용하는 아이디어는 도움이되지 않는 불필요한입니다. 이 건물은 당신이 필요로하는 것입니다.

  2. 2.나는 팀이 아주 잘했다 생각하지만,의 단계를 다시 보자 :

    나는 팀이 아주 잘했다 생각하지만,의 단계를 다시 보자 :

    DOM 요소는 객체, 메모리에있는 것입니다. OOP에서 대부분의 개체처럼, 속성이 있습니다. 또한, 별도로, (보통 브라우저가 요소를 만들 읽어 마크 업에서 오는) 요소에 정의 된 속성의 맵이있다. 요소의 속성 중 일부는 동일하거나 유사한 이름을 가진 속성 (값이 "값"속성에서 초기 값을 가져옵니다에서 초기 값을 얻을; HREF는 "HREF"속성에서 초기 값을 가져옵니다,하지만 정확히 같은 값이 아니다; 은 "클래스"속성에서 클래스 이름). 다른 속성은 다른 방법으로 초기 값을 얻을 : 예를 들어, 인 parentNode 속성은 부모 요소가 무엇인지에 따라 그 값을 가져옵니다; 요소는 항상은 "스타일"속성이 있는지 여부, 스타일 속성이 있습니다.

    이제 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" |
| name:       "fooAnchor"                   |
| id:         "fooAnchor"                   |
| className:  "test one"                    |
| attributes:                               |
|    href:  "foo.html"                      |
|    name:  "fooAnchor"                     |
|    id:    "fooAnchor"                     |
|    class: "test one"                      |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

    속성과 속성이 별개 있습니다.

    이 모든 것이 처음부터 설계되는 것이 아니라 진화 때문에 그들이 별개 있지만 이제, 속성의 수는 다시 그들이 당신을 설정 한 경우에서 파생 된 속성을 작성합니다. 모든하지, 당신은 위의 HREF에서 볼 수 있듯이, 매핑이 항상 똑바로하지 않습니다하지만 가끔은 참여 해석이있다 "에 값을 전달합니다."

    나는 특성이 개체의 속성을 것에 대해 이야기 할 때, 나는 추상적 말하는 게 아니에요. 다음은 몇 가지가 아닌 jQuery 코드는 다음과 같습니다

    var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

    (그 값은 대부분의 브라우저에 따라있는 일부 변화가있다.)

    링크 개체는 진짜이고, 당신은 그것에 속성에 액세스하고, 속성을 액세스하는 사이에 진짜 차이가있다 볼 수 있습니다.

    팀이 말했듯이, 대부분의 시간, 우리는 속성 작업 싶어요. 그 값 (그들의 이름은) 브라우저에서 일관성을하는 경향이 있기 때문에 약간의 그. 그것은 (사용자 정의 속성)에 관련된 프로퍼티가 없을 때 우리는 대부분의 속성 만 작업 할, 또는 우리는 특정 속성, 속성 및 속성이 1이 아닌 것을 알고 : 1 (HREF와 "HREF"위에서와 마찬가지로 ).

    표준 속성은 다양한 DOM 사양에 배치된다 :

    이 사양은 뛰어난 인덱스를 가지고 있고 나는 그들 편리한 링크를 유지하는 것이 좋습니다; 나는 그들에게 모든 시간을 사용합니다.

    사용자 정의 속성은 예를 들어, 데이터-XYZ 당신이 (한 당신이 데이터 - 접두사에 충실으로, 지금은 HTML5의 유효하다는) 코드에 메타 데이터를 제공하는 요소에 넣을 수있는 속성이 포함됩니다. (jQuery를 최신 버전은 데이터 기능을 통해 데이터 XYZ 요소에 액세스 할 수 있지만 그 기능은 데이터 XYZ 속성 [가 모두 더 적은 것보다 않습니다] 단지 접근하지 않습니다, 당신은 실제로 그 기능이 필요하지 않는 한, I "XYZ 데이터 속성과 상호 작용하도록 ATTR 함수를 사용 거라고).

    사용 ATTR 기능은 말 그대로 속성을 얻는 것이 아니라, 원 무슨 생각을 점점 주위에 약간의 뒤얽힌 논리를 가지고 있습니다. 그것은 개념으로 융합. 소품 및 ATTR로 이동하는 드 conflate 그들에게 의미했다. v1.6.0의 jQuery를 잠시 너무 멀리 그 점에서 갔다,하지만 기능은 신속하게 기술적으로는 소품을 사용해야 할 때 사람들이 ATTR를 사용하는 일반적인 상황을 처리하는 ATTR에 다시 추가되었습니다.

  3. 3.이 변경 사항은 jQuery를 위해 오는 긴 시간이었다. 년 동안, 그들은 대부분, 당신은 이름에서 기대할 수없는 결과를 DOM 속성을 검색하는 기능 이름이 ATTR ()에 만족 있었어요. ATTR ()와 지주 ()의 분리는 HTML 속성과 DOM 속성 사이의 혼란의 일부를 완화하는 데 도움이됩니다. $ .fn.prop ()는 $ .fn.attr () 동안 지정된 HTML 속성을 잡고, 지정된 DOM 속성을 잡고.

    이 변경 사항은 jQuery를 위해 오는 긴 시간이었다. 년 동안, 그들은 대부분, 당신은 이름에서 기대할 수없는 결과를 DOM 속성을 검색하는 기능 이름이 ATTR ()에 만족 있었어요. ATTR ()와 지주 ()의 분리는 HTML 속성과 DOM 속성 사이의 혼란의 일부를 완화하는 데 도움이됩니다. $ .fn.prop ()는 $ .fn.attr () 동안 지정된 HTML 속성을 잡고, 지정된 DOM 속성을 잡고.

    작동 방식을 이해 완전히, 여기를 HTML 특성 및 DOM 속성의 차이에 대한 확장 된 설명입니다 :

    목적: 마크 업 이벤트, 렌더링 및 기타 목적을 위해 그와 관련된 데이터를 할 수 있습니다.

    심상: 클래스 속성은 몸에 여기에 표시됩니다. 그것은 다음과 같은 코드를 통해 접근 할 수있다 :

    var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

    속성은 문자열 형태로 반환됩니다 및 브라우저에 브라우저에서 일치하지 않을 수 있습니다. 그러나, 그들은 어떤 상황에서 중요 할 수있다. 상기 예시 된 바와 같이, IE 8 쿼크 모드 (아래)의 GET / SET에 DOM 속성 이름을 예상 / removeAttribute 대신 속성 이름. 이것은 차이를 아는 것이 중요합니다 많은 이유 중 하나입니다.

    document.body.onload = foo는;

    목적: 요소 노드에 속하는 속성에 대한 액세스를 제공합니다. 이러한 속성은 속성과 비슷하지만 자바 스크립트를 통해 액세스 할 수 있습니다. 이것은 DOM 속성의 역할을 명확히하는 데 도움이 중요한 차이입니다. 이 이벤트 핸들러 할당이 쓸모가와 (몸, 만 onload 속성을 onload 이벤트가없는) 이벤트를 수신하지 않습니다 같은 속성, 속성에서 완전히 다른 것을주십시오 참고.

    심상:

    여기에서, 당신은 방화범의 "DOM"탭에서 속성의 목록을 알 수 있습니다. 다음은 DOM 속성입니다. 당신이 그것을 모른 채하기 전에를 사용한 것 같이 즉시, 그들 중 상당수를 알 수 있습니다. 이들의 값은 자바 스크립트를 통해 받게 될 것입니다 무엇입니까.

    HTML : <텍스트 영역 ID = "테스트"값 = "foo는">

    자바 스크립트 : 경고 (. $ ( '# 테스트') ATTR ( '값'));

    jQuery를 이전 버전이 빈 문자열을 반환합니다. 1.6에서는 적절한 값, foo는 반환합니다.

    두 기능에 대한 새로운 코드를 훑어하지 않고, 나는 혼란 HTML 특성 및 DOM 속성, 코드 자체보다 차이점과 더 가지고 자신있게 말할 수 있습니다. 희망이 당신을 위해 몇 가지를 정리.

    -매트

  4. 4.프로퍼티는 DOM에; 속성은 DOM으로 파싱 된 HTML입니다.

    프로퍼티는 DOM에; 속성은 DOM으로 파싱 된 HTML입니다.

    이 속성을 변경하면 변경 (때로는 다른 이름)를 DOM에 반영됩니다.

    예 : 태그의 클래스 속성을 변경하면 DOM에서 해당 태그의 클래스 속성을 변경합니다. 이 태그에는 속성이 없다면, 당신은 여전히 ​​비어 있거나 디폴트 값으로 해당 DOM의 속성이 있습니다.

    예 : 태그는 더 클래스 속성이없는 반면, DOM 속성 클래스 이름이 빈 문자열 값으로 존재 않습니다.

    편집하다

    당신이 하나를 변경하면 다른 하나는 컨트롤러에 의해 변경하고, 그 반대의 경우도 마찬가지됩니다. 이 컨트롤러는 jQuery를에 아니지만, 브라우저의 네이티브 코드입니다.

  5. 5.HTML 속성과 DOM은 그 혼란을 야기 객체 사이에 단지 차이입니다. DOM 요소에 편안하게 연기를있는 것들에 대한 기본 속성 같은 this.src this.value this.checked 등이, 가족에게 아주 따뜻한 환영 .prop입니다. 다른 사람들을 위해, 그것은 혼란 단지 한층입니다. 의 그을 취소 할 수 있습니다.

    HTML 속성과 DOM은 그 혼란을 야기 객체 사이에 단지 차이입니다. DOM 요소에 편안하게 연기를있는 것들에 대한 기본 속성 같은 this.src this.value this.checked 등이, 가족에게 아주 따뜻한 환영 .prop입니다. 다른 사람들을 위해, 그것은 혼란 단지 한층입니다. 의 그을 취소 할 수 있습니다.

    가장 쉬운 방법은 .attr의 차이를 보려면 다음과 같은 예는 .prop입니다 :

    <input blah="hello">

    이제 우리는 지금과 같은 몇 가지 변경 :

    $('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

    문제는 당신은 정말 그냥 위의 이유로 응용 프로그램 전반에 걸쳐 동일한 속성에 대한 이들의 사용을 혼합하지 않는 것입니다주의해야합니다.

    http://jsfiddle.net/garreh/uLQXc/ : 바이올린을 보여주는에게 차이를보기

    <input style="font:arial;"/>

    <input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

    * 주 :이 때문에 jQuery를 내부적 .prop 동등한 .val () 메소드를 갖는다 ( '값')

  6. 6.TL; DR

    TL; DR

    사용 소품 () 이상 ATTR () 대부분의 경우이다.

    속성은 입력 요소의 현재 상태이다. 속성은 기본값입니다.

    속성은 다른 종류의 것들을 포함 할 수 있습니다. 속성은 문자열을 포함 할 수 있습니다

  7. 7.더러운 checkedness

    더러운 checkedness

    차이가 관찰 할 곳이 개념은 예를 제공합니다 : http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

    그것을 밖으로 시도 :

    $ ( '버튼'). (함수를 '클릭'에 () { $ ( '#의 ATTR'). ATTR는 ( '확인' '확인') $ ( '# 소품'). 소품 ( '확인', TRUE) }) <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <라벨> ATTR <입력 ID = "ATTR"TYPE = "체크 박스"> <라벨> 소품 <입력 ID = "소품"TYPE = "체크 박스"> <버튼 타입 = "버튼"> 집합 ATTR 및 소품을 조사했다.

    추가 또는 "장애인"장애인 = content 속성을 제거 버튼을 비활성화 같은 일부 속성에 대해서는 항상 http://www.w3.org/TR/html5/forms.html#attr 때문에 재산 (HTML5에서라는 IDL 속성을) 전환 -Fe 장애인 말한다 :

    가 필요없이 이후 수정 HTML 추한하지만 그래서 당신은, 그것을 멀리 얻을 수 있습니다.

    검사와 같은 다른 속성의 = 입력 유형 = "체크 박스"상황이 당신이 그것을 클릭하면, 더러워되기 때문에, 휴식 후 추가 또는 체크 제거에 "확인"= content 속성은 더 이상 checkedness 토글하지 않습니다 "확인".

    직접적 유효 특성에 영향을 당신이 대신 HTML을 수정하는 복잡한 부작용에 의존, .prop 주로 사용해야하는 이유이다.

  8. 8.모두는 문서에 있습니다 :

    모두는 문서에 있습니다 :

    사용 소품 그래서!

  9. 9.속성은, 반면 (이것이 당신의 HTML 마크 업 구문 분석의 결과를 상상 ==)를 HTML 텍스트 문서 / 파일에있는 속성 HTML DOM 트리에 (== 기본적 JS 감지 일부 객체의 실제 속성).

    속성은, 반면 (이것이 당신의 HTML 마크 업 구문 분석의 결과를 상상 ==)를 HTML 텍스트 문서 / 파일에있는 속성 HTML DOM 트리에 (== 기본적 JS 감지 일부 객체의 실제 속성).

    중요한 것은, 그들 중 많은 사람들이 (그리고 그렇지 않으면 당신은 클래스 속성을 업데이트 할 경우, HTML의 클래스 속성도 업데이트됩니다) 동기화됩니다. 그러나 일부 속성은 예상치 못한 특성에 동기화 할 수있다 - 예를 들어, 속성은 속성에 해당 체크 defaultChecked, 그래서

    그리고 여기 (.attr ()를 여전히 사용할 수있다하더라도) .prop ()가 바람직하고 쇼하는 테이블이다.

  10. 10..attr () :

    .attr () :

    ) (.prop :

  11. 11.일반적으로 당신이 속성을 사용하는 것이 좋습니다. 만 사용 속성 :

    일반적으로 당신이 속성을 사용하는 것이 좋습니다. 만 사용 속성 :

  12. 12.속성 -> HTML

    속성 -> HTML

    속성 -> COURT

  13. 13.속성을 검색 할 때 jQuery를 1.6 전에, ATTR () 메소드는 때로는 계정에이 발생하지 않고 일치하지 않는 행동을 속성 값을했다.

    속성을 검색 할 때 jQuery를 1.6 전에, ATTR () 메소드는 때로는 계정에이 발생하지 않고 일치하지 않는 행동을 속성 값을했다.

    소품 () 메소드의 도입은 잠시 .attr ()를 검색 속성을 명시 적으로 속성 값을 검색 할 수있는 방법을 제공합니다.

    워드 프로세서 :

    jQuery.attr () 정합 소자들의 세트의 첫 번째 요소에 대한 속성의 값을 취득.

    jQuery.prop () 유사한 요소의 세트의 첫 번째 요소의 속성 값을 취득.

  14. 14.) (예를 소품을 사용하는 방법에 대한 부드럽게 알림 :

    ) (예를 소품을 사용하는 방법에 대한 부드럽게 알림 :

    if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

    함수는 상기 CheckBox1을 체크하지 않은 경우 또는 체크되었는지 확인하기 위해 사용된다 : 창 1; 아니라면하십시오 GET 함수로 여기에 사용 된 0을 반환 기능 소품 ().

    if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

    세트 CheckBox1을하는 데 사용되는 위의 기능을 확인하고 항상 일련의 기능으로 사용 1. 이제 기능 소품 ()를 호출합니다.

    엉망을 수행.

    P / S : 나는 이미지의 src 속성을 확인하고 있습니다 때. SRC에이 비어있는 경우, 소품 페이지 (잘못된)의 현재 URL 및 ATTR 반환 빈 문자열 (오른쪽)으로 돌아갑니다.

  15. 15.여기에 내가 다른 답변에 표시되지 않는 문제입니다.

    여기에 내가 다른 답변에 표시되지 않는 문제입니다.

    CSS 선택기 [NAME = 값]

    .prop ()는 단지 몇 속성 - 선택자에 영향을 미치는

    .attr () 모든 속성 - 선택기에 영향을 미치는

  16. 16.<스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"> <메타 캐릭터 = "UTF-8"> <제목> 소품 데모 <스타일> P { 여백 : 20 픽셀 0 0; } B { 파란색; } < "CHECK1"= 레이블> 나 확인

'JQUERY' 카테고리의 다른 글

[JQUERY] 에서는 event.preventDefault () 대 리턴 거짓  (0) 2020.09.20
[JQUERY] 어떻게 다른 웹 페이지로 리디렉션합니까?  (0) 2020.09.20
[JQUERY] 어떻게 비동기 적으로 파일을 업로드 할 수 있습니까?  (0) 2020.09.20
[JQUERY] 내가 jQuery를 배경이있는 경우 "AngularJS와의 생각"? [닫은]  (0) 2020.09.20
[JQUERY] 왜 내 자바 스크립트 코드가 수신 않는 '없음'액세스 제어 - - 원산지를 허용 '헤더가 요청 된 자원에 존재하는 "우체부하지 않는 동안, 오류?  (0) 2020.09.20
,

티스토리툴바