hello~今天要给大家带来的是什么呢?嘿嘿嘿,就是一些关于jQuery的有趣的点击事件和动画效果,是不是听起来很好玩呢?那么接下来我就带大家一起探讨这些玩法叭~
一、事件
1、加载Dom两种方式:
1.1 window.onload方式(不可以写多个 多个会被覆盖)
执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行
编写个数:1个
1.2 jQuery方式
执行时间:网页结构绘制完成后,执行
编写个数:多个
1.3 两个都有的情况下执行顺序【面试题】
jQuery3.0:window.onload比jQuery先执行
jQuery1.0和2.0:jQuery比window.onload先执行
2、绑定事件两种方式
2.1 元素.on("事件名",function(){})
2.2 元素.事件名(function(){})
2.3 演示事件(鼠标悬停和点击)的两种方式
<script>
// 绑定事件的两种方式 [eg.:点击、悬停事件等等]
--元素.on/bind()
$(function(){
$("#aa").on("click",function(){
alert("嘿嘿")
})
$("#aa").bind("mouseover",function(){
alert("哈哈");
})
--元素.事件名
$("#aa").click(function(){
alert("干哈")
})
})
</script>
3、合成事件/事件切换
hover():鼠标悬停合成事件
toggle():鼠标点击合成事件
<script>
//--hover()悬停控制元素[div]的显示和隐藏
$("#aa").hide();//隐藏
$("a").hover(function(){//鼠标移上
$("#aa").show();//显示
},function(){//鼠标移出
$("#aa").hide();//隐藏
})
//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
$("#aa").hide(); //隐藏
$("a").toggle(function() { //点击一下
$("#aa").show(); //显示
}, function() { //再点击一下
$("#aa").hide(); //隐藏
})
$("#aa").toggle(1000);
</script>
4、事件传播(事件冒泡)
传播:小-->中-->大
阻止传播:事件后面加上 return false
案例:给body div span(在div中) 分别添加点击事件,测试事件传播
<script>
//事件的传播(事件冒泡) 小p->中div->大body
//分别添加点击事件
$("p").click(function(){
console.info("p被打了");
})
$("div").click(function(){
console.info("div被打了");
return false;//阻止传播
})
$("body").click(function(){
console.info("body被打了");
})
</script>
5、事件坐标
offsetX:当前元素左上角
clientX:窗口左上角
pageX:网页左上角
<script>
// 事件event的坐标[了解即可 pageX,pageY]
$("#aa").click(function(e){
console.info(e.pageX,e.pageY);
})
</script>
6、移除事件
<script>
//事件的移除
//--按钮只能点击一次[2]
$("#btn").on("click",function(){
//做一系列事情
console.info(44944);
//将点击事件进行移除
$("#btn").off("click");
//将按钮禁用
$("#btn").attr("disabled",true);
})
//一次
$("#btn").one("click",function(){
console.info(44944);
//将按钮禁用
$("#btn").attr("disabled",true);
})
//--按钮点击偶数次可行 奇数次不行
var i=1;
$("#btn").click(function(){
if(i%2==0){
console.info(44944,i);//做一系列事情
}
i++;
})
</script>
二、动画效果
1、基本动画
显示:show(Time)
隐藏:hide(Time)
切换:toggle(Time)
<script>
//基本动画 [回调函数]
$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
$("#aa").show(1000,function(){
alert(1);//回调函数
});//1s 显示
})
$("#yy").on("click",function(){
$("#aa").hide(2000);//2s 隐藏
})
$("#zz").on("click",function(){
$("#aa").toggle(1000);//1s 切换
})
</script>
2、滑动动画
slideUp(Time):动画收缩(向上滑动)-->隐藏
slideDown(Time):动画展开(向下滑动)-->显示
slideToggle(Time):动画切换
<script>
$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
$("#aa").slideDown(1000);//1s 显示
})
$("#yy").on("click",function(){
$("#aa").slideUp(2000);//2s 隐藏
})
$("#zz").on("click",function(){
$("#aa").slideToggle(1000);//1s 切换
})
</script>
3、淡入淡出(透明度)
fadeIn(Time):淡入(透明度减少)
fadeOut(Time):淡出(透明度增大)
fadeToggle(Time):切换
<script>
$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
$("#aa").fadeIn(1000);//1s 显示
})
$("#yy").on("click",function(){
$("#aa").fadeOut(2000);//2s 隐藏
})
$("#zz").on("click",function(){
$("#aa").fadeToggle(1000);//1s 切换
})
</script>
4、自定义动画
元素.animate({属性:属性值},Time)
缩放: width height
移动: top left
移动(本元素),距离: top= "+=" left= "-="
<script>
//--缩放
$("#bbb").click(function(){
$("#aa").animate({
width:100,
heigt:300
},1000)
})
//--移动[2]
$("#bbb").click(function(){
$("#aa").animate({
left:100,
top:100
},1000)
})
//在自身基础上移动
$("#bbb").click(function(){
$("#aa").animate({
left:"+=5",
top:"+=8"
},100)
})
</script>