jQuery 속성 관리 data() 와 attr() 사용법 및 차이

data()

1. 속성 추가

- $(selector).data(key, value)

key는 string type의 변수로 말 그대로 데이터가 저장될 key 값이다.

value는 object type으로 javascript에서 지원하는 모든 type의 데이터를 저장할 수 있다.

2. 속성 가져오기

- $(selector).data(key)

key는 위에서 저장한 데이터를 가져오기 위한 key 값이다.

key를 생략하여 .data()로 사용도 가능하며, 결과는 해당 엘리먼트에 저장된 모든 데이터들이 JSON 형식으로 나온다.

3. 속성 삭제

- $(selector).removeData(key)

key는 string type으로 삭제할 데이터의 key값이다.

attr()

1. 속성 추가

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

key는 string type의 변수로 말 그대로 데이터가 저장될 key 값이다.

2. 속성 가져오기

- $(selector).attr(key)

key는 위에서 저장한 데이터를 가져오기 위한 key 값이다.

리턴 값의 형식은 string 타입이다.

3. 속성 삭제

- $(selector).removeAttr(key)

key는 string type으로 삭제할 데이터의 key값이다.

data()와 attr() 정리 및 차이

data()	attr()
파라미터로 오브젝트로 받을 수 있다. 즉, 엘리먼트의 속성으로 추가되는 것이 아니라,  jQuery 객체의 속성으로 들어간다.	html 엘리먼트의 속성으로 추가된다.
data()를 통해 값을 가져오면 실제 자료형이 적용된다.	attr()을 통해 값을 가져오면 string 타입으로 가져온다.