[javascript & jquery] attr() 사용법

[javascript & jquery] attr() 사용법

 

attr()메서드는 HTML속성을 다루는 jQuery getter/setter 메서드이다. attr() 메서드는 브라우저 간 비호환성과 특이 사항을 잘 처리한다. 따라서 HTML 속성명과 이에 해당하는 자바스크립트 프로퍼티, 이 둘이 달라도 어느 것을 사용하든 상관없다. 예를 들어 'for'와 'htmlFor', 'class'와 'className' 중에서 무엇을 사용하든 결과는 같다. 

.attr() 메서드는 선택자에 의해 선택된 요소들 중에서 제일 처음 요소의 속성값을 가지고 오는 함수이다. 만일 모든 요소들의 속성값을 개별적으로 알고 싶다면, .each()메서드나 .map() 메서드를 사용해야 한다.

 

.attr(attributeName)

선택된 요소 집합에서 첫번째 요소의 attributeName에 해당하는 속성값을 반환한다.

 

.attr(attributeName, value)

선택자에 의해 선택된 요소에 하나 이상의 속성을 부여할 수 있다.

여러 속성을 부여할 때, 속성명에 따옴표는 선택사항이다. 단, "class"속성을 세팅할 때는 반드시 따옴표를 사용해야 한다.

Internet Explorer는 input이나 button요소의 type속성을 바꾸지 못한다.

 

// 첫 form 요소의 action 속성을 조회

$("form").attr("action");

//em 태그의 title 속성의 값을 찾아서 div에 표시

var title = $("em").attr("title");

$("div").text(title);

//src 속성에 값 지정

$("#icon").attr("src", "icon.gif");

//한 번에 속성 4 개를 지정

$("#banner").attr({src:"banner.gif",

alt:"Advertisement",

width:720, height:64});

//모든 링크를 새 창에서 연다.

$("a").attr("target", "_blank");

//도메인이 같은 링크는 같은 현재창에서 열고 다르면 새 창에서 연다.

$("a").attr("target", function() {

if(this.host === location.host) return "_self"

else return "_blank";

});

//함수를 이렇게 넘길 수도 있다.

$("a").attr({target: function() { ... } });

//선택된 모든 요소에서 속성을 완전히 제거할 때는 removeAttr()을 사용한다.

//모든 링크를 현재 창에서 연다.

$("a").removeAttr("target");

 

자바스크립트 완벽가이드

http://findfun.tistory.com/156

 

출처: https://iamawebdeveloper.tistory.com/89 [나는 웹개발자!]