속성 제어

속성제어

* Element 객체의 setAttribute, getAttribute에 대응되는 메소드 attr

* removeAttribute에 대응되는 메소드 removeAttr

<a id = "target" href="http://bravesuccess.tistory.com/">내 블로그</a>

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
var t = $('#target');
 // http://bravesuccess.tistory.com/
document.write(t.attr('href')); 
  
  // title 속성의 값을 설정한다.
t.attr('title', 'bravesuccess'); 
  
  // title 속성을 제거한다.
t.removeAttr('title'); 
</script>

속성과 프로퍼티

* JQuery에서 속성은 attr (Attribute 방식) 프로퍼티는 prop (Property 방식) 메소드를 사용한다.

<a id="t1" href="./demo.html">JQuery Test</a>
<input id="t2" type="checkbox" checked="checked" />
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script>


// 현재 문서의 URL이 아래와 같다고 했을 때
// http://localhost/jQuery_attribute_api/demo2.html
var t1 = $('#t1');
document.write(+t1.attr('href')); // ./demo.html <적혀있는 값 그대로를 반환>
document.write(t1.prop('href')); // http://localhost/jQuery_attribute_api/demo.html 
 
var t2 = $('#t2');
document.write(t2.attr('checked')); // checked
document.write(t2.prop('checked')); // true
</script>

* JQuery를 사용하면 property이름으로 어떤 것을 사용하던 올바른 것으로 교정해준다.

<div id="t1">opentutorials</div>
<div id="t2">opentutorials</div>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$('#t1').prop('className', 'important');     // className을 통해 접근
$('#t2').prop('class', 'current');          //원래 HTML 이름인 class로도 접근 가능
</script>