본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - attr(), 속성을 제어하기

by zoo10 2011. 2. 25.

.attr()

인자에 따라 2가지로 사용할 수 있습니다. 하나의 인자만 있다면 속성값을 가져오는 것이고 2개의 인자를 쓰면 속성값을 요소에 부여하는 것입니다. 아래 2가지 사용방법에 대해 설명되어 있습니다.

원문 링크 http://api.jquery.com/attr/

함수들

attr( attributeName )
  • .attr( attributeName )
attr( attributeName, value )
  • .attr( attributeName, value )
  • .attr( map )
  • .attr( attributeName, function(index, attr) )

.attr( attributeName )Returns : String

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

  • .attr( attributeName )
  • attributeName 속성 이름

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

.attr() 함수는 속성값을 가져오지 못하면 undefinded를 반환합니다. 그리고, 속성값을 가져올 때 .attr() 함수를 사용하면 2가지의 큰 장점이 있습니다.

1. 편리함(Convenience) : jQuery의 객체들을 바로 사용할 수 있고, 다른 jQuery 메소들과 같이 엮어서 사용할 수 있습니다.

2. 브라우저별 일관성 유지(Cross-browser consistency) : 어떤 속성명은 브라우저별로 다르게 사용되는 경우도 있습니다. 더욱이 같은 브라우저임에도 버젼별로 차이가 있기도 합니다.(IE 이놈~) .attr() 함수는 그런 불일치를 축소시켜 줍니다.

3. 추가사항 : DOM 요소에서 거울 특성(mirror properties ?)을 가진 속성(checkbox의 checked 속성과 같은)에 .attr() 함수를 사용하면 non-undefined 를 반환합니다. The recommended cross-browser approach to handling this is to check for a falsy value using if ($(elem).attr('src')) rather than checking for particular values.(좀 어렵네요. 발번역은 하겠는데 정확한 의미를 모르겠습니다. 그래서 그냥 원문으로 옮깁니다. 도와주실 분~~)

예 제  
페이지내의 첫번째 em 태그를 찾아서 title 속성값을 알아낸다.

<!DOCTYPE html>
<html>
<head>
  <style>
  em { color:blue; font-weight;bold; }
  div { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
<p>
  Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>

  The title of the emphasis is:<div></div>

<script>
var title = $("em").attr("title");
  $("div").text(title);
</script>

</body>
</html>

미리보기

em 태그의 title 속성의 값을 찾아서 div 에 표시한 것을 볼 수 있습니다.

 

.attr( attributeName, value )Returns : jQuery

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

  • .attr( attributeName, value )
  • attributeName 속성명
  • value 속성값
  • .attr( map )
  • map 속성명과 속성값이 쌍을 이루는 집합(map)
  • .attr( attributeName, function(index, attr) )
  • attributeName 속성명
  • function(index, attr) 속성값을 반환하는 함수. this키워드는 현재의 요소. 요소 집합의 인덱스 위치와 이전 속성값이 인자이다.(Receives the index position of the element in the set and the old attribute value as arguments)

.attr()는 속성값을 알아내는 아주 편리한 함수입니다. 특히 함수를 이용하여 여러개의 속성을 세팅하거나 반환받은 속성값을 사용할 수 있습니다. 다음 이미지 태그의 예제를 보시죠.

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

하나의 속성 세팅하기 : Setting a simple attribute

alt 속성을 바꿔봅니다. .attr() 함수에 속성명과 새로운 값을 사용해서 간단하게 처리할 수 있습니다.

$('#greatphoto').attr('title', 'Photo by Kelly Clark');

여러개의 속성을 한번에 세팅하기 : Setting several attributes at once

alt 와 title 속성을 한번에 바꿔봅니다. map 을 사용해서 바꿔 보겠습니다. 각각 속성명이 키가 되고 새로운 값이 내용이 됩니다.(json과 같은 구조네요.)

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

여러 속성을 부여할 때, 속성명에 따옴표는 선택사항입니다.단, 'class' 속성을 세팅할 때는 반드시 따옴표를 사용해야 합니다.(그냥 항상 사용하면 되겠네요.)

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

속성값 계산 : Computed attribute values

함수를 이용해 속성을 세팅할 경우에는, 해당 요소의 다른 속성값을 이용하여 계산후 적용할 수도 있습니다. 아래는 요소의 alt 속성에 새로운 문자를 붙여서 속성값을 만들어 내고 있습니다.

$('#greatphoto').attr('title', function() {
  return this.alt + ' - photo by Kelly Clark'
});

함수를 사용하는 속성 세팅은 여러개의 속성을 한번에 바꿀 수 있는 아주 실용성있는 방법입니다.

 

예 제  
페이지의 모든 img 태그에 속성값들을 부여합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
  <img />
  <img />
  <img />

  <div><B>Attribute of Ajax</B></div>

<script>
$("img").attr({ 
  src: "/images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>

</body>
</html>

미리보기

img 태그에 src, title, alt 속성을 부여하고 있습니다. 재미있네요. map을 사용해서 추가하고 있는 예제입니다.

 

예 제  
색인이 1보다 큰 button 요소에 사용불가(disabled) 속성을 부여합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  button { margin:10px; }
</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
  <button>0th Button</button>
  <button>1st Button</button>
  <button>2nd Button</button>

<script>
$("button:gt(1)").attr("disabled","disabled");
</script>

</body>
</html>

미리보기

3번째 버튼(인덱스 기준 1보다 큰 2값임)의 사용불가 상태가 된것을 보실 수 있습니다.

 

예 제  
div 요소들을 찾아서 그 색인값을 알아내고 그 값을 이용하여 div의 id 속성을 만들어 내고, span 태그에 div 의 id값을 찍어줍니다.(좀 복잡하네요 ^^)

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
        </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>

<script>
$("div").attr("id", function (arr) {
  return "div-id" + arr;
})
.each(function () {
  $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>

</body>
</html>

미리보기

소스가 좀 복잡해 보이긴 합니다만 차근히 보시면 그리 어렵지 않습니다. 예제 풀이를 잘 보시고 그대로 따라가 보세요.

 

예 제  
img 태그의 title 요소값을 이미지의 경로값(src)로 사용합니다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
<img title="hat.gif"/>

<script>
$("img").attr("src", function() { 
    return "/images/" + this.title; 
});
</script>

</body>
</html>

미리보기

간단합니다. 위의 예제들에 비해서는요.

 

이번 내용은 예제 때문에 좀 길어졌네요. 대부분 예제니까 보시기엔 힘들지 않으실 거예요. 괜찮은 예제들도 있는 것 같으니 잘 사용해 보세요.

함수 쪽으로 오니까 예제들이 많아서 좀 덜 지루하네요. 아! 그리고 예제중에 이미지 나오는 부분은 이미지 경로가 소스랑은 조금 다릅니다. http://api.jquery.com/images/ 요 경로를 사용했습니다. 소스대로 했더니 엑박이 떠서요. 참고하세요.

그럼 즐프하세요.

 

저작자표시 비영리 변경금지

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery API 정복 - 클래스 제거, removeClass()  (2) 2011.03.14
jQuery API 정복 - 속성 제거, removeAttr()  (0) 2011.03.11
jquery API 정복 - innerHTML 과 같은 표현, html()  (10) 2011.03.10
jQuery API 정복 - 클래스가 있나 찾기, hasClass()  (5) 2011.03.03
jQuery API 정복 - addClass(), 클래스 추가하기  (5) 2011.02.25
jQuery API 정복 - 눈에 보이는 요소 찾기 : visible  (5) 2011.02.24
jQuery API 정복 - text 박스 찾기 : text  (3) 2011.02.24
jQuery API 정복 - submit 버튼 찾기 : submit  (4) 2011.02.22

관련글

티스토리툴바