在网页DIV中设置一首诗词要求有诗的标题和作者，在标题上绑定双击事件，每一次双击标题时标题放大4px，在双击3次后解除绑定；在诗词第一行上使用one()函数绑定单击事件，单击时设置整个诗词正文字号设为24PX；在诗词最一后行上设置hover()函数，鼠标进入时页面背景设为浅蓝色（颜色自定义），鼠标离开时设置背景为浅绿色；在页面空白处使用toggle（）函数，单击时诗词正文在三种颜色之间切换。

以下是实现该需求的代码：
HTML：

<div id="poem">
  <h2 id="title">静夜思</h2>
  <p>床前明月光，疑是地上霜。</p>
  <p>举头望明月，低头思故乡。</p>
  <p>——李白</p>
</div>

CSS：

body {
  background-color: #fff;
}

#poem {
  margin: 50px auto;
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 16px;
  line-height: 1.5;
}

#title {
  cursor: pointer;
  font-size: 18px;
  margin: 0;
}

#poem:hover {
  background-color: #f5f5ff;
}

#poem:active {
  background-color: #e0ffe0;
}

.color1 {
  color: red;
}

.color2 {
  color: green;
}

.color3 {
  color: blue;
}

JavaScript：

$(document).ready(function() {
  var count = 0;

  // 双击标题放大4px，双击3次后解除绑定
  $('#title').dblclick(function() {
    $(this).css('font-size', '+=4px');
    count++;
    if (count >= 3) {
      $(this).off('dblclick');
    }
  });

  // 单击诗词第一行时设置正文字号为24px
  $('#poem p:first').one('click', function() {
    $('#poem').css('font-size', '24px');
  });

  // 鼠标进入时背景设为浅蓝色，离开时设为浅绿色
  $('#poem p:last').hover(
    function() {
      $('body').css('background-color', '#f0f8ff');
    },
    function() {
      $('body').css('background-color', '#e0ffe0');
    }
  );

  // 点击页面空白处切换颜色
  $('body').click(function() {
    $('#poem').toggleClass('color1 color2 color3');
  });
});