事件

页面载入
   ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
   $(document).ready(function(){}) -----------> $(function(){})

事件处理
   $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

   //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
   //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
   //  click事件；

   [selector]参数的好处:
       好处在于.on方法为动态添加的元素也能绑上指定事件；如：

       //$('ul li').on('click', function(){console.log('click');})的绑定方式和
       //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
       //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

       //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
       //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
   
   [data]参数的调用:
            function myHandler(event) {
               alert(event.data.foo);
               }
            $("li").on("click", {foo: "bar"}, myHandler)

实例之面板拖动

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
       <div id="title" style="height: 40px;color: white;">
           标题
       </div>
       <div style="height: 300px;">
           内容
       </div>
   </div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
   $(function(){
       // 页面加载完成之后自动执行
       $('#title').mouseover(function(){
           $(this).css('cursor','move');
       }).mousedown(function(e){
           //console.log($(this).offset());
           var _event = e || window.event;
           // 原始鼠标横纵坐标位置
           var ord_x = _event.clientX;
           var ord_y = _event.clientY;

           var parent_left = $(this).parent().offset().left;
           var parent_top = $(this).parent().offset().top;

           $(this).bind('mousemove', function(e){
               var _new_event = e ||