jquery单击按钮移动div元素

你可以使用 jQuery 中的 `click()` 方法和 `animate()` 方法来实现单击按钮移动 `div` 元素的效果。

HTML 代码：

<button id="move">Move</button>
<div id="box"></div>

CSS 代码：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

jQuery 代码：

$(document).ready(function() {
  // 获取按钮和盒子元素
  var $moveBtn = $('#move');
  var $box = $('#box');
  
  // 给按钮添加单击事件
  $moveBtn.click(function() {
    // 移动盒子元素
    $box.animate({
      top: '100px',
      left: '100px'
    }, 'slow');
  });
});

在上述代码中，我们首先获取了按钮和盒子元素，并通过 `click()` 方法为按钮添加单击事件。当按钮被单击时，通过 `animate()` 方法移动盒子元素到指定的位置。

其中，`animate()` 方法的第一个参数是一个对象，用于指定移动到的位置；第二个参数是动画执行的时长。

通过这种方式，你就可以实现通过单击按钮移动 `div` 元素的效果了。