<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이동과 복사 연습 페이지</title>
<link rel="stylesheet" type="text/css" href="../css/common.css">
<script type="text/javascript" src="../js/jquery-1.2.1.js" ></script>
<script type="text/javascript">
function execute () {
var command = $('input[name=command]:checked').val();
$('#flower')[command]('#targets p');
$('#car')[command]('#targets p:first');
}
</script>
<style>
img {width: 108px;}
fieldset {width: 360px;}
</style>
</head>
<body>
<h1>이동과 복사 연습</h1>
<fieldset id="source">
<legend>원본 엘리먼트</legend>
<img id="flower" src="flower.png" />
<img id="car" src="car.png" />
</fieldset>
<fieldset id="targets">
<legend>대상 엘리먼트</legend>
<p><img src="dragonfly.png" /></p>
<p><img src="dragonfly.png" /></p>
<p><img src="dragonfly.png" /></p>
</fieldset>
<div>
<form action="" onsubmit="return false;">
<div>
<input type="radio" name="command" value="appendTo" checked="checked" />
appendTo
<input type="radio" name="command" value="prependTo" />
prependTo
</div>
<button type="button" id="testButton" onclick="execute()">실행</button>
</form>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이동과 복사 연습 페이지</title>
<link rel="stylesheet" type="text/css" href="../css/common.css">
<script type="text/javascript" src="../js/jquery-1.2.1.js" ></script>
<script type="text/javascript">
function execute () {
var command = $('input[name=command]:checked').val();
$('#flower')[command]('#targets p');
$('#car')[command]('#targets p:first');
}
</script>
<style>
img {width: 108px;}
fieldset {width: 360px;}
</style>
</head>
<body>
<h1>이동과 복사 연습</h1>
<fieldset id="source">
<legend>원본 엘리먼트</legend>
<img id="flower" src="flower.png" />
<img id="car" src="car.png" />
</fieldset>
<fieldset id="targets">
<legend>대상 엘리먼트</legend>
<p><img src="dragonfly.png" /></p>
<p><img src="dragonfly.png" /></p>
<p><img src="dragonfly.png" /></p>
</fieldset>
<div>
<form action="" onsubmit="return false;">
<div>
<input type="radio" name="command" value="appendTo" checked="checked" />
appendTo
<input type="radio" name="command" value="prependTo" />
prependTo
</div>
<button type="button" id="testButton" onclick="execute()">실행</button>
</form>
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| jQuery In Action chapter 4-1 (0) | 2009.12.20 |
|---|---|
| jQuery In Action chapter 3-3 (0) | 2009.12.20 |
| jQuery In Action chapter 3-1 (0) | 2009.12.20 |
| jquery Api 활용 (0) | 2009.12.19 |
| jQuery selector (0) | 2009.12.19 |