[ JavaScript ] 자바스크립트 기본 문법 | jQuery 속성 제어 API | attr , prop 차이

2021. 2. 7. 23:12·Archive/Develop
목차
  1. 자바스크립트 기본 문법  ::  jQuery 속성 제어 API
  2. 속성제어
  3. attribute와 property
728x90
반응형

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 


 

 

 

 

자바스크립트 기본 문법  ::  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>

 

 

 

 

 

 

위 그림과 같이 href 속성이 제대로 출력되는 것을 알 수 있습니다.

 

 

 

 

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>

 

 

위와 같이 attr 과 prop 은 결과값이 차이가 납니다.

 

마치 Atrribute 방식과 Property 가 차이가 있는 것 처럼요.

 

 

 

그렇지만 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>

 

 

$('#t1').prop('className', 'important'); 
$('#t2').prop('class', 'current');  

 

를 보면 알 수 있듯, class 를 사용하나 className 을 사용하나

 

제이쿼리가 알아서 보정해줍니다.

 

 

 

 

 

 

 

 

728x90
반응형

'Archive > Develop' 카테고리의 다른 글

[ JavaScript ] 자바스크립트 기본 문법 | Node 객체(childNodes, firstChild, lastChild, nextSibling...)  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | jQuery api 범위 제한 | jQuery find()  (0) 2021.02.08
[ JavaScript ] 자바스크립트 기본 문법 | 속성 API | Element.*Attribute(getAttribute,setAttribute...)  (0) 2021.02.07
[ JavaScript ] 자바스크립트 기본 문법 | 조회 API | getElementsBy  (0) 2021.02.07
[ JavaScript ] 자바스크립트 기본 문법 | 식별자 API | Element.tagName, Element.id, Element.className, Element.classList  (0) 2021.02.07
  1. 자바스크립트 기본 문법  ::  jQuery 속성 제어 API
  2. 속성제어
  3. attribute와 property
'Archive/Develop' 카테고리의 다른 글
  • [ JavaScript ] 자바스크립트 기본 문법 | Node 객체(childNodes, firstChild, lastChild, nextSibling...)
  • [ JavaScript ] 자바스크립트 기본 문법 | jQuery api 범위 제한 | jQuery find()
  • [ JavaScript ] 자바스크립트 기본 문법 | 속성 API | Element.*Attribute(getAttribute,setAttribute...)
  • [ JavaScript ] 자바스크립트 기본 문법 | 조회 API | getElementsBy
코뮤(commu)
코뮤(commu)
코딩으로 커뮤니케이션하는 코뮤입니다 😎
  • 코뮤(commu)
    코뮤(COMMU)
    코뮤(commu)
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Archive
        • Hacking
        • Develop
        • ETC
      • Algorithm
      • DB&Infra
      • ETC
      • Node
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • IT지식보따리
    • IT가 맛있다
    • IT 천재
  • 공지사항

    • 배고픕니다
  • 인기 글

  • 태그

    파이썬
    Django
    자바스크립트
    Codeup
    파이썬 기초
    Oracle
    백준 문제풀이
    파이썬 문제
    oracle db
    카카오 100일 프로젝트
    C++
    장고
    파이썬 알고리즘
    파이썬 기초 문제
    백준
    비박스
    백준 파이썬
    Python
    docker
    javascript
    보안뉴스
    Git
    오라클
    자바스크립트 객체
    파이썬 백준
    코드업 파이썬 기초 100제
    코드업
    백준 풀이
    자바스크립트 API
    코드업 기초
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
코뮤(commu)
[ JavaScript ] 자바스크립트 기본 문법 | jQuery 속성 제어 API | attr , prop 차이
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.