본문 바로가기

jQuery

jQuery 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Move and Copy Laboratory Page</title>
    <link rel="stylesheet" type="text/css" href="../common.css">
    <script type="text/javascript" src="../scripts/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>Move and Copy Laboratory</h1>
    <fieldset id="source">
      <legend>Source elements</legend>
      <img id="flower" src="flower.png"/>
      <img id="car" src="car.png"/>
    </fieldset>

    <fieldset id="targets">
      <legend>Target elements</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()">Execute</button>
      </form>
    </div>

  </body>
</html>

'jQuery' 카테고리의 다른 글

jQuery 4  (0) 2009.09.26
DOM 이해하기(퍼옴)  (0) 2009.09.25
[jQuery] 엘리먼트 조정 (퍼옴)  (0) 2009.09.25
jQuery 빠른 처리를 위한 CSS 셀렉터 사용팁  (0) 2009.09.25
jQuery 샘플 링크 (퍼옴)  (0) 2009.09.25