一、事件
函数部分
//1.1 加载DOM两种方式(区别)
//js 不可以写多个 多个会被覆盖
/* window.οnlοad=function(){
console.info("js方式1");
}
window.οnlοad=function(){
console.info("js方式2");
}
window.οnlοad=function(){
console.info("js方式3");
} */
//jQuery方式 可以写多个 并且都会被执行
/* $(function(){
console.info("jQuery方式1");
})
$(function(){
console.info("jQuery方式2");
})
$(function(){
console.info("jQuery方式3");
})
$(function(){
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
//on()
/* $("#aa").on("click",function(){
alert("干啥");
}) */
//bind()
/* $("#aa").bind("click",function(){
alert("干啥");
}) */
//--元素.事件名
/* $("#aa").click(function(){
alert('干啥');
}) */
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
/* $("#aa").hide();//隐藏
$("a").hover(function(){//鼠标移上
$("#aa").show();//显示
},function(){//鼠标移出
$("#aa").hide();//隐藏
}) */
//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
/* $("#aa").hide();//隐藏
$("a").toggle(function(){//点击一次
$("#aa").show();//显示
},function(){//再点击一次
$("#aa").hide();//隐藏
}) */
//$("#aa").toggle(1000);
//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);
}) */
//1.6 事件的移除
//--按钮只能点击一次[2]
/* $("#btn").on("click",function(){
//做一列事情
console.info("44944");
//将点击事件进行移除
$("#btn").off("click")//unbind()
//将按钮禁用
$("#btn").attr("disabled",true);
}) */
//一次
/* $("#btn").one("click",function(){
console.info(44944);
//将按钮禁用
$("#btn").attr("disabled",true);
}) */
//--按钮点击偶数次可行 奇数次不行
/* var i = 1;
$("#btn").click(function(){
if(i%2==0){
console.info(44944,i);//做一系列事情
}
i++;
}) */
二、动画
//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(1000);//切换
}) */
//2.2 滑动动画
/* $("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
$("#aa").slideDown(1000);//1s 显示
})
$("#yy").click(function(){
$("#aa").slideUp(2000);//隐藏
})
$("#zz").click(function(){
$("#aa").slideToggle(1000);//切换
}) */
//2.3 淡入淡出(透明度)
/* $("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
$("#aa").fadeIn(1000);//1s 显示
})
$("#yy").click(function(){
$("#aa").fadeOut(2000);//隐藏
})
$("#zz").click(function(){
$("#aa").fadeToggle(1000);//切换
}) */
//2.4 自定义动画
//--缩放
/* $("#bbb").click(function(){
$("#aa").animate({
width:100,
height:300
},1000);
}) */
//--移动[2]
/* $("#bbb").click(function(){
$("#aa").animate({
left:"100px",
top:"100px"
},1000);
}) */
//在自身基础上面进行移动
/* $("#bbb").click(function(){
$("#aa").animate({
left:"+=5",
top:"+=8"
},1000);
}) */
/* $("#bbb").click(function(){
$("#aa").addClass("xyz");
}) */
样式:
<style type="text/css">
#aa{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;/* 绝对定位 */
top:50px;
left:50px;
}
p{
text-align: center;/* 水平居中 */
background-color: yellow;
}
.xyz{
transform: rotate(360deg);
transition: all 1s;
}
</style>
<body>
<button id="bbb">变便便</button>
<button id="xx">显示[展开](淡入)</button>
<button id="yy">隐藏[收缩](淡出)</button>
<button id="zz">显示/隐藏[展开/收缩](淡入/淡出)</button>
<button id="btn">点我试试</button>
<a style="text-decoration: none;" href="#">显示</a>
<div id="aa">
<br />
<br />
<p>这是一巴掌</p>
</div>
</body>
注意:
在写函数之前一定要引入外部js 以及另起一个script块