[jQuery] 제이쿼리 attr

 

jquery .attr() 

 

attr()은 attribute의 값을 가져오거나 속성을 추가하는 메소드 입니다.

 

 

사용법 1 요소의 속성의 값을 가져올 때

$(요소).attr(가져올 속성의 값);

//ex ) $('div').attr('id'); == div의 id값을 가져옵니다.

var get_Id = $('div').attr('id');
console.log(get_Id);

 

사용법 2 요소의 속성의 값을 추가해 줄 때

$(요소).attr('속성', '값');

//ex ) $('div').attr('id','main_div'); == div의 id값은 'main_div'로 바꾸거나 추가해 줍니다. 

$('div').attr('id','main_div');
var get_Id = $('div').attr('id');
console.log(get_Id);

 

 

제이쿼리 없이 자바스크립트만 이용하고 싶다면

document.getelementbyid('id').hasAttribute(name) — 속성의 존재 확인
document.getelementbyid('id').getAttribute(name) — 속성값 가져옴
document.getelementbyid('id').setAttribute(name, value) — 속성값 변경
document.getelementbyid('id').removeAttribute(name) — 속성값 제거함

 

hasAttribute(존재여부), getAttribute(값 가져오기), setAttribute(변경), reomoveAttribute(제거)를 사용해야 됩니다.

 

제이쿼리를 사용한다면 .attr()하나로 제어가 가능하지요 

 

결과

See the Pen jQuery .attr() by 윤재현 (@jh91) on CodePen.

 

F12를 눌러 개발자 모드에 들어가보면 div와 p에 Id와 class가 적용되어 있는 것을 확인할 수 있다