웹브라우저 JavaScript

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>

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>

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>

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다!
  2. 감사합니다
  3. tachyon
    감사합니다
  4. yihsang
    강의를 통해 jQuery에서도 attribute방식, property방식이 있는 걸 알았습니다.
    그리고 내부적으로 프로퍼티이름이든 속성이름을 사용한던지 보정이 된다는 것.
    감사합니다.
  5. JustStudy
    2016.07.08 금
    고맙습니다 3.
  6. JustStudy
    2016.06.30
    고맙습니다 2.
  7. 김꾸꾸
    brooklyn//
    저도 같은 부분이 헷갈려서 다시 이전 강의를 들었었는데
    jQuery object를 한 변수에 담으면 그 변수도 jQuery object를 가지고 있는게 맞습니다.
    다만 저번 수업은, jQuery Object가 유사배열을 가지고 있을 경우 그 유사배열의 한 객체가 DOM Object인 것 같네요
    예를들면,
    var li = $('li'); 일 때
    li는 jQuery object이고 li[0], li[1], li[2] ...는 DOM object인 거죠
    만약, li[1]에 jQuery 함수(.css , .attr 과 같은 함수) 를 쓰고 싶으면 $()로 감싸주어서 jQuery 함수를 쓸 수 있게 하는거고

    var t = $('#target');
    console.log(t.attr('href')); //http://opentutorials.org
    과 같은 경우는 변수 t 가 jQuery Object이므로 .attr 함수를 바로 사용할 수 있는 것 같네요

    제가 이해한 부분에 잘못된 점이 있으면 말씀 주시면 감사하겠습니다 ^^
  8. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  9. 이주환
    2016. 04. 27
    잘보고갑니다~!
  10. JustStudy
    고맙습니다
  11. WayneKing
    Go!!!
  12. 릴마블
    앙양양양 릴마블이당~
  13. 코딩!
    감사합니다!
  14. ljs93kr
    // brooklyn님
    jQuery를 담은 변수가 무조건 DOM이 되는것이 아니지 않나요?
    $('#target'); 으로 찾은 객체는 아이디로 찾은 객체이기 때문에 jQuery 객체일 것이고, 따라서 $()로 다시 묶어줄 이유가 없을 것 같습니다.
    brooklyn 님께서 헷갈리시는건 혹시 $('클래스');로 찾았을때, 여러개의 객체 각각은 jQuery가 아니라 DOM객체라는 그전 수업때문이지 않을까 싶네요.
    대화보기
    • brooklyn
      아 넵 방랑객님 감사합니다!

      제가 궁금한건 Jquery를 담은 변수(DOM)가 어떻게 $()없이 attr 함수를 사용할 수 있는가 였습니다. ㅜㅠ
      attr은 제이쿼리 함수다보니, 묶어줘야 할 거 같았거든요 ㅠㅜ
      대화보기
      • 방랑객
        brooklyn// 맞게 이해하시고 있는거 같구요.. 그 이전 상황에서는 DOM이랑 jquery 를 섞어서 보여주는 수업이었고
        이번 수업은 jquery만 이용해서 보여주는 수업이라 그런 차이가 있는 거 아닐까 싶습니다만?
        대화보기
        • brooklyn
          살짝 헷갈리는게 있습니다. 분명 제가 잘못알고 있는 거 같은데, 자료를 찾아도 답을 몰라 여쭙니다 ㅜㅠ

          var t = $('#target');
          console.log(t.attr('href')); //http://opentutorials.org

          예전 수업에서 Jquery는 변수로 담아낼 때, 그 변수는 Jquery가 아닌 DOM이다. 저는 이렇게 이해했습니다.
          그래서 다음 함수를 진행할 때는 그 변수를 다시 $()이렇게 묶어줘야 하는 걸로 알고 있었는데.

          이번 id를 묶을 때는 변수로 담아내면서도 부드럽게 Jquery 함수를 가동하는게 어떻게 가능한지 궁금합니다...
        • 육점이
          뻐꾸기2 님의 외우는 방식 좋네요!! 프숨실 프숨실 댓글기능이 있으니 계속 보이시는 분들이랑 함께 공부하고 있는 느낌이 들어 좋습니다!! 감사합니다!!!
        • 민팀장
          ㅎㅎ 그방법 좋네요.. 잘외워지고..
        • 뻐꾸기2
          어트리뷰트방식은 보이는 것(코드에 적혀 있는 것)...(외우는 방법)"어"떻게 "적혀" 있지?
          "프"라퍼티방식은 "숨"어있는 것("실"제값) ---> (외우는 방법)"프숨실" "프숨실"
        • 김규빈
          아버지
        • 팽맨이러닝
          Attribute 방식은 메소드를 사용하는 것 같고
          Property 방식은 변수의 값을 직접 변경하는 방식같이 보여지네요.
        • 팽맨이러닝
          첫번째 강의의 요점은

          Element를 제어하는 메소드가 있고
          JQuery가 사용하는 메소드가 있다는 것 같네요.

          2가지 방법 중에 상황에 더 적절한 걸 사용하는 것이 올바르겠지요?
          보통은 JQuery 메소드가 더 편할 것 같다고 추측되네요.
        • 규빈이아빠
          훌륭한 강의입니다^^
        • 코딩코코
          감사 합니다 ~ 오늘도 한바탕 배움을 즐기고 가네요 ~~~
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기