后面有详细代码
1. 事件 3
1.1. 加载Dom两种方式
1.1.1. window.onload方式
1.1.2. jQuery方式
1.1.3. 案例1：测试两种方式的区别【个数 顺序】
1.2. 绑定事件两种方式
1.2.1. 元素.on(“事件名”,function(){})
1.2.2. 元素.事件名(function(){})
1.3. 合成时间/事件切换
1.3.1. hover():鼠标悬停合成事件
1.3.2. toggle():鼠标点击事件
1.4. 事件传播(事件冒泡)
1.4.1. 传播：小---->中---->大
1.4.2. 阻止传播：事件后面加上 return false
1.5. 事件坐标
1.5.1. offsetX:当前元素左上角
1.5.2. clientX:窗口左上角
1.5.3. pageX:网页左上角
1.6. 移除事件
1.6.1. 元素.unbind(“事件名”);
2. 动画
2.1. 基本
2.1.1. 显示：show(time);
2.1.2. 隐藏：hide(time);
2.1.3. 切换：toggle(time);
2.2. 滑动 9
2.2.1. slideUp(time)：动画收缩(向上滑动)---->隐藏
2.2.2. slideDown(time)：动画展开(向下滑动)----->显示
2.2.3. slideToggle(time)：动画切换
2.3. 淡入淡出(透明度)
2.3.1. fadeIn(time)：淡入(透明度减少)
2.3.2. fadeOut(time)：淡出(透明度增加)
2.3.3. fadeToggle(time)：切换
2.4. 自定义动画
2.4.1. 缩放，元素.animate({属性:属性值},time)
2.4.2. 移动，元素.animate({属性:属性值},time)
2.4.3. 移动(本元素)，距离
代码语言：javascript复制<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js">
</script>
<script type="text/javascript">
//被覆盖,结果只有一句话
// window.onload=function(){
// console.info("window.onload1");
// }
// window.onload=function(){
// console.info("window.onload2");
// }
// window.onload=function(){
// console.info("window.onload3");
// }
//三句都打印
// $(function( {
// console.info("jQuery1");
// })
// $(function() {
// console.info("jQuery2");
// })
// $(function() {
// console.info("jQuery3");
// })
$(document).ready(function(){
// console.info("全拼写法");
//鼠标点击事件
$(".big").on("click",function(){
console.info("点击了");
})
//鼠标点击事件
$(".big").click(function(){
console.info("又点击了");
})
//鼠标进来事件1
//on---绑定事件
// $(".big").on("mouseenter",function(){
// console.info("鼠标进来了1");
// })
//鼠标出去事件1
// $(".big").on("mouseleave",function(){
// console.info("鼠标出去了1");
// })
//鼠标进来事件2
$(".big").mouseenter(function(){
console.info("鼠标进来了2");
})
//鼠标出去事件2
$(".big").mouseleave(function(){
console.info("鼠标出去了2");
})
//hover:鼠标悬浮---显示和隐藏
//效果：鼠标移动到h2标签就显示盒子，离开就隐藏盒子
// $(".big").hide();
$("h2").hover(function(){
$(".big").show();
},function(){
$(".big").hide();
})
//toggle:鼠标点击---显示和隐藏
//点击第一次显示盒子，点击第二次隐藏盒子，再点就显示，再点就隐藏 循环效果。
// $("h2").toggle(function(){
// $(".big").show();
// },function(){
// $(".big").hide();
// })
// $("p").css("background","blue");
//事件传播(事件冒泡)
//给p标签添加点击事件现在点击p标签的内容 就可以触发事件，点击页面的其它位置不会触发。
$("p").click(function(){
console.info("p被点击了");
//阻止传播：事件后面加上 return false
return false;
})
//给div添加点击事件,点击了p标签就会触发到两个事件,p属于div的一部分。
$(".big").click(function(){
console.info("div被点击了");
return false;
})
//给body添加点击事件 小-中-大
$("body").click(function(){
console.info("body被点击了");
return false;
})
//offsetX:当前元素左上角
//给div添加鼠标移动事件，求出以div左上角为0,0 起始点的 鼠标位置
// $(".big").mousemove(function(event){
// //event:事件
// var x = event.offsetX;//获得鼠标x坐标
// var y = event.offsetY;//获得鼠标y坐标
// $("#xy").text(x "," y);
// })
//pageX：页面左上角的坐标
//给div添加鼠标移动事件，求出以网页左上角为0,0 起始点的 鼠标位置
// $(".big").mousemove(function(event){
// //event:事件
// var x = event.pageX;
// var y = event.pageY;
// $("#xy").text(x "," y);
// })
//clientX:窗口左上角
//给div添加鼠标移动事件，求出以窗口左上角为0,0 起始点的 鼠标位置
// $(".big").mousemove(function(event){
// //event:事件
// var x = event.clientX;//获得鼠标x坐标
// var y = event.clientY;//获得鼠标y坐标
// $("#xy").text(x "," y);
// })
//移出事件，直接对元素使用unbind 或 off 来移出指定的事件例如在某些情况下，按钮只能点击一次，点击一次后再点击就无效
// var i=0;
// $("#myBtn").click(function(){
// i ;
// // 点击按钮偶数次可以，奇数次则失效
// if(i%2==0){
// console.info("试试就试试" i);
// }else{
// //上面代码执行后 就移除按钮的点击事件
// // $("#myBtn").unbind("click");
// }
// })
//动画
// $("#myBtn").one("click",function(){
// console.info("点了");
// })
//基本动画---显示show(time);
$("#show").click(function(){
$(".big").show(1000);
})
//基本动画---隐藏hide(time);
$("#hide").click(function(){
$(".big").hide(1000);
})
//基本动画---切换toggle(time);
$("#showAndHide").click(function(){
$(".big").toggle(1000);
})
//滑动---slideDown(time)：动画展开(向下滑动)----->显示
$("#slideDown").click(function(){
$(".big").slideDown(1000);
})
//滑动---slideUp(time)：动画收缩(向上滑动)---->隐藏
$("#slideUp").click(function(){
$(".big").slideUp(1000);
})
//滑动---slideToggle(time)：动画切换
$("#slideToggle").click(function(){
$(".big").slideToggle(1000);
})
//淡入淡出：fadeIn(time)：淡入(透明度减少)
$("#fadeIn").click(function(){
$(".big").fadeIn(1000);
})
//淡入淡出：fadeOut(time)：淡出(透明度增加)
$("#fadeOut").click(function(){
$(".big").fadeOut(1000);
})
//淡入淡出：fadeToggle(time)：切换
$("#fadeToggle").click(function(){
$(".big").fadeToggle(1000);
})
//自定义动画
//变大---移动，元素.animate({属性:属性值},time)
$("#bigBtn").click(function(){
$(".big").animate({
width:300,
height:300
},1000)
})
//变小
$("#smallBtn").click(function(){
$(".big").animate({
width:200,
height:200
},1000)
})
//移动
$("#runBtn").click(function(){
$(".big").animate({
left:10,
top:10
},1000)
})
// =
$("#topBtn").click(function(){
$(".big").animate({
left:"-=50",
top:" =50"
},1000)
})
})
</script>
</head>
<body>
<h2>好消息</h2>
<input type="button" name="" id="topBtn" value=" =" />
<br>
<input type="button" name="" id="runBtn" value="走你" />
<br>
<input type="button" name="" id="bigBtn" value="变大" />
<input type="button" name="" id="smallBtn" value="变小" />
<br>
<input type="button" name="" id="myBtn" value="点下试试" />
<input type="button" name="" id="show" value="显示" />
<input type="button" name="" id="hide" value="隐藏" />
<input type="button" name="" id="showAndHide" value="显示/隐藏" />
<br>
<input type="button" name="" id="slideDown" value="展开" />
<input type="button" name="" id="slideUp" value="收缩" />
<input type="button" name="" id="slideToggle" value="展开/收缩" />
<br>
<input type="button" name="" id="fadeIn" value="淡入" />
<input type="button" name="" id="fadeOut" value="淡出" />
<input type="button" name="" id="fadeToggle" value="淡入/淡出" />
<div class="big" style="position: absolute; left: 100px; top: 100px;">
<br>
<p>今天是个好日子</p>
</div>
<span id="xy"></span>
</body>
</html>以上就是今天的分享
