jQuery增刪改 mouseover and mouseenter區別

<!--
1. 添加/替換元素
  * append(content)
    向當前匹配的所有元素內部的最後插入指定內容
  * prepend(content)
    向當前匹配的所有元素內部的最前面插入指定內容
  * before(content)
    將指定內容插入到當前所有匹配元素的前面
  * after(content)      
    將指定內容插入到當前所有匹配元素的後面替換節點
  * replaceWith(content)
    用指定內容替換所有匹配的標籤刪除節點
2. 刪除元素
  * empty()
    刪除所有匹配元素的子元素
  * remove()
    刪除所有匹配的元素
-->
<script src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
   
  //  需求:
  //  1. 向id爲ul1的ul下添加一個span(最後)
    var $ul1 = $('#ul1')
    //$('#ul1').append('<span>插入的span</span>')
      $('<span>sll</span>').appendTo($ul1)
  //  2. 向id爲ul1的ul下添加一個span(最前)
    //$('#ul1').prepend('<span>c</span>')
      $('<span>s</span>').prependTo($ul1)
  //  3. 在id爲ul1的ul下的li(title爲hello)的前面添加span
      $ul1.children('li[title = hello]').before('<span>before</span>')    
  //  4. 在id爲ul1的ul下的li(title爲hello)的後面添加span
      $ul1.children('li[title = hello]').after('<span>before</span>')  
  //  5. 將在id爲ul2的ul下的li(title爲hello)全部替換爲p
      $('#ul2>li[title=hello]').replaceWith('<p>替換的p</p>')
  //  6. 移除id爲ul2的ul下的所有li
      //$('#ul2>li').empty()
      $('#ul2>li').remove()      
 
</script>

區別mouseover與mouseenter?

    * mouseover: 在移入子元素時也會觸發, 對應mouseout

    * mouseenter: 只在移入當前元素時才觸發, 對應mouseleave

                                hover()使用的就是mouseenter()和mouseleave()