① JQuery 소스
<?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 3(동적 생성과 traversing)</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">
// $ >> jQuery 객체
// 버튼을 찾아서 click이벤트를 걸고 클릭시 alert("클릭"); 되도록
$(function(){
$(":button[value=실행]").click(function(){
// 모든 div에 이미지를 추가
$("div").append("<img src='teayeon2.jpg' width='50'/>")
.find(':odd').width(100).click(function(){
$(this).toggle(2000);
}).end().animate({height:"+=20", width:"-=100"},1000);
// end(): 끝내고 처음 선택자로 돌아간다.
// json 방식 : {name:value, name1:value1}
});
var no=1;
$("div.target").dblclick(function(){
$(this).prepend(no++);
});
$("div").css("border","solid thin blue")
.css("background-color", "#D0D0D0"); // background-color = backgroundColor
});
</script>
</head>
<body>
<input type="button" value="실행" />
<div class="target">디아이브이1</div>
<div class="target">디아이브이2</div>
<div class="target">디아이브이3</div>
<div class="target">디아이브이4</div>
<div class="target">디아이브이5</div>
</body>
</html>
② 실행화면
'WEB > JQuery' 카테고리의 다른 글
| WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog (0) | 2012.09.14 |
|---|---|
| WEB 5일차 첫번째) JQuery복습 (0) | 2012.09.14 |
| WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제 (0) | 2012.09.13 |
| WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기 (0) | 2012.09.13 |
모데스티