hellohello！我又来啦~今天的小知识来了噢，大家准备接招了吗o~o
目录
一.加载Dom两种方式
1.window.onload方式
<1>.window.onload方式只会执行一次
<2>.整个网页中所有内容（包括图片）加载完成后，才会执行
2.jQuery方式
<1>.jQuery可以执行多条同样的方法
<2>.网页结构绘制完成后，执行
window.onload=()=>{} //加载事件
$(()=>{}) //加载事件(jQuery中的简写形式)DOM事件：
<1> 点击 click ondblclick 双击事件
<2>.鼠标 mouseover mousemove mouseout mouseleave mousewheel(鼠标滑轮)
<3>.键盘 onkeydown(按下) onkeyup(松开) onkeypress(按下一次)
<4>.表单 onsubmit 表单提交 onreset 表单重置 onchange 输入框的值发生改变的时候
<5>.焦点 onblur 失去焦点 onfocus 得到焦点.......
二.绑定事件两种方式
1.元素.on("事件名"，function(){} )
2.元素.事件名(function(){} )
//元素 .on (这个on是事件委托)
$("table").on("click","button",function(){
$(this).parents("tr").remove();
}) this在函数中的用法：
this在正常函数中就是this
this在箭头函数中就是window
三.合成事件/事件切换
1.hover():鼠标悬停合成事件
2.toggle():鼠标点击合成事件
四.事件传播
1.传播方式：从小到大
2.阻止传播：事件后面加上：return false
3.eg：
$("p").click(()=>{
alert("---")
return false;//阻止事件的冒泡
})五.移除事件
元素.unbind("事件名")
温馨提示：1.一般情况下，不会使用unbind，推荐使用变量控制事件
2.如果某个元素只允许使用一次事件，则可以使用one()
//元素.unbind('事件名')
//unbind 绑定
$("body").unbind("mousemove");//解除事件
六.事件坐标
1.offsetX:当前元素左上角
2.clientX:窗口左上角
3.pageX：网页左上角
代码示例：
$("body").mousemove(e=>{
//e就是事件对象
console.log(e.clienX,e.pageX,e.offsetX)
})七.动画效果
1.基本
<1>.显示：show(Time)
<2>.隐藏：hide(Time)
<3>.切换：toggle(Time) 【隐藏和显示来回切换】
2.滑动
<1>.slideUp(Time) 动画收缩（向上滑动）->隐藏
<2>.slideDown(Time) 动画展开（向下滑动）->显示
<3>.slideToggle(Time) 动画切换
3.淡入淡出（透明度）
<1>.fadeIn(Time)：淡入（透明度减少）
<2>.fadeOut(Time)：淡出（透明度增大）
<3>.fadeToggle(Time)：切换（淡入淡出来回切换）
代码示例：
$("div").fadeToggle(5000);4.自定义动画：
移动：top left
$("div").mouseover(function(){
$(this).animate({
width:"300px",
height:"400px",
//能让left和top生效，只能用绝对布局position: absolute;
// left:"30px",
// top:"30px",
})
})八.案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<style>
div{
width: 100px ;
height: 200px;
background-color: #FF0000;
display: block;
margin: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)%;
}
</style>
<!-- 导入jQuery文件 -->
<script src="Index/jquery-3.5.1.js"></script>
</head>
<body>
<div></div>
<a href="https://www.baidu.com">
<p>安徽的教授和vi速度v</p>
</a>
<button onclick="$('div').toggle(1000)">点我</button>
<table border>
<tr>
<td>🍉🍉🍉</td>
<td>99.00</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td>🍎🍎🍎</td>
<td>188.00</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td>🍓🍓🍓</td>
<td>299.00</td>
<td>
<button>删除</button>
</td>
</tr>
</table>
<button id="add">增加</button>
<script>
//js中的事件
//点击 onclick
//鼠标 onmouseover onmousemove onmouseout onmouseleave onmousewheel(鼠标滑轮)
//键盘 onkeydown(按下) onkeyup(松开) onkeypress(按下一次)
//onsubmit 表单提交 onreset 表单重置
//onchange 输入框的值发生改变的时候
//onblur 失去焦点 onfocus 得到焦点
//ondblclick 双击事件
//jQuery中的事件就是把on去掉
//js的事件只有一个
//jQuery能有多个事件
$("div").click(()=>{
alert("0000");
})
$("div").click(function(){
alert("aaaaa");
})
window.onload=()=>{} //加载事件
$(()=>{}) //加载事件(jQuery中的简写形式)
//用jQuery方法进行删除
$(()=>{
//当窗口加载完成后，才会调用这个方法
// $("td button").click(function(){
// $(this).parents("tr").remove();
// })
//元素 .on (这个on是事件委托)
$("table").on("click","button",function(){
$(this).parents("tr").remove();
})
//增加方法
$("#add").click(function(){
let str=`<tr>
<td>🍇🍇🍇</td>
<td>199.00</td>
<td>
<button>删除</button>
</td>
</tr>`
$("table").append(str);
})
});
//this在正常函数中就是this
//this在箭头函数中就是window
//toggle 控制是否显示的
//事件传播（事件冒泡）
$("p").click(()=>{
alert("---")
return false;//阻止事件的冒泡
})
//（页面距离）
$("body").mousemove(e=>{
//e就是事件对象
console.log(e.clienX,e.pageX,e.offsetX)
})
// unexpected end of input
// 输入意外终止
//元素.unbind('事件名')
//unbind 绑定
$("body").unbind("mousemove");//解除事件
//toggle(time)隐藏和显示来回切换
//slideUp :动画收缩（向上滑动）->隐藏
//slideDown:动画展开（向下滑动）->显示
//slideToggle:动画切换
//重点！：slideToggle
//fadeIn(Time):淡入
//fadeOut:淡出
// $("div").fadeOut(5000);
//fadeToggle(Time)：淡入淡出来回切换
$("div").fadeToggle(5000);
$("div").mouseover(function(){
$(this).animate({
width:"300px",
height:"400px",
//能让left和top生效，只能用绝对布局position: absolute;
// left:"30px",
// top:"30px",
})
})
</script>
</body>
</html>
好啦~今天的知识就到这里了噢，下期见！
日复一日的生活也会有新的快乐.
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
