思维导图：
Dom加载的两种方式：
js方式：不能写多个，写多个会被覆盖
jQuery方式：可以写多个，不会被覆盖
在3.3版本的类库中优先运行 jQuery
在1.7版本的类库中优先运行 js
//js方式
window.onload=function(){
console.info("js方式");
}
//jQuery方式
$(function(){
console.info("jQuery方式");
}绑定事件的两种方式 点击和悬停事件等
js部分：
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
//点击事件
$("#aa").on("click",function(){
alert("嘿嘿嘿");
})
//鼠标移上事件
$("#aa").bind("mouseover",function(){
alert("hh");
})
//点击事件
//--元素.事件名
$("#aa").click(function(){
alert("ddd");
}) body部分：
<a style="text-decoration: none;" href="#">显示</a>
<div id="aa">
<br />
<br />
<br />
<p>有点东西</p>
</div>合成事件/切换事件：
js部分：
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
$("#aa").hide();//隐藏
$("a").hover(function(){//鼠标移上事件
$("#aa").show();//显示
},function(){//鼠标移出事件
$("#aa").hide();//隐藏
})body部分：
<a style="text-decoration: none;" href="#">显示</a>
<div id="aa">
<br />
<br />
<br />
<p>有点东西</p>
</div>toggle要注意版本问题，1.7的版本是隐藏，3.3的版本是动画
js部分：
// --toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
$("#aa").hide();//隐藏
$("a").toggle(function(){//点击一下
$("#aa").show();//显示
},function(){//再点击一下
$("#aa").hide();//隐藏
})
//1.4 事件的传播(事件冒泡) 小p->中div->大body
$("p").click(function(){
console.info("p被打了");
})
$("div").click(function(){
console.info("div被打了");
return false;//阻止传播
})
$("body").click(function(){
console.info("body被打了");
})
//1.5 事件event的坐标[了解即可 pageX,pageY]
$("#aa").click(function(e){
console.info(e.pageX,e.pageY);//x,y轴
})
//1.6 事件的移除
//--按钮只能点击一次[2]
$("#btn").on("click",function(){
//做一系列事情
console.info(211015);
//将点击事件经行移除
$("#btn").off("click");//unbind()
//将按钮禁用
$("#btn").attr("disabled",true);
})
//一次
$("#btn").one("click",function(){
console.info(211015);
//将按钮禁用
$("#btn").attr("disabled",true);
})
//--按钮点击偶数次可行 奇数次不行
var i = 1;
$("#btn").click(function(){
if(i%2==0){
console.info(211015,i);//做一系列事情
}
i++;
}) body部分：
<button id="hmj">一边去</button>
<button id="xx">显示</button>
<button id="yy">隐藏</button>
<button id="zz">显示/隐藏</button>
<button id="bb">点我试试</button>
<a style="text-decoration: none;" href="#">显示</a>
<div id="aa">
<br />
<br />
<br />
<p>有点东西</p>
</div>动画
js部分：
/* 二、动画 */
//2.1 基本动画 [回调函数]
$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
$("#aa").show(1000，function(){
//回调函数
alert("来了，老弟");
});//1s显示
})
$("#yy").click(function(){
$("#aa").hide(2000);//隐藏
})
$("#zz").click(function(){
$("#aa").toggle(2000);//切换
})
//2.2 滑动动画
$("#aa").hide(); //默认隐藏
$("#xx").on("click", function() {
$("#aa").slideDown(1000); //1s显示
})
$("#yy").click(function() {
$("#aa").slideUp(2000); //隐藏
})
$("#zz").click(function() {
$("#aa").slideToggle(2000); //切换
})
//2.3 淡入淡出(透明度)
$("#aa").hide(); //默认隐藏
$("#xx").on("click", function() {
$("#aa").fadeIn(1000); //1s显示
})
$("#yy").click(function() {
$("#aa").fadeOut(2000); //隐藏
})
$("#zz").click(function() {
$("#aa").fadeToggle(2000); //切换
})
//2.4 自定义动画
//--缩放
$("#hmj").click(function(){
$("#aa").animate({
width:100,
heigth:400,
},1000);
})
//--移动[2]
$("#hmj").click(function(){
$("#aa").animate({
left:"+=100",
top:"+=100",
},1000);
})
// 旋转
$("#hmj").click(function(){
$("#aa").addClass("lll");
})
body部分：
<button id="hmj">一边去</button>
<button id="xx">显示</button>
<button id="yy">隐藏</button>
<button id="zz">显示/隐藏</button>
<button id="bb">点我试试</button>
<a style="text-decoration: none;" href="#">显示</a>
<div id="aa">
<br />
<br />
<br />
<p>有点东西</p>
</div>旋转移动淡出效果：
<html>
<head>
<meta charset="utf-8">
<title>作业1</title>
<style type="text/css">
#aa{
position: absolute;
top:500px;
left: 500px;
}
.ll{
transform: rotate(7200deg);
transition: all 10s;
}
</style>
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//淡出
$("#btn").click(function() {
$("#aa").addClass("ll");//旋转
for(i=0;i<100;i++){
$("#aa").animate({
left:"-=2000",
top:"-=2000",
},200);
$("#cc").fadeOut(8000); //淡出
}
})
})
</script>
</head>
<body>
<button id="btn">点击</button>
<div id="aa">
<img id="cc" src="../img/3.jpg" width="100px" height="100px" >
</div>
</body>
</html>
模拟心脏跳动效果：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa{
position: absolute;
top: 200px;
left: 200px;
}
</style>
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#bb").click(function(){
for(i=0;i<=100;i++){
$("#aa").animate({
width:400,
height:400,
},1000);
$("#aa").animate({
width:200,
height:200,
},1000);
}
})
})
</script>
</head>
<body>
<button id="bb">跳动</button>
<img id="aa" src="../img/3.jpg" width="200px" height="200px" >
</body>
</html>
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
