jQuery04事件和动态效果
//1.1 加载DOM两种方式(区别)
//原生态JavaScript加载DOM的方式
//当网页全部加载完毕后才会执行的函数
//该方式在一个页面上只能出现一次 如果出现多处 会覆盖
window.onload=function(){
alert(123);
}；
//给定一个函数
function myload(){
alert(123);
}；
//通过onload调用
window.onload=myload();
//添加事件监听的方式
//该方式可以出现多处
window.addEventListener('load',function(){
alert(123);
});
window.addEventListener('load',function(){
alert(456);
});
//jQuery的DOM加载
//jQuery的DOM在一个页面上可以编写多个
//jQuery的完整写法
$(document).ready(function(){
alert(123);
});
//简写
$(function(){
alert(456);
});
//页面上同时出现原生态jsDOM和jQueryDOM加载
//版本不同，先后执行顺序不同
$(function(){
alert('jQuery')
});
window.onload=function(){
alert('原生态js')
} // $(function(){
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
$("#oBtn1").on('click',function(){
alert(123);
});
//bind绑定
$("#oBtn1").bind('click',function(){
alert(123);
})；
//--元素.事件名
$("#oBtn1").click(function(){
alert('哈哈')
});
//鼠标移出事件 mouseover mouseout
$("#oBth1").mouseover(function(){
alert(123);
});
$("#oBth1").mouseover(function(){
//alert(123);
console.log("yichu")
});
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
$("#oDiv").hover(function(){
$(this).addClass("over");
},function(){
$(this).removeClass('over')
}); //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
$("#oBtn2").click(function(){
//没有传递参数 调用后立即隐藏与显示
//有参数（毫秒） 调用后有延时效果
//$("#oDiv").toggle(function(){
alert("隐藏了----我出现了")
}，function(){
alert('我出现了')
});
});
//1.4 事件的传播(事件冒泡) 小p->中div->大body
$("body").click(function(){
alert(123);
});
$("#oBtn2").click(function(){
alert(456);
return false;//阻止事件传播
});
//1.5 事件event的坐标[了解即可 pageX,pageY]
$("body").click(function(){
//pagex横坐标
//鼠标
console.log(event.pagex，event.pageY);
//left和top body有默认的margin与padding值
console.log(event.offsetX,event.offsetY);
//窗口
console.log (event.clientX,event.ClientY);
});
//1.6 事件的移除
//--按钮只能点击一次[2]
var flag=true;
$("#oBtn3").click(function(){
if(flag==true){
alert(123);
flag=false;
}
//一次性作业 通过调用解绑事件即可
$(this).off();
$(this).unbind();
});
//jQuery中提供的一个方法one
$("#oBtn3").one('click',function){
alert(123);
};
//--按钮点击偶数次可行 奇数次不行
var num=1;
$("#oBtn3").click(function(){
if(num%2==0){
alert(123);
console.log('点击了'num)
}
num++;
console.log(num);
});2.动画效果
动画
//2.1 基本动画 [回调函数]
// 隐藏
// $("#btn2").click(function(){
// // alert(123)
// $("div").hide(5000);
// })
// // 显示
// $("#btn2").click(function(){
// $("div").show(2000);
// })
// // 切换
// $("#btn3").click(function(){
// $("div").toggle(2000);
// })
//2.2 滑动动画
// $("#btn4").click(function(){
// // 往上拉
// $("div").slideUp(2000);
// })
// $("#btn5").click(function(){
// // 往上拉
// $("div").slideDown(2000);
// })
// $("#btn6").click(function(){
// // 往上拉
// $("div").slideToggle(2000);
// })
//2.3 淡入淡出(透明度)
// $("#btn7").click(function(){
// // 淡入
// $("div").fadeOut(2000);
// })
// $("#btn8").click(function(){
// // 淡出
// $("div").fadeIn(2000);
// })
// $("#btn9").click(function(){
// // 淡入淡出切换
// $("div").fadeToggle(2000);
// })
//2.4 自定义动画
$("#btn10").click(function(){
$("div").animate({
width:"500px",
height:"500px"
},3000);
})
$("#btn11").click(function(){
$("div").animate({
left:"500px",
top:"300px"
},3000);
})
$("#btn12").click(function(){
$("div").animate({
left:"+=50px",
top:"+=3px"
},3000);
})