jQuery의 attr 및 prop_jquery 사용 소개-JS 튜토리얼-php.cn

jQuery의 attr 및 prop_jquery 사용 소개

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

풀어 주다： 2016-05-16 17:20:25

원래의

1263명이 탐색했습니다.

속성과 속성

속성과 속성은 모두 속성으로 번역될 수 있습니다. 차이점을 보여주기 위해 이 두 단어는 일반적으로 속성과 특성으로 번역됩니다.

여기를 클릭하세요

위의 HTML 문에는 요소 "div", 속성 "id", 텍스트 "여기를 클릭"이라는 세 가지 노드가 있습니다. 공식적으로는 속성 유형 노드를 참조하는 특별한 처리 방법이 있습니다. JavaScript의 속성. Function.getAttribute(name) / setAttribute(name,value). 물론 속성은 HTML 문서에서 볼 수 있는 것만이 아닙니다. 속성을 사용자 정의하고 DOM 노드에 추가할 수도 있습니다

코드 복사 코드는 다음과 같습니다.

);
t.setAttribute('customizedAttr','customized');

이렇게 하면 div를 다음과 같이 수정할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

123

setAttribute 메소드를 통해 설정된 속성은 결국 요소의 속성 유형 노드에 반영됩니다.

속성은 우리가 일반적으로 사용하는 일부 객체와 마찬가지로 많은 필드를 포함합니다. 이 필드는 "object.field"를 통해 일반 필드와 동일한 방식으로 값을 얻거나 설정할 수 있습니다.

속성과 속성이 서로 아무런 관련이 없는 것 같은데, 왜 그럴까요? . . 많은 속성 노드에도 해당 속성 속성이 있기 때문에 속성과 속성이 쉽게 혼동됩니다. 예를 들어 위 div의 "id" 속성은 t.id를 사용하여 얻을 수도 있습니다(실제로 대부분의 사람들은 이 방법으로 얻습니다). 속성을 통해 ID를 변경하면 getAttibute로 얻은 ID가 업데이트된 ID입니다.

코드 복사

코드는 다음과 같습니다.t.id='test1';콘솔 .log(t.getAttribute('id'));//test1

마찬가지로 속성을 맞춤 설정할 수도 있습니다

코드 복사

코드는 다음과 같습니다.t.customizedProp='customized prop';

차이

1. 내장 속성과 관련하여 속성 및 속성 공유 데이터는 속성이 변경되면 속성에 영향을 미치며, 그 반대의 경우도 마찬가지입니다. 동일하므로 서로 영향을 미치지 않습니다. 아래 그림과 같지만 IE6과 7 사이에는 차이가 없으며 여전히 사용자 정의 속성 데이터를 공유합니다

2. 모든 속성이 해당 속성 이름과 일치하는 것은 아닙니다. 예를 들어 방금 사용한 속성의 클래스 속성은 속성 작업 className을 사용할 때 이와 같아야 합니다.

코드 복사

코드는 다음과 같습니다.t.className='active2'; 3. 값이 true/false인 속성의 경우 input 등의 selected 속성과 유사하게 속성에서 얻은 값은 HTML 문서의 리터럴 값이 되며 해당 속성은 계산 결과를 가져옵니다. 속성의 리터럴 값에는 영향을 미치지 않지만 속성의 변경은 항상 속성을 계산합니다

코드 복사

코드는 다음과 같습니다. 다음:

코드 복사

코드는 다음과 같습니다.

var t=document.getElementById('test3');
        console.log(t.getAttribute('checked'));//null
        console.log(t.checked);//false;

        t.setAttribute('checked','checked');
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//true

        t.checked=false;
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//false

4. 对于一些和路径相关的属性，两者取得值也不尽相同，但是同样attribute取得是字面量，property取得是计算后的完整路径

复制代码代码如下:

Click

复制代码代码如下:

var t=document.getElementById('test4');
        console.log(t.getAttribute('href'));//#
        console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#

关于浏览器（IE）造成的兼容性问题可以看看IE 混淆了 DOM 对象属性（property）及 HTML 标签属性（attribute），造成了对 setAttribute、getAttribute 的不正确实现

attr和prop

相信看完上面内容，大家就明白为什么jQuery要添加prop方法了，在jQuery API中也有专门解释

Attributes VS. Properties

在一些特殊的情况下，attributes和properties的区别非常大。在jQuery1.6之前，.attr()方法在获取一些attributes的时候使用了property值，这样会导致一些不一致的行为。在jQuery1.6中，.prop()方法提供了一中明确的获取property值得方式，这样.attr()方法仅返回attributes。

比如，selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected应该使用.prop()方法获取/设置值。在jQuery1.6之前这些不属于attribute的property需要用.attr()方法获取。这几个并没有相应的attibute，只有property。

关于布尔类型 attributes，比如一个这样的HTML标签，它在JavaScript中变量名为elem

复制代码代码如下:

elem.checked	`true` (Boolean) Will change with checkbox state
$( elem ).prop( "checked" )	`true` (Boolean) Will change with checkbox state
elem.getAttribute( "checked" )	`"checked"` (String) Initial state of the checkbox; does not change
`$( elem ).attr( "checked" )` (1.6)	`"checked"` (String) Initial state of the checkbox; does not change
`$( elem ).attr( "checked" )` (1.6.1+)	`"checked"` (String) Will change with checkbox state
`$( elem ).attr( "checked" )` (pre-1.6)	`true` (Boolean) Changed with checkbox state

W3C 양식 사양에 따르면 check 속성은 부울 값입니다. 즉, selected 속성이 HTML에 표시되는 한 check에 값이 없더라도 해당 속성은 true여야 합니다. , 이것은 다른 부울 속성에도 동일하게 적용됩니다.

그러나 확인된 속성에 대해 가장 중요하게 기억해야 할 점은 확인된 속성과 동일하지 않다는 것입니다. 실제로 이 속성은 defaultChecked 속성과 일치하며 확인란의 초기 값을 설정하는 데에만 사용해야 합니다. selected 속성은 checkbox의 상태에 따라 변경되지 않지만 selected 속성은 변경됩니다. 따라서 브라우저 호환성을 이용하여 체크박스 선택 여부를 확인해야 합니다.

코드 복사 코드는 다음과 같습니다. :

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

이는 selected 및 value와 같은 다른 동적 속성에도 적용됩니다.

IE9 이전 버전에서는 DOM 요소가 제거되기 전에 속성이 삭제되지 않은 경우 .prop() 메서드를 사용하여 DOM 요소 속성의 값을 설정합니다(단순 유형 제외: 숫자, 문자열, 부울) )은 기억을 포기하게 만듭니다. DOM 객체의 값을 안전하게 설정하고 메모리 누수를 방지하려면 .data() 메서드를 사용할 수 있습니다.

사용 시나리오

사실 위에서 말한 내용을 이해합니다. 언제 .attr()을 사용해야 하고 언제 .prop()를 사용해야 할까요?