jQuery 속성 제어 API

지금까지 살펴본건 Element의 API에 해당되는것들이다.

앞으로는 jQuery의 API들을 알아보자.    

우리가 앞서 DOM에서 속성을 제어할땐

setAttribute(속성 값 설정), getAttribute(속성 값 가져오기) , removeAttribute(속성 값 삭제) 등을 이용했다.


이러한 DOM의 메소드들의 대응되는 jQuery메소드는 attr이다. (attribute의 준말이다.)

8행 : 속성값으로 id는 target  href는 "opentutorials.org"인 opentutorials 를 선언하고

11행 :   jQuery 함수를 통해 ID값이 target인 엘리먼트를 t에 저장

12행 :  jQuery객체 t의 메소드 attr를 통해 href를 인자로 전달, 즉 t의 href 출력
13행 :  jQuery객체 t의 메소드 attr을 통해 title속성을 opentutorials.org로 설정     , DOM의 setAttrubite와 같은 기능
14행 :  jQuery객체 t의 메소드 removeattr을 통해 title속성 삭제 ,         DOM의 removeAttribute와 같은 기능

DOM에선 속성(attribute)과 프로퍼티를 구분한다.
ex)

var target = document.getElementById('target');            

target.setAttribute('class','important');                //attribute방식 , class 속성을 important로 설정
target.className = 'important';                       //property방식 , class 속성을 important로 설정

이 둘을 구분할줄 알아야함.

DOM과 같이  jQuery또한 attribute방식과 property방식을 구분한다.

8행 : 속성 값 id와 href를 가진 opentutorials 
9행 : 속성 값 id를 가진 checked되어있는 check박스
12,13행 주석 참고
14행 : jQuery 함수를 통해 ID가 t1인 엘리먼트를 var t1에 저장
15행 : jQuery 객체 t1의 메소드 attr을 통해 href출력         ./demo.html 출력
16행 : jQuery 객체 t1의 메소드 pttr을 통해 href출력        http://localhost/jQuery_attribute_api/demo.html   전체 출력

15행과 16행의 차이 ( attr형식 , prop형식 ) 중요

19행과 20행 또한 마찬가지로 attr형식이나 prop형식이냐에 따라 return 값이 다름.

그러나 jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다.
(라이브러리의 장점중 하나!)