.attr(attributeName)
문법
.attr(attributeName)
요약
선택된 엘리먼트 중 첫번째 엘리먼트의 속성(attribute)을 얻는다.
인자
| 인자명 | 데이터형 | 필수/옵션 | 설명 |
|---|---|---|---|
| attributeName | String | 옵션 | 속성명 |
반환값
jQuery object
설명
선택된 엘리먼트 중 첫번째 엘리먼트의 속성을 구한다. 선택된 엘리먼트 전체에 대한 속성 값을 얻기 위해서는 .each나 .map와 같은 반복기법을 이용한다.
예제
em 엘리먼트의 속성(attribute)를 얻은 후에 div 엘리먼트의 html contents로 지정하는 예제
<!DOCTYPE html>
<html>
<head>
<style>
em { color:blue; font-weight;bold; }
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>
.attr(attributeName, value)
요약
선택된 엘리먼트 그룹 전체의 속성을 변경한다.
문법
.attr(attributeName, value)
인자
| 인자명 | 데이터형 | 필수/옵션 | 설명 |
|---|---|---|---|
| attributeName | String | 필수 | 속성명 |
| value | String 또는 map | 필수 | 값 |
버전
1.0부터
반환값
jQuery wrapper object
설명
하나의 속성을 변경하는 방법
.attr(attribuetName)가 선택된 엘리먼트 그룹 중 첫번째 엘리먼트의 속성(attributeName) 값을 제공하는 반면, .attr(attributeName, value)는 선택된 엘리먼트 그룹 전체의 엘리먼트의 속성값을 두번째 인자 value로 변경한다.
예를들어, id 값이 #greatphoto인 엘리먼트가 있다.
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
이 엘리먼트의 속성 alt를 Beijing Brush Seller로 변경하려면 아래와 같이 한다.
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
속성을 추가할 때도 attr을 사용한다.
$('#greatphoto') .attr('title', 'Photo by Kelly Clark');
한번에 여러개의 속성을 변경하는 방법
한번에 여러개의 속성을 변경하려는 경우 두번째인지 value의 값으로 map를 전달한다. map은 키(key)와 값(value)의 쌍으로 이루어진 자바스크립트 객체다.
예를들어, id가 greatphoto인 엘리먼트의 속성 alt, title을 변경하려면 아래와 같이 한다.
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
주의 : jQuery에서는 input, button 엘리먼트의 type속성의 변경을 막고 있다. 이들 엘리먼트의 type 속성은 Internet Explore에서 변경이 되지 않는다.
예제
아래 예제는 button 엘리먼트 중 두번째 엘리먼트 보다 나중에 나타나는 엘리먼트의 disabled 속성 값을 disabled로 변경
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>
아래 예제는 img 엘리먼트들의 map을 인자로 전달해 src, title, alt값을 한번에 설정한다.
<!DOCTYPE html>
<html>
<head>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img />
<img />
<img />
<div><B>Attribute of Ajax</B></div>
<script>
$("img").attr({
src: "http://api.jquery.com/images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>
</body>
</html>
.attr(attributeName, function(index,attr))
요약
선택된 엘리먼트 전체 엘리먼트의 속성값을 변경한다. 이 때 함수를 전달해서 보다 정교한 조작이 가능하다.
문법
.attr(attributeName, function(index, attr){
return value;
})
인자
| 인자명 | 데이터형 | 필수/옵션 | 설명 |
|---|---|---|---|
| attributeName | String | 필수 | 속성명 |
| function | String | 필수 | 속성 값을 리턴하는 함수 |
버전
1.1부터
반환값
jQuery wrapper object
설명
선택된 엘리먼트 전체에 대해서 속성값을 변경한다. 이 때 두번째 인자로 함수를 전달하는데, 이 함수의 반환(return)값이 속성의 값이 된다. 이 함수는 두개의 인자를 받는데, index는 현재 실행되고 있는 엘리먼트의 index 값이고, attr은 attr의 첫번째 인자인 attributeName에 해당하는 속성의 값을 제공한다.
참고 : 두번째 인자인 함수가 리턴 값이 없거나, undefined를 리턴하면 속성은 변경되지 않는다.
예제
아래 예제는 div 엘리먼트의 id값에 문자열 div-id와 각 엘리먼트의 index을 합친 값을 설정한다.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
b { font-weight:bolder; }
</style>
<script src="http://code.jquery.com/jquery-latest.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 (index) {
return "div-id" + index;
})
.each(function () {
$("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>
</body>
</html>
