一.js代码加载的时机
1.DOM加载完毕 -> 将js代码放到body体之下即可；
2.网页资源加载完毕-> $(window).onload(function(){ });
3.jQuery实现等DOM加载完毕运行 ->$(function(){ }) 或 $(document).ready(fucntion(){ })
二.事件处理
1.bind() ->事件绑定
$('div').bind('click',function(){
alert(1);
})//给div绑定click事件
2.unbind() ->解除事件绑定
3.one() ->绑定事件，仅一次（运行一次之后就自动解除事件绑定）
三.事件委派
1.live() ->给新生事物增加事件
$('div').live('click',function(){
alert(1);
})//给div委派click事件
2.die() ->解除事件
四.事件切换
1.toggle(fn1,fn2) -> 点击循环执行fn1与fn2
2.hover(fn1,fn2) -> 移入移出循环执行fn1与fn2
五。鼠标拖拽实例
<body>
<div class="div_img">
<img src="../img/1.jpg" alt="">
</div>
</body>
</html>
<script>
//获取被点击对象
obj = $('.div_img');
//鼠标移动时 获取鼠标的位置坐标
$(document).mousemove(function(e){
x = e.clientX;
y = e.clientY;
})
//对象被点击是获取点击位置与其左上角的坐标差ox,oy
obj.mousedown(function(){
ox = $(this).offset().left;
oy = $(this).offset().top;
dx = x - ox;
dy = y - oy;
// 给dom绑定鼠标移动和鼠标弹起事件
$(document).bind('mousemove',move);
$(document).bind('mouseup',stop);
//防止事件冒泡
return false;
})
//鼠标弹起时，解除事件绑定
function stop(){
$(document).unbind('mousemove',move);
$(document).unbind('mouseup',stop);
}
//鼠标点击目标并且移动时，改变目标的位置
function move(e){
sy = e.clientX - dx;
sx = e.clientY - dy;
document.title=sx+","+sy
obj.css({'top':sx+'px','left':sy+'px'})
//防止事件冒泡
return false ;
}
</script>