웹브라우저 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. 코리니
    20230103
  2. 헤밍웨이
    220825 jQuery attr 와 prop
  3. 임앤강
    2022-02-10 수강하였습니다.
  4. 드림보이
    2021.12.23. jQuery 속성 제어 API 파트 수강완료
  5. labis98
    20210911 좋은 강의 감사합니다.
  6. 박병진
    2020.12.05 완료
  7. anne
    완료
  8. 정승옥
    완료
  9. 한강
    JQuery 속성제어 attr, prop 잘 배웠습니다~~^^!
  10. 김진욱
    완료
  11. Useok
  12. ㅎㅅㅁ
    200208 화이팅
  13. guest
    done
  14. 굼벵이
    완료
  15. 모든일이일사천리
    Done : 19-11-14 8PM
  16. Newbiecoder
    이고잉님이 5년 전에 만드신 강의에서 큰 감명을 받고 있습니다. jQuery 가 다른 걸로 대체될 수 있다고 처음 jQuery 수업에서 언급하신걸로 알고 있는데 그때부터 조짐이 보인 것인지 요새는 jQuery가 크게 하락세이네요. React로 대체하면 더 좋을 것 같습니다. 물론 React 역시 앞으로 다른 것으로 대체되겠지만. 아무튼 전체 강의의 줄기가 바닐라 자바스크립트여서 5년이 지난 지금도 보기에 아주 적당한 것 같습니다. 이고잉님의 혜안에 감탄하고 갑니다. 추가로 바닐라 자바스크립트가 이전과는 다르게 아주 예쁜 코드가 되고 백엔드 프론트 모두에서 사용이 가능해지면서 인기도 급상승하고 현재 파이썬과 함께 탑2를 이루고 있는 것 같은데 점점 예쁜 코드를 가진 언어가 상위권에 위치할 것 같네요. 개인적으로 파이썬보다는 자스를 다 선호하지만...^^
  17. 2019-10-14 9:48pm 완료
  18. 미완성
    20190109
  19. JuicyFresh
    감사합니다.
  20. 박인호
    12-29
    수강완료.
    jQuery는 여러모로 편리한 녀석이네요.
  21. 개발자가 되고싶은 고등학생
    제이쿼리는 정말 편리한 것이란 걸.. 또 느꼈다.
  22. Byungsoo Kim
    감사합니다.
  23. 수복
    감사합니다.
  24. $('#target') 자체는 jQuery객체를 리턴합니다. (유사배열이라고 합니다)
    리턴한 객체의 요소, $('#target')[0] 과 같은 놈들이 DOM 객체입니다.
    대화보기
    • Dong Il Kim
      제가 생각해도 배우는 사람의 마음 가짐이 가장 중요한것 같습니다. 모든 사람이 처한 상황이 다르듯이 마음 가짐에 따라서 공부에 임하는 마음도 다르겠죠. 필요에 의해서 배우면 바로 써먹어야해서 몇번을 더 연습하기도 하고 질문 하기도 하고, 반복하기도 합니다. 일단 배우고 나중에 하지 뭐.. 하는 마음 편히 먹는 사람은(저도 그랬지만) 역시... 안되더군요.;;;;
      대화보기
      • 시금치
        저도 비슷한 상황입니다.
        희한하게도 알면 알수록 더 힘듭니다.

        제가 시골에서 어르신들 엑셀수업을 수년째 하고 있는데,
        수업 전체를 여러번 들으신 분께
        문서를 보여드리고 작업하시라고 하면 거의 못하십니다.
        예제를 따라하면서 수업을 듣고 있으면 쉽게 느껴지고 다 알것만 같은데
        막상 뭔가 만드려고 하면 혼란과 혼돈 그자체입니다.

        제가 여기서 깨달은 것은 훈련입니다.
        작은 프로젝트를 만들어서 지속적으로 작업하는 훈련이요,,
        이고잉님이 개인프로젝트를 만들라고 하신게 이런 의미가 아닐까요?

        처음엔 시간도 엄청 걸리고 두서도 없고 짜증납니다.

        두번째엔 계획을 세우게 되더라구요,
        머리속에서부터 여러가지 정보가 뒤섞이면 피곤하니까...

        여튼, 엄청난 노력이 필요한것같습니다.

        이렇게 적어놓으니 뭔가를 이룩한 사람 같습니다만,
        저도 사실 님과 같은 상황이고, 좌절과 시도를 계속 반복중입니다.
        대화보기
        • ckr567
          강좌를 보면서 처음으로 질문합니다.
          var t = $('#target');
          하면 t 담겨있는 객체는 jQuery 객체가 아니라 DOM 객체라고 하시지 않았나요?
          jQuery 객체 파트에서요...
          그래서 jQuery 메소드를 사용할때 css 부분을 바꾼다고 하면
          $(t).css('color', 'red'); 이렇게요 갑자기 뭔지 모르겠네요 ㅠ
        • Sangmook Kim
          170801 완료
        • crable
          감사합니다.
        • 197175
          슬슬 재미있어 지네요 ~ ㅎ 감사합니다.
        • 화이팅
          밑의 분들은 직접 로컬서버 구축하시고, 일단 간단한 홈페이지 하나를 통으로 베껴보는 연습을 하시면 좋을 것 같아요.
          저도 실제로 하고 있구요. 직접 써보는게 가장 좋은 연습 방법이 되지 않을까 싶습니다.
        • 준맹
          저랑 같습니다..... 진짜 완전 똑같아요...
          대화보기
          • 그동안 웹 애플리케이션만들기, html. css, 웹브라우저 자바스크립트를 공부하고 있는데 언제쯤 웹페이지 개발이 가능할 지 까마득 합니다. 배울수록 기능은 많아지고 내가 뭘 알고 뭘 모는지도 구분이 안될 만큼 복잡해지고 있습니다.
          • codeX
            감사합니다~
          • mick
            './'는 현재 접속한 페이지가 위치하는 디렉토리를 의미하고,'72'는 그 디렉토리의 파일을 의미합니다. 즉 './72'는 현재 접속한 디렉토리에 있는 파일 72를 의미한다는 것

            라고 되어있네요

            자세한 부분은

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

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

              여기서 ./ 이건 무슨뜻인가요?
              ../demo.html 와는 다른 건가요?
            • 폭스킴
              고마워~ 똑똑한 jquery ^^
            • 유유
              감사합니다!
            • hyuna
              감사합니다
            • 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!!!
            • 릴마블
              앙양양양 릴마블이당~
            • 코딩!
              감사합니다!
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기