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>')
})