① 소스내용
<?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');
var names = ["태연","서현","유리","제시카","써니","윤아","티파니"];
$('img').attr("width","200px").each(function(i){
// 선택된 각각의 것에 대해서 기능이 실행된다.
// 클릭시 alt 속성의 값을 alert으로 보여주기
$(this).attr("src","img/"+(i+1)+".jpg")
.attr('alt',names[i]).click(function(){
// alert($(this).attr("alt"));
if($(this).next().html()=="")
$(this).next().html(1);
else {
var no=Number($(this).next().html());
$(this).next().html(no+1);
}
//$(this).next().html(no++);
// alert($(this).next().html());
// 이미지 옆에 숫자를 추가(클릭횟수)
});
});
}
</script>
</head>
<body>
<input type="button" value="실행" onclick="execute();"/>
<div id="target">
<h1>블랙소시</h1>
<img src="" alt="" /><span></span><br />
<img src="" alt="" /><span></span><br />
<img src="" alt="" /><span></span><br />
<img src="" alt="" /><span></span><br />
<img src="" alt="" /><span></span><br />
<img src="" alt="" /><span></span><br />
<img src="" alt="" /><span></span><br />
</div>
</body>
</html>
② 실행 화면
블랙소시
'WEB > JQuery' 카테고리의 다른 글
| WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog (0) | 2012.09.14 |
|---|---|
| WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing (0) | 2012.09.13 |
| WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제 (0) | 2012.09.13 |
| WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기 (0) | 2012.09.13 |
모데스티