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