一.事件
加载Dom两种方式
window.onload方式
jQuery方式
绑定事件两种方式
元素.on("事件名",function(){})
元素.事件名(function(){})
合成事件/事件切换
hover():鼠标悬停合成事件
toggle():鼠标点击合成事件
事件传播(事件冒泡)
传播:小-->中-->大
阻止传播:事件后面加上return false
事件坐标
offsetX:当前元素左上角
clientX:窗口左上角
pageX:网页左上角
移除事件
元素.unbind("事件名")
二.动画效果
基本
显示: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="-="
——————————————————————
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
display: inline-block;
background: red;
//position:absolute
margin:auto
}
</style>
</head>
<body>
<script src="js/jquery-3.5.1.js"></script>
<div></div>
<a href="https://www.baidu.com">
<p>hd</p>
</a>
<button οnclick="$('div').toggle(1000)">点我</button>
<script>
$("p").click(()=>{
return false //阻止事件的冒泡
})
//事件
//点击 onclick
//鼠标 onmouseover onmouseout onmousemove onmouseleave
//键盘 onkeydown onkeyup onkeypress
//onsubmit 表格提交 onreset
//onchange 输入框的值发生改变的时候
//onblur 失去/onfocus 得到
//jquery的事件就是js去掉on
//js的事件只有一个
//jquery能有多个事件
$(() => {
$("table").on("click", "button", function() {
$(this).parents("tr").remove()
})
$("#add").click(function() {
let str = `<tr>
<td>苹果</td>
<td><button>删除</button></td>
</tr>`
$("table").append(str)
})
$("body").mousemove(e=>{
//e就是事件对象
console.log(e.clientX,e.pageX,e.offsetX)
})
$("body").unbind("mousemove")
$("div").mouseover(function (){
$(this).animate({
width:"300px",
height:"300px",
left:"30px",
top:"30px"
})
})
})
</script>
<table border="">
<tr>
<td>苹果</td>
<td><button>删除</button></td>
</tr>
</table>
<button id="add">增加</button>
</body>
</html>