해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: jQuery 속성 제어 API
여태껏 포스팅 했던 Element 의 API 에 해당하는 기능이,
jQuery에서는 어떻게 구사하는지에 대해서 알아보도록 하겠습니다.
속성제어
jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr입니다.
또한 removeAttribute에 대응되는 메소드로는 removeAttr이 있습니다.
<a id="target" href="http://opentutorials.org">opentutorials</a>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var t = $('#target');
console.log(t.attr('href')); //http://opentutorials.org
t.attr('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
t.removeAttr('title'); // title 속성을 제거한다.
</script>
위 그림과 같이 href 속성이 제대로 출력되는 것을 알 수 있습니다.
attribute와 property
DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분합니다.
위의 문장이 이해가지 않으시면, 제 바로 전 포스팅을 참고하시면 될 것 같습니다.
속성은 attr, 프로퍼티는 prop 메소드를 사용합니다.
<a id="t1" href="./demo.html">opentutorials</a>
<input id="t2" type="checkbox" checked="checked" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// 현재 문서의 URL이 아래와 같다고 했을 때
// http://localhost/jQuery_attribute_api/demo2.html
var t1 = $('#t1');
console.log(t1.attr('href')); // ./demo.html
console.log(t1.prop('href')); // http://localhost/jQuery_attribute_api/demo.html
var t2 = $('#t2');
console.log(t2.attr('checked')); // checked
console.log(t2.prop('checked')); // true
</script>
위와 같이 attr 과 prop 은 결과값이 차이가 납니다.
마치 Atrribute 방식과 Property 가 차이가 있는 것 처럼요.
그렇지만 jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해줍니다.
이런 것이 라이브러리를 사용하는 의의라고 할수 있겠죠.
<div id="t1">opentutorials</div>
<div id="t2">opentutorials</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#t1').prop('className', 'important');
$('#t2').prop('class', 'current');
</script>
$('#t1').prop('className', 'important');
$('#t2').prop('class', 'current');
를 보면 알 수 있듯, class 를 사용하나 className 을 사용하나
제이쿼리가 알아서 보정해줍니다.