실행 소스
<?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 (동적생성과 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">
// 버튼을 찾아서 click 이벤트를 걸고 클릭시 alert("클릭"); 되도록
$(function(){
$(':button[value="실행!"]').click(function(){
//모든 div에 이미지를 추가
$('div').append('<img src="taeyeon.jpg" alt="태연" width="120px"/>')
.find('img:odd').width(100)
.click(function(){
$(this).hide(500);
}).parent().animate({height:"+=20", width:"-=100"},1000); //"-=200" : 실행때마다 200씩 감소
// json 방식 : {name:value, name1:value1}
// .end 를 쓰면 다 끝내고 맨 처음 선택자로 돌아간다.
});
// $(':button[value="실행취소"]').click(function(){
// //모든 div에 이미지를 추가
// $('div').append('<img src="http://14.37.37.161:8080/hp/taeyeon.jpg" width="120px"/>');
// });
var no = 1; // 클릭횟수
$('.target').dblclick(function(){
$(this).prepend(no++);
});
$('div').css('border','solid thin blue')
// .css('background-color','yellow'); // 둘다 가능
.css('backgroundColor','yellow'); // 둘다 가능
});
</script>
</head>
<body>
<input type="button" value="실행!" />
<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>
실행 결과
'Dev. 웹 > JavaScript' 카테고리의 다른 글
| UI/Datepicker/formatDate (0) | 2012.09.13 |
|---|---|
| [JQuery 예제] 동적생성 및 복습 (0) | 2012.09.13 |
| [JQuery 예제] 체크박스 클릭 해제시 모든 체크박스에 체크 설정 (0) | 2012.09.13 |
| [JQuery 예제] 셀렉터(Selector) 이용법 및 이벤트 적용 (0) | 2012.09.13 |
| [JavaScript 예제] 자바스크립트 정규식 이용한 유효성 검사 (5) | 2012.09.13 |