웹브라우저 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. Byungsoo Kim
    감사합니다.
  2. 수복
    감사합니다.
  3. $('#target') 자체는 jQuery객체를 리턴합니다. (유사배열이라고 합니다)
    리턴한 객체의 요소, $('#target')[0] 과 같은 놈들이 DOM 객체입니다.
    대화보기
    • 신시내티
      https://codepen.io/pens/

      여기 가보시면, 사람들이 HTML,CSS,JS로 자기가 연습해본 예제들이랑 코드들이랑 같이 올려놔요.

      가서 보시면 재밌어요.
      대화보기
      • 신시내티
        var t = $('#target');
        위의 var t는 제이쿼리함수 $();랑 타겟이라는 아이디를 다 포함해서 묶어버린거예요.

        그래서
        t.css('color', 'red'); 에서 달러싸인은 빠지는 거예요.

        t 자체가 제이쿼리함수를 갖고 있는 보따리니까요.

        var t = $('#target'); 라면
        t.css('color', 'red')는 $('#target').css('color', 'red') 과 같아요.
        대화보기
        • Dong Il Kim
          제가 생각해도 배우는 사람의 마음 가짐이 가장 중요한것 같습니다. 모든 사람이 처한 상황이 다르듯이 마음 가짐에 따라서 공부에 임하는 마음도 다르겠죠. 필요에 의해서 배우면 바로 써먹어야해서 몇번을 더 연습하기도 하고 질문 하기도 하고, 반복하기도 합니다. 일단 배우고 나중에 하지 뭐.. 하는 마음 편히 먹는 사람은(저도 그랬지만) 역시... 안되더군요.;;;;
          대화보기
          • 시금치
            저도 비슷한 상황입니다.
            희한하게도 알면 알수록 더 힘듭니다.

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

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

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

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

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

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

                라고 되어있네요

                자세한 부분은

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

                이고잉님이 댓글 다신 부분이 더 알기 쉬울것 같습니다.
                대화보기
                • 강의 감사합니다!
                  질문이 있는데요
                  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!!!
                • 릴마블
                  앙양양양 릴마블이당~
                • 코딩!
                  감사합니다!
                • 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 자세히 보기