<jquery> .attr(), .prop()의 차이

 

jquery로 코딩을 하면서 한가지 의문이 발생했다.

값을 주는 중에 attr()과 prop()가 무슨 차이가 있냐는 것에 대한것이다.

차이점을 찾아보기 시작했다

 

---

 

jquery1.6에서 attr()로 하던 처리를 attr()과 prop()로 나눴다고 한다. 

원래 따로 만들어져 있어야 하는 기능이지만, 같이 사용하게 되면서 버그가 많아졌다고 한다.

javascript에서는 완전히 다른 두개이지만 jquery1.6 이후 부터 메서드가 일부 속성을 검색할 때 속성값을 고려하기에

이를 같은 것처럼 사용하고 있었다.

 

 

jquery를 알아보기 위해서 jQuery API Documentation 에 검색을 해보았다

 

 

---

 

 

 

1. attr() 메서드

- HTML의 속성(attribute)을 취급

- HTML으로서 기록되어 있는 속성의 내용(attribute 값)을 설정하거나 리턴(string 값)

- 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져 오거나,

    일치하는 모든 요소에 대해 하나 이상의 속성을 설정

 

 

- $(selector).attr(attribute)

- $(selector).attr(attribute, value)

- $(selector).attr(attribute, function(index, currentvalue)) 

- $(selector).attr({attribute:value, attribute:value, ...})

 

 

 

 

 

728x90

---

 

2. prop() 메서드

- javascript property를 취급한다.

- 선택된 요소의 속성과 값을 설정하거나 리턴합니다. 

- javascript의 property 값이 넘어오므로 boolean, date, function 등도 가져올 수 있습니다.

- 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져 오거나 일치하는 모든 요소에 대해 하나 이상의 속성을 설정합니다.

- prop () 메소드는 속성 값 (예 : tagName, nodeName, defaultChecked와 같은 DOM 속성 또는 사용자 정의 만든 속성)을 검색하는 데 사용해야합니다.

- HTML 속성을 검색하려면 대신 attr () 메소드를 사용합니다.

- 속성을 제거하려면 removeProp () 메서드를 사용합니다 .

 

 

- $(selector).prop(property)

- $(selector).prop(property,value)

- $(selector).prop(property,function(index,currentvalue))

- $(selector).prop({property:value, property:value,...})