웹브라우저 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. crable
    감사합니다.
  2. 197175
    슬슬 재미있어 지네요 ~ ㅎ 감사합니다.
  3. 화이팅
    밑의 분들은 직접 로컬서버 구축하시고, 일단 간단한 홈페이지 하나를 통으로 베껴보는 연습을 하시면 좋을 것 같아요.
    저도 실제로 하고 있구요. 직접 써보는게 가장 좋은 연습 방법이 되지 않을까 싶습니다.
  4. 준맹
    저랑 같습니다..... 진짜 완전 똑같아요...
    대화보기
    • 그동안 웹 애플리케이션만들기, html. css, 웹브라우저 자바스크립트를 공부하고 있는데 언제쯤 웹페이지 개발이 가능할 지 까마득 합니다. 배울수록 기능은 많아지고 내가 뭘 알고 뭘 모는지도 구분이 안될 만큼 복잡해지고 있습니다.
    • 감사합니다~
    • './'는 현재 접속한 페이지가 위치하는 디렉토리를 의미하고,'72'는 그 디렉토리의 파일을 의미합니다. 즉 './72'는 현재 접속한 디렉토리에 있는 파일 72를 의미한다는 것

      라고 되어있네요

      자세한 부분은

      https://opentutorials.org....../72 참고하시면될것 같습니다

      이고잉님이 댓글 다신 부분이 더 알기 쉬울것 같습니다.
      대화보기
      • 강의 감사합니다!
        질문이 있는데요
        console.log(t1.attr('href')); // ./demo.html

        여기서 ./ 이건 무슨뜻인가요?
        ../demo.html 와는 다른 건가요?
      • 폭스킴
        고마워~ 똑똑한 jquery ^^
      • 유유
        감사합니다!
      • 감사합니다
      • tachyon
        감사합니다
      • yihsang
        강의를 통해 jQuery에서도 attribute방식, property방식이 있는 걸 알았습니다.
        그리고 내부적으로 프로퍼티이름이든 속성이름을 사용한던지 보정이 된다는 것.
        감사합니다.
      • JustStudy
        2016.07.08 금
        고맙습니다 3.
      • JustStudy
        2016.06.30
        고맙습니다 2.
      • 김꾸꾸
        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 함수를 바로 사용할 수 있는 것 같네요

        제가 이해한 부분에 잘못된 점이 있으면 말씀 주시면 감사하겠습니다 ^^
      • 온달장군
        강좌 잘보고 갑니다. 감사합니다.
      • 이주환
        2016. 04. 27
        잘보고갑니다~!
      • JustStudy
        고맙습니다
      • WayneKing
        Go!!!
      • 릴마블
        앙양양양 릴마블이당~
      • 코딩!
        감사합니다!
      • 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 자세히 보기