attr() / prop() / get()

• HTML 요소의 속성이나 속성 값을 조작
• jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다
• 이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다

 

attr()

1.  개념

• HTML에 작성된 속성값을 문자열로 받아온다

 

 

2.  형식

• 속성값 가져오기

var 변수명 = $("요소").attr("속성이름");  // 속성이름 : 꺼내오는거

 

• 속성값 넣기

$("요소").attr("속성이름", "값"); // 값 : 넣는거

 $("요소").attr({
    "속성1이름": "값",
    "속성2이름": "값",
    "속성3이름": "값"
});

 

.attr()을 사용하면 전체 선택/전체 해제가 잘 된다

하지만 전체 선택 후 부분적으로 해제하면 전체 선택/ 전체 해제가 제대로 안된다

>> 해결방법 : .prop

 

 

 

prop()

1.  개념

• 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가
• 자바스크립트의 프로퍼티를 가져온다 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다
• 자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있다

 

2.  형식

• 속성값 가져오기

$("요소").prop("속성이름")

 

• 속성값 넣기

$("요소").prop("속성이름", "값")

 

console.log('check = ' + check.prop('tagName')); // INPUT

 

여기서 console.log('check = ' + check.tagName); 이라고 하면 undefined 이라고 뜬다

 

해결방법

console.log('check = ' + check.prop('tagName')); 하던가

console.log('check = ' + check.get(0).tagName); 해야한다

 

이유

제이쿼리 선택자는 제이쿼리 객체로 묶어버려서 object 형식으로 나타난다

그래서 제이쿼리 선택자에서 DOM으로 다시 접근한 다음 지정해줘야 제대로 된 접근된다

console.log('check = ' + check.get(0).tagName); get을 이용해서 DOM에 접근해야한다

 

 

 

.get()

1.  개념

• .get()메서드는 각 jQuery 개체의 기본이 되는 DOM 노드에 대한 액세스 권한 부여
• .get()은 선택한 요소를 배열(Array)로 가져옵니다

 

2.  형식

.get() 선택한 모든 요소를 가져옵니다

.get( index ) 선택한 요소 중 특정한 것만 가져옵니다

var ar = $("p").get(); // p태그의 요소를 배열로 가져옵니다

.hasAttribute(name) — 속성의 존재 확인
.getAttribute(name) — 속성값을 가져온다
.setAttribute(name, value) — 속성값을 변경
.removeAttribute(name) — 속성값을 제거

 

 

⚒️ 예제

// jQuery\webapp\03_jQueryAttr
exam01.html	attr() / prop() / get()
exam02.html	속성 제어
exam03.html	전체 선택 기능 구현하기
exam04.html	활성/비활성 구현하기
exam.05html	hover