실행 소스
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>JQuery 총복습</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
function execute() {
// img 태그의 src를 img/1.jpg로 세팅해보세요~
// $('img').attr('src',"img/1.jpg");
$('img').attr('width',"180px");
var names = ["수영","티파니","써니","서현","효크","씨스타","효린","몰라"];
$('img').each(function(i){
var num=1;
// 선택된 각각의 것에 대해서 기능이 실행된다.
$(this).attr("src", "img/"+(i+1)+".jpg")
.attr('alt', names[i])
.click(function(){
//클릭했을때 alt 속성의 값을 alert으로 보여주기
// alert($(this).attr('alt'))
$(this).next().html(num++);
});
});
}
</script>
</head>
<body>
<input type="button" value="실행" onclick="execute();"/>
<div id="target">
<h1>블랙소시</h1>
<img src="" alt="" /><span></span>
<img src="" alt="" /><span></span>
<img src="" alt="" /><span></span>
<img src="" alt="" /><span></span>
<img src="" alt="" /><span></span>
<img src="" alt="" /><span></span>
<img src="" alt="" /><span></span>
<img src="" alt="" /><span></span>
</div>
</body>
</html>
실행 결과
블랙소시
'Dev. 웹 > JavaScript' 카테고리의 다른 글
| [참고 소스] jQuery를 이용한 ctrl+c, ctrl+v 이용 제한 소스 (0) | 2013.02.22 |
|---|---|
| UI/Datepicker/formatDate (0) | 2012.09.13 |
| [JQuery 예제] 동적생성과 Traversing (0) | 2012.09.13 |
| [JQuery 예제] 체크박스 클릭 해제시 모든 체크박스에 체크 설정 (0) | 2012.09.13 |
| [JQuery 예제] 셀렉터(Selector) 이용법 및 이벤트 적용 (0) | 2012.09.13 |