jquery-实例:让元素随着鼠标移动而移动--

1)标签随着鼠标移动而移动

     $(document).ready(function () {
            $('.c2').on('mousedown',function (e) {
                $(this).css('cursor','move');//改变鼠标的形状
    //            console.log(e);
    //            console.log(this);    this是这个方块
                var off=$(this).offset();   //获得的是方块的绝对偏移量
    //            console.log(e.pageX)
                console.log(off);
                var x=e.pageX-off.left;  //这个是获得鼠标点击的位置与边框边左边距的位置
                var y=e.pageY-off.top;  //这个是获得鼠标点击位置与上边框的位置
                $(document).bind('mousemove', function (ev) {
                    $(".c2").stop();
                    var lastx=ev.pageX-x;
                    var lasty=ev.pageY-y;

                    $(".c2").animate({left:lastx+'px',top:lasty+'px'},10);

                })
            })
            $(document).on('mouseup',function () {
                $(".c2").css('cursor','default');
                $(this).unbind('mousemove')
            })
        })

PS:上面代码,首先$(document)指的整个页面,后面的ready,是让整个页面不用全部加载完成就可以显示出部分来,对用户来说有更好的体验.

2)时间委派

3. $("tbody").on("click",".btn-warning",function(){})  我们要用的事件委派
//
外面的$()的函数里面,要加上不会变标签,在on()里的第一个参数是:事件--
第二个参数是:你要一直继承下去的标签或者元素,
第三个参数:一定要加上函数.


$(document).on('click','button',function () {
    $('.c3').after('<p>you</p>')
})