事件
加载Dom两种方式
window.onload方式
执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
编写个数：1个
jQuery方式
执行时间：网页结构绘制完成后，执行
编写个数：多个
两个都有的情况下执行顺序【面试题】
jQuery3.0：window.onload比jQuery先执行
jQuery1.0和2.0：jQuery比window.onload先执行
绑定事件两种方式
元素.on("事件名",function(){})
元素.事件名(function(){})
合成事件/事件切换
hover()：鼠标悬停合成事件
鼠标移上去第一个函数
鼠标移除第二个函数
toggle()：鼠标点击合成事件
事件传播（事件冒泡）
传播：小-->中-->大
阻止传播：事件后面加上 return false
事件坐标
offsetX：当前元素左上角
clientX：窗口左上角
pageX：网页左上角
移除事件：
元素.unbind("事件名")
注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
注意2：如果某个元素只允许使用一次事件，则可以使用one()
动画效果
基本
显示：show(Time)
隐藏:hide(Time)
切换：toggle（Time）
滑动
slideUp(Time)：动画收缩(向上滑动)-->隐藏
slideDown(Time)：动画展开(向下滑动)-->显示
slideToggle(Time)：动画切换
淡入淡出(透明度)
fadeIn(Time)：淡入(透明度减少)
fadeOut(Time)：淡出(透明度增大)
fadeToggle(Time)：切换
自定义动画
元素.animate({属性：属性值},Time)
缩放
width
height
移动
top
left
移动(本元素)，距离
top= "+="
left= "-="
事件代码（演示）
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* a标签属于行内元素，不能设置宽度和高度 */
a{
background-color: red;
/* 转成行内块状 或者块状 */
display: inline-block;
width:150px;
height: 40px;
/* 居中 */
text-align: center;
/* 行高 */
line-height: 40px;
/* 下划线 */
text-decoration: none;
}
/* 伪类选择器 */
a:hover{
background-color: yellow;
color: red;
}
</style>
<!-- 引入jQuery库 -->
<!-- <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> -->
<!-- jQuery1.7 -->
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 1.原生态javascript加载函数和jQuery加载函数的使用及区别
// (1).原生态js加载函数的编写 2种形式
b.window.addEventListener('事件名称',function(){}); 多个
a.window.onload = function(){} 1个 多个的情况，前者无效
// 在一个页面中出现多个window.onload，后者会覆盖前者
window.onload = function(){
alert('第1个加载函数');
}
window.onload = function(){
alert('第2个加载函数');
}
// ------------------------------------------------------
window.addEventListener('load',function(){
alert("111")
});
window.addEventListener('load',function(){
alert("222")
});
// jQuery的加载函数 2种 一个页面可以出现多次
$(document).ready(function(){
alert(111);
});
$(document).ready(function(){
alert(22);
});
// // 简写
$(function(){
alert(123);
})
// 2.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序
// 版本有关 jQuery3.0版本以上 js快
window.onload = function(){
alert("原生态js")
}
$(function(){
alert('jQuery')
});
</script>
<!-- ============================= -->
<script type="text/javascript">
// 加载函数
$(function(){
// 1.标签绑定绑定事件的方式
// (1)直接调用click点击事件的方法即可
$("#btn1").click(function(){
alert("我点击了这个按钮")
});
// (2)可以通过标签对象调用on这个方法来绑定一个指定的事件。
$("#btn1").on('click',function(){
alert("on实现的点击");
});
// (3)可以通过调用bind方法进行绑定一个事件
$("#btn1").bind('click',function(){
alert("bind 点击")
});
})
</script>
<script type="text/javascript">
//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);
})
});
</script>
<!-- 事件传播如何组织 -->
<script type="text/javascript">
// 事件传播：在多个标签中设置点击事件，只允许当前点击的标签有效
// 其它则无效----解决 阻止事件传播
// 阻止事件传播的顺序：从小到大。
$(function(){
// p标签设置一个点击事件
$("p").click(function(){
alert('p段落的点击事件');
return false;//阻止事件传播
})
// 设置oDiv3的点击事件
$("#oDiv3").click(function(){
alert('oDiv3的点击事件')
return false;
})
// $("body").click(function(){
// alert('body点击事件')
// });
// 事件坐标 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)
});
});
</script>
<!-- 解绑事件 -->
<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("只有一次机会")
})
});
</script>
</head>
<body>
<button id="btn1" disabled="disabled">按钮</button>
<hr>
<!-- 伪类选择器的使用hover -->
<a href="">且行且珍惜</a>
<hr>
<button type="button" id="btn2">按钮</button>
<div id="oDiv" style="width:100px;height: 100px;background-color: red;display: none;"></div>
<hr >
<button type="button" id = "btn3">toggle</button>
<div id="oDiv2" style="width:100px;height: 100px;background-color: red;display: none;"></div>
<hr>
<h4>事件传播如何阻止</h4>
<div id = "oDiv3" style="width: 200px;height: 200px;background-color: red;">
<br><br><br><br>
<p style="width:100%;height: 20px;background-color: yellow;">我是p段落</p>
</div>
<hr>
<h4>解绑事件</h4>
<button id="btn4">点击抽象</button>
<button id="btn5">点击（奇数次可以，偶数次不行）</button>
<button id="btn6">one方法 一次性</button></button>
</body>
动画效果（代码演示）
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test1(){
// div隐藏和显示
$("div").eq(0).show(5000)
}
function test2(){
// div隐藏和显示
$("div").eq(0).hide(5000)
}
function test3(){
// div隐藏和显示
$("div").eq(0).toggle(5000)
}
function test4(){
$("div").eq(1).slideUp(4000);
}
function test5(){
$("div").eq(1).slideDown(4000);
}
function test6(){
$("div").eq(1).slideToggle(4000);
}
function test7(){
$("div").eq(2).fadeIn(4000);
}
function test8(){
$("div").eq(2).fadeOut(4000);
}
function test9(){
$("div").eq(2).fadeToggle(4000);
}
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);
})
</script>
</head><body>
<button onclick="test1()">基本动画show</button>
<button onclick="test2()">基本动画hide</button>
<button onclick="test3()">基本合成动画toggle</button>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<hr>
<button onclick="test4()">slideUp</button>
<button onclick="test5()">slideDown</button>
<button onclick="test6()">slideToggle</button>
<div style="width: 100px;height: 100px;background-color: yellow;"></div>
<hr>
<button onclick="test7()">fadeIn</button>
<button onclick="test8()">fadeOut</button>
<button onclick="test9()">fadeToggle</button>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
<hr>
<button onclick="test10()">aniamte</button>
<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: orange;position: absolute;left: 0;top: 600px;"></div>
<br><br><br><br><br><br><br><br><br>
</body>
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
