JS의 attr 속성과 prop 속성의 차이점과 우선순위 선택 예시 소개

JS의 attr 속성과 prop 속성의 차이점과 우선순위 선택 예시 소개_기본지식

WBOY

풀어 주다： 2016-05-16 16:42:51

원래의

1334명이 탐색했습니다.

attr과 비교하면 prop은 1.6.1에서 새로 추가되었습니다. 둘 다 중국어 의미로 이해되며 둘 다 속성(속성 및 속성)을 가져오거나 설정하는 방법입니다. 하지만 jQuery 1.6 이전 버전에서는 윈도우나 문서에서 사용하는 .attr() 메소드가 윈도우나 문서에 속성이 없기 때문에 제대로 실행되지 않습니다. 소품이 생겼습니다.

우리는 이들 간의 차이점을 알고 싶으므로 소스 코드를 살펴보는 것이 가장 좋습니다. 코드 길이에 겁먹지 말고 몇 가지 핵심 문장만 살펴보겠습니다.

attr: function( elem, name, value, pass ) { 
var ret, hooks, notxml, 
nType = elem.nodeType; 
// don't get/set attributes on text, comment and attribute nodes 
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
return; 
} 
if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) { 
return jQuery( elem )[ name ]( value ); 
} 
// Fallback to prop when attributes are not supported 
if ( typeof elem.getAttribute === "undefined" ) { 
return jQuery.prop( elem, name, value ); 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
// All attributes are lowercase 
// Grab necessary hook if one is defined 
if ( notxml ) { 
name = name.toLowerCase(); 
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) &#63; boolHook : nodeHook ); 
} 
if ( value !== undefined ) { 
if ( value === null ) { 
jQuery.removeAttr( elem, name ); 
return; 
} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { 
return ret; 
} else { 
elem.setAttribute( name, value + "" ); 
return value; 
} 
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { 
return ret; 
} else { 
ret = elem.getAttribute( name ); 
// Non-existent attributes return null, we normalize to undefined 
return ret === null &#63; 
undefined : 
ret; 
} 
}

로그인 후 복사

prop 메서드 코드(jQuery 버전 1.8.3)

prop: function( elem, name, value ) { 
var ret, hooks, notxml, 
nType = elem.nodeType; 
// don't get/set properties on text, comment and attribute nodes 
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { 
return; 
} 
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); 
if ( notxml ) { 
// Fix name and attach hooks 
name = jQuery.propFix[ name ] || name; 
hooks = jQuery.propHooks[ name ]; 
} 
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[ name ]; 
} 
} 
}

로그인 후 복사

attr 메소드에서 가장 중요한 코드 두 줄은 elem.setAttribute(name, value "") 및 ret = elem.getAttribute(name)입니다. DOM API setAttribute 및 getAttribute 메소드 작업이 사용되는 것은 분명합니다. . 속성 요소 노드.
prop 메소드에서 가장 중요한 코드 두 줄은 return (elem[ name ] = value ) 와 return elem[ name ] 입니다. document.getElementById(el)[name] = value 는 다음과 같습니다. 객체의 JS A 속성으로 변환됩니다.

이제 원리를 이해했으니 예를 살펴보겠습니다.

<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").style); //CSSStyleDeclaration对象 
});

로그인 후 복사

el.attr("style")은 undefed를 출력합니다. attr은 획득한 이 객체의 속성 노드 값이기 때문입니다. 당연히 현재로서는 그러한 속성 노드가 없으므로 자연스럽게 undefound가 출력됩니다.
el.prop("style")은 CSSStyleDeclaration 객체를 출력합니다. DOM 객체의 경우 기본 스타일 객체 속성이 있으므로 스타일 객체
가 출력됩니다. document.getElementById("test").style은 위와 동일합니다

계속 읽어보세요:

el.attr("abc","111") 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //undefined

로그인 후 복사

먼저 attr 메소드를 사용하여 이 객체에 abc 노드 속성을 값 111로 추가합니다. HTML의 구조도 변경된 것을 볼 수 있습니다

el.attr("abc")의 출력 결과는 111이며 이는 정상입니다
el.prop("abc")는 abc가 이 속성 노드에 있기 때문에 정의되지 않은 결과를 출력하므로 prop

을 통해 얻을 수 없습니다.

el.prop("abc", "222"); 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //222

로그인 후 복사

그런 다음 prop 메소드를 사용하여 이 객체의 abc 속성을 값 222로 설정합니다. HTML의 구조가 변경되지 않은 것을 볼 수 있습니다. 출력 결과는 설명되지 않습니다.

원리는 위에 명확하게 설명되어 있으므로 언제 사용할지 스스로 결정할 수 있습니다.

선택됨, 선택됨, 읽기 전용 및 비활성화와 같은 속성을 가져오거나 설정하려면 다음과 같은 prop 메서드를 사용하는 것이 분명히 더 좋습니다.

<input type="checkbox" id="test" checked="checked" />

로그인 후 복사

console.log(el.attr("checked")); //checked 
console.log(el.prop("checked")); //true 
console.log(el.attr("disabled")); //undefined 
console.log(el.prop("disabled")); //false

로그인 후 복사

분명히 부울 값은 문자열 값보다 다음 처리를 더 합리적으로 만듭니다.

PS, JS 성능에 집착한다면 attr이 DOM 속성 노드에 액세스해야 하고 DOM에 액세스하는 데 가장 시간이 많이 걸리기 때문에 prop의 성능은 확실히 더 높습니다. 이 상황은 다중 옵션 전체 선택 및 역선택 상황에 적용됩니다.

일부 브라우저는 비활성화됨과 확인됨만 작성하면 되는 반면, 다른 브라우저에서는 체크박스의 확인됨 속성을 가져오기 위해 attr("checked")를 사용할 때와 같이 비활성화 = "비활성화", 확인됨="체크됨"으로 작성해야 한다는 것을 누구나 알고 있습니다. 선택하면 값을 얻을 수 있습니다. 값은 "체크"되지만 선택하지 않을 때 얻은 값은 정의되지 않습니다.

jq는 이 문제를 해결하기 위해 이러한 속성을 가져오는 새로운 메소드 "prop"를 제공합니다. 과거에는 checked 속성을 가져오기 위해 attr을 사용할 때 이제 prop을 사용할 때 "checked"와 ""를 반환했습니다. 속성을 가져오는 메서드를 사용하면 true와 false를 균일하게 반환합니다.

그럼 언제 attr()을 사용하고 언제 prop()을 사용합니까?
1. 속성 이름을 추가하면 속성이 적용됩니다. prop();
을 사용해야 합니다. 2. prop()을 사용하면 true와 false 두 가지 속성이 있습니다.
3. 다른 경우에는 attr();
을 사용하세요. 프로젝트에서 jquery를 업그레이드할 때 모두가 이 점에 주의해야 합니다!

다음은 attr() 및 prop() 사용에 대한 공식적인 권장 사항입니다.