Att과 비교하여 Prop는 1.6.1에서 새롭습니다. 둘 다 중국의 의미에서 이해되며 속성 (속성 및 속성)을 얻는 방법입니다. 창이나 문서에서 .attr () 메소드를 사용하면 jQuery 1.6 이전에는 정상적으로 실행할 수 없다는 것입니다. 창과 문서에는 속성이 없기 때문입니다. 소품이 존재했다.
우리는 그들 사이의 차이점을 알고 싶어하기 때문에 소스 코드를 보는 것이 가장 좋습니다. 코드의 길이는 무서워하지 않습니다. 주요 문장 만 살펴 보겠습니다.
attr : function (elem, name, value, pass) {var ret, hooks, notxml, ntype = elem.nodeType; // 텍스트, 댓글 및 속성 노드에서 속성을 가져 오지 마십시오. if (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } if (pass && jquery.isfunction (jquery.fn [name])) {return JQuery (elem) [이름] (value); } // 속성이 지원되지 않을 때 소품으로의 폴백 (elem.getAttribute === "undefined") {return jquery.prop (elem, name, value); } notxml = ntype! == 1 || ! jquery.isxmldoc (elem); // 모든 속성은 소문자입니다. // (notxml) {name = name.tolowercase (); hooks = jQuery.attrHooks [이름] || (rboolean.test (name)? boolhook : nodehook); } if (value! == undefined) {if (value === null) {jquery.removeattr (elem, name); 반품; } else if (hooks && "set"in hooks && notxml && (ret = hooks.set (elem, value, name))! == undefined) {return return; } else {elem.setAttribute (이름, value + ""); 반환 값; }} else if (hooks && "get"in hooks && notxml && (ret = hooks.get (elem, name))! == null) {return ret; } else {ret = elem.getAttribute (이름); // 존재하지 않는 속성 return null, 우리는 정의되지 않은 return ret === null을 정상화합니다. 정의되지 않은 : ret; }}소품 메소드 코드 (jQuery 버전 1.8.3)
소품 : 함수 (elem, 이름, 값) {var ret, hooks, notxml, ntype = elem.nodeType; // 텍스트, 주석 및 속성 노드에서 속성을 가져 오지 마십시오. if (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } notxml = ntype! == 1 || ! jquery.isxmldoc (elem); if (notxml) {// 이름을 고정하고 후크 이름을 첨부하고 jquery.propfix [name] || 이름; hooks = jquery.prophooks [이름]; } if (value! == undefined) {if (hooks && "set"in hooks && (ret = hooks.set (elem, value, name))! == undefined) {return ret; } else {return (elem [name] = value); }} else {if (hooks && "get"in hooks && (ret = hooks.get (elem, name))! == null) {return ret; } else {return elem [이름]; }}}att
PROP 메소드에서 가장 중요한 코드 라인 인 RETURN (elem [name] = value) 및 return elem [name]은 js 객체로 변환 된 속성 인 hocep.getElementById (el) [name] = value로 이해할 수 있습니다.
우리는 원칙을 이해하기 때문에 예를 살펴 보겠습니다.
<input type = "checkbox"id = "test"abc = "111" />
$ (function () {el = $ ( "#test"); console.log (el.attr ( "style")); // undefined console.log (el.prop ( "style")); // cssstyledeclaration 객체 console.log (document.getElementById ( "test");el.attr ( "style")는 attr가 얻은 객체 속성 노드의 값이기 때문에 정의되지 않은 출력을 출력합니다. 분명히 현재 속성 노드는 없으므로 자연 출력이 정의되지 않습니다.
el.prop ( "스타일")은 csstyledeclaration 객체를 출력합니다. DOM 객체의 경우 기본 스타일 객체 속성이 있으므로 스타일 객체가 출력됩니다.
document.getElementByid ( "테스트"). 스타일은 위의 것과 동일합니다.
다음 모습 :
el.attr ( "abc", "111") console.log (el.attr ( "abc")); // 111 console.log (el.prop ( "abc")); //한정되지 않은
먼저, att
el.attr ( "ABC") 출력은 111이며, 이는 정상입니다
ABC 가이 속성 노드에 있기 때문에 el.prop ( "ABC") 출력을 정의하지 않으므로 소품을 통해 검색 할 수 없습니다.
el.prop ( "ABC", "222"); console.log (el.attr ( "abc")); // 111 console.log (el.prop ( "abc")); // 222
그런 다음 PROP 방법을 사용 하여이 객체의 ABC 속성을 222로 설정합니다. HTML의 구조가 변경되지 않았 음을 알 수 있습니다. 출력 결과는 설명되지 않습니다.
위의 내용은 원칙을 명확하게 설명했으며 자신이 사용하는 것을 파악할 수 있습니다.
점검, 선택, 읽기 및 비활성화와 같은 속성을 만나면 다음과 같은 소품 방법을 사용하는 것이 좋습니다.
<input type = "checkbox"id = "test"checked = "Checked" />
Console.log (el.attr ( "Checked")); // checked console.log (el.prop ( "Checked")); // true console.log (el.attr ( "disabled")); // 정의되지 않은 console.log (el.prop ( "disabled")); //거짓
분명히 부울 값은 다음 처리가 문자열 값보다 더 합리적입니다.
추신. JS Performance Cleanfiness가있는 경우 Att은 DOM 속성 노드에 액세스해야하므로 DOM에 액세스하는 것이 가장 시간이 많이 걸리기 때문에 분명히 소품 성능이 높습니다. 이 상황은 여러 옵션 및 선택되지 않은 시나리오에 적용됩니다.
일부 브라우저는 장애인 및 점검 만 작성하면되지만 다른 브라우저는 장애인 = "Disabled", Checked = "Checked"를 작성해야한다는 것을 알고 있습니다. 예를 들어, attr ( "Checked")를 사용하여 확인란의 확인 된 속성을 얻을 때 선택할 때 값을 얻을 수 있습니다. 값은 "확인"되지만 선택하지 않으면 정의되지 않습니다.
JQ는 이러한 특성을 얻기위한 새로운 방법 "prop"를 제공하며, 이는이 문제를 해결하기위한 것입니다. 과거에는 attr을 사용하여 확인 된 속성을 얻었고 "Checked"및 "" "를 반환했지만 이제는 소품 방법을 사용하여 속성을 얻고 True and False를 반환했습니다.
그렇다면 언제 attr ()를 사용하고 prop ()를 사용하는시기?
1. 속성 이름을 추가하십시오. 이 속성은 적용됩니다. prop ()를 사용해야합니다.
2. 참조와 거짓 사용 prop ()가있는 두 가지 속성이 있습니다.
3. 다른 사람을 위해 attr ()를 사용하십시오.
프로젝트에서 jQuery를 업그레이드 할 때 모두가 이것에주의를 기울여야합니다!
다음은 attr () 및 prop () 사용을위한 공식 제안입니다.
다음은 attr () 및 prop () 사용을위한 공식 제안입니다.