一. 事件
1.加载Dom的两种方式2
(1) window.onload方式
执行时间:整个网页中所有内容(包括图片)加载完成后,才会执行
编写个数:1个
(2) jQuery方式
执行时间:网页结构绘制完成后,执行
编写个数:多个
两个都有的情况下执行顺序【面试题】
jQuery3.0:window.onload比jQuery先执行
jQuery1.0和2.0:jQuery比window.onload先执行
2.绑定事件两种方式
元素.on("事件名",function(){})
元素.事件名(function(){})
案例2:演示事件(鼠标悬停和点击)的两种方式
代码案例:
代码案例:
// 1.标签绑定绑定事件的方式
// (1)直接调用click点击事件的方法即可
// $("#btn1").click(function(){
// alert("我点击了这个按钮")
// });
// (2)可以通过标签对象调用on这个方法来绑定一个指定的事件。
// $("#btn1").on('click',function(){
// alert("on实现的点击");
// });
// (3)可以通过调用bind方法进行绑定一个事件
// $("#btn1").bind('click',function(){
// alert("bind 点击")
// });
3.合成事件/事件切换
hover():鼠标悬停合成事件
鼠标移上去第一个函数
鼠标移除第二个函数
案例3:升级案例2鼠标悬停显示和隐藏
toggle():鼠标点击合成事件
案例4:升级案例2鼠标点击显示和隐藏
代码案例:
//1.合成事件hover
$(function(){
// 参数中第1个回调函数的作用:鼠标触碰式触发
// 参数中第2个回调函数的作用:鼠标离开式触发
$("#btn2").hover(function(){
console.log('111')
// 标签显示show 属于jQuery中的动画效果
// $("#oDiv").show();
$("#oDiv").css("display","block");
},function(){
console.log('222')
// 标签隐藏
// $("#oDiv").hide();
$("#oDiv").css("display","none");
});
// toggle事件
$("#btn3").click(function(){
console.log("我点击了");
// 在jQuery中所有的动画效果都是默认改变标签的宽度,高度,透明度
$("#oDiv2").toggle(3000);
})
});
4.事件传播(事件冒泡)
传播:小-->中-->大
阻止传播:事件后面加上 return false
案例5:给body div span(在div中) 分别添加点击事件,测试事件传播
代码案例:
// 事件传播:在多个标签中设置点击事件,只允许当前点击的标签有效
// 其它则无效----解决 阻止事件传播
// 阻止事件传播的顺序:从小到大。
$(function(){
// p标签设置一个点击事件
$("p").click(function(){
alert('p段落的点击事件');
return false;//阻止事件传播
})
// 设置oDiv3的点击事件
$("#oDiv3").click(function(){
alert('oDiv3的点击事件')
return false;
})
// $("body").click(function(){
// alert('body点击事件')
// });
5.事件坐标
offsetX:当前元素左上角
clientX:窗口左上角
pageX:网页左上角
案例6:pageX实现 鼠标悬浮,获取鼠标坐标
代码案例:
// 事件坐标 pageX pageY 都是通过event事件对象调用
$("body").click(function(){
// 获取鼠标所点击的位置
// 鼠标的坐标
// console.log(event.pageX+" "+event.pageY);
// // 偏移量 考虑了外边距,边框,内填充
// console.log(event.offsetX+" "+event.offsetY);
// // 如果没有滚动条,与pageX和pageY是一样的
// // client 可视区宽度和高度
// console.log(event.clientX+" "+event.clientY)
});
});
6.移除事件:
元素.unbind("事件名")
案例7:按钮点击一次,不能再次点击
注意1:一般情况下,不会使用unbind,推荐使用变量控制事件
案例8:点击按钮偶数次可以,奇数次则失效
注意2:如果某个元素只允许使用一次事件,则可以使用one()
案例9:按钮只允许点击一次
代码案例:
<!-- 解绑事件 -->
<script type="text/javascript">
$(function(){
// unbind off
$("#btn4").click(function(){
alert("恭喜你中奖了~");
// 调用解绑事件
// $(this).off();
// $(this).disable();//禁用 无效
// disabled 是属性 不是样式 不能用css去设置
$(this).attr("disabled","disabled");
$(this).unbind();
});
var index = 1;
$("#btn5").click(function(){
// 点击(奇数次可以,偶数次不行)
// index为奇数的时候可以 为偶数的时候不行
if(index % 2 == 1){
console.log(index);
}
index++;
});
$("#btn6").one('click',function(){
alert("只有一次机会")
})
});
二.动画效果
1.基本
显示:show(Time)
隐藏:hide(Time)
切换:toggle(Time)
案例1:点击按钮,控制div显示和隐藏(基本动画)
代码案例:
function test1(){
// div隐藏和显示
$("div").eq(0).show(5000)
}
function test2(){
// div隐藏和显示
$("div").eq(0).hide(5000)
}
function test3(){
// div隐藏和显示
$("div").eq(0).toggle(5000)
}
2.滑动
slideUp(Time):动画收缩(向上滑动)-->隐藏
slideDown(Time):动画展开(向下滑动)-->显示
slideToggle(Time):动画切换
案例2:点击按钮,控制div显示和隐藏(滑动)
代码案例:
function test4(){
$("div").eq(1).slideUp(4000);
}
function test5(){
$("div").eq(1).slideDown(4000);
}
function test6(){
$("div").eq(1).slideToggle(4000);
}
3.淡入淡出(透明度)
fadeIn(Time):淡入(透明度减少)
fadeOut(Time):淡出(透明度增大)
fadeToggle(Time):切换
案例3:点击按钮,控制div显示和隐藏(透明度)
代码案例:
function test7(){
$("div").eq(2).fadeIn(4000);
}
function test8(){
$("div").eq(2).fadeOut(4000);
}
function test9(){
$("div").eq(2).fadeToggle(4000);
}
4.自定义动画
元素.animate({属性:属性值},Time)
缩放
width
height
案例4:点击按钮,控制div的宽度和高度变大
移动
top
left
案例5:点击按钮,控制div移动,距离网页左上角
移动(本元素),距离
top= "+="
left= "-="
案例6:点击按钮,控制div移动,距离本元素
代码案例:
function test10(){
$("div").eq(3).animate({
width:"+=500px",
height:"+=500px",
opacity:"0.1"
},10000)
}
$(function(){
// 定时器
window.setInterval(function(){
$("div").last().animate({
left:"+=5px"
},2);
},500);
})