2010/07/27 03:00
jQuery - .attr() General Web2010/07/27 03:00
출처: http://api.jquery.com/attr/
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
em { color:blue; font-weight:boid; }
div { color:red; }
</style>
</head>
<body>
<h4>.attr(attributeName): 애트리뷰트의 이름 가져오기</h4>
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
The title of the emphasis is: <div></div>
<script type="text/javascript" language="javascript">
var title = $("em").attr("title");
$("div").text("title");
</script>
<h4>.attr(attributeName, value)</h4>
<img id="greatphoto" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
<script>
/* 하나씩 애트리뷰트에 값 추가하기 */
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
$('#greatphoto').attr('title', 'Photo by Kelly Clark');
</script>
<h4>.attr(map): 애트리뷰트-값 쌍의 맵</h4>
<img id="greatphoto" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
<script>
/* 한번에 추가하기 */
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'Photo by Kelly Clark'
});
</script>
<h4>greatphoto ID값을 가지는 img 앨리먼트의 alt에 title을 결합하여 출력</h4>
<img id="greatphotoA" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
<script>
/* 한번에 추가하기 */
$('#greatphotoA').attr('title', function(){
return this.alt + '- photo by kelly clark'
});
</script>
<h4>모든 img 테그의 속성값 교체(소스내 주석 삭제)</h4>
<img />
<img />
<img />
<div><b>Attribute of Ajax</b></div>
<script>
/*
$('img').attr({
src: "http://www.dcollect.co.kr/data/rental/goods/small/7(1).jpg",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
*/
</script>
<h4>페이내의 div에 id 설정</h4>
<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>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
em { color:blue; font-weight:boid; }
div { color:red; }
</style>
</head>
<body>
<h4>.attr(attributeName): 애트리뷰트의 이름 가져오기</h4>
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
The title of the emphasis is: <div></div>
<script type="text/javascript" language="javascript">
var title = $("em").attr("title");
$("div").text("title");
</script>
<h4>.attr(attributeName, value)</h4>
<img id="greatphoto" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
<script>
/* 하나씩 애트리뷰트에 값 추가하기 */
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
$('#greatphoto').attr('title', 'Photo by Kelly Clark');
</script>
<h4>.attr(map): 애트리뷰트-값 쌍의 맵</h4>
<img id="greatphoto" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
<script>
/* 한번에 추가하기 */
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'Photo by Kelly Clark'
});
</script>
<h4>greatphoto ID값을 가지는 img 앨리먼트의 alt에 title을 결합하여 출력</h4>
<img id="greatphotoA" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
<script>
/* 한번에 추가하기 */
$('#greatphotoA').attr('title', function(){
return this.alt + '- photo by kelly clark'
});
</script>
<h4>모든 img 테그의 속성값 교체(소스내 주석 삭제)</h4>
<img />
<img />
<img />
<div><b>Attribute of Ajax</b></div>
<script>
/*
$('img').attr({
src: "http://www.dcollect.co.kr/data/rental/goods/small/7(1).jpg",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
*/
</script>
<h4>페이내의 div에 id 설정</h4>
<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>
'General Web' 카테고리의 다른 글
| jQuery - .hasClass() (0) | 2010/07/28 |
|---|---|
| jQuery-.html() (0) | 2010/07/27 |
| jQuery - .attr() (0) | 2010/07/27 |
| jQuery - 엘리먼트에 클래스 추가/삭제 하기. (0) | 2010/07/26 |
| ASP + AJAX(JSON) (0) | 2010/06/18 |
| Javascript를 이용한 개발에서의 MVC 패턴 (2) | 2009/02/11 |
TAG jquery
