.da {
width: 200px;
height: 200px;
background: deeppink;
position: absolute;
top: 50px;
left: 50px;
}
a {
cursor: pointer;
}
p {
background: yellow;
text-align: center;
}
.abc{
transform: rotate(360deg);
transition: all 2s;
}
/* jQuery第四次课 */
/* 一、事件 */
//1.1 加载DOM两种方式(区别)
// 3.0版本及以上 window.onload 块
// 3.0版本以下 jQuery快
// window.onload 只会显示一个,其他的覆盖
// jQuery 会显示多个
// $(function(){
// console.info("jQuery")
// })
// window.onload=function(){
// console.info("window onload");
// }
// $(function(){
// console.info("jQuery")
// })
// window.onload=function(){
// console.info("window onload");
// }
$(function() {
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
// $(".da").on("click",function(){
// console.info("点击干啥");
// })
// $(".da").bind("mouseover",function(){
// console.info("aaa");
// })
//--元素.事件名
// $(".da").click(function(){
// console.info("点你咋的!")
// })
// $(".da").mouseout(function(){
// console.info("鼠标移除事件");
// })
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
// $(".da").hide();
// $("a").hover(function(){
// $(".da").show();
// },function(){
// $(".da").hide();
// })
//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
// $(".da").hide();
// $("a").toggle(function(){
// $(".da").show();
// },function(){
// $(".da").hide();
// })
// $(".da").toggle(1000);
//1.4 事件的传播(事件冒泡) 小p->中div->大body
// $("p").click(function(){
// console.info("p点击事件");
// // return false;
// })
// $("div").click(function(){
// console.info("div点击事件");
// // return false;
// })
// $("body").click(function(){
// console.info("body点击事件");
// // return false;
// })
//1.5 事件event的坐标[了解即可 pageX,pageY]
// $(".da").mouseover(function(event){
// console.info(event.pageX,event.pageY);
// })
//1.6 事件的移除
//--按钮只能点击一次[2]
// $("#btn").click(function(){
// console.info("点击一下");
// // $("#btn").unbind("click");//解除点击事件
// $("#btn").off("click");
// })
// $("#btn").one("click",function(){
// console.info("点击一下");
// })
//--按钮点击偶数次可行 奇数次不行
// var i=1;
// $("#btn").click(function(){
// i++;
// if(i%2==0){
// console.info("点击一下");
// }
// })
/* 二、动画 */
//2.1 基本动画 [回调函数]
// $(".da").hide();
// $("#showbtn").click(function(){
// $(".da").show(1000);
// })
// $("#hidebtn").click(function(){
// $(".da").hide(2000);
// })
// $("#shbtn").click(function(){
// $(".da").toggle(1000);
// })
//2.2 滑动动画
// $(".da").hide();
// $("#showbtn").click(function() {
// $(".da").slideDown(1000);
// })
// $("#hidebtn").click(function() {
// $(".da").slideUp(2000);
// })
// $("#shbtn").click(function() {
// $(".da").slideToggle(1000);
// })
// //2.3 淡入淡出(透明度)
// $(".da").hide();
// $("#showbtn").click(function() {
// $(".da").fadeIn(1000);
// })
// $("#hidebtn").click(function() {
// $(".da").fadeOut(2000);
// })
// $("#shbtn").click(function() {
// $(".da").fadeToggle(1000);
// })
//2.4 自定义动画
//--缩放
// $("#sf").click(function(){
// $(".da").animate({
// width:"100px",
// height:"400px"
// },1000);
// })
//--移动[2]
$("#yd").click(function(){
$(".da").animate({
top:"+=50px",
left:"+=50px"
},1000);
})
// $("#bbb").click(function(){
// //给div增加abc的样式
// $(".da").addClass("abc")
// })
})
大炮!
代码效果:
思路图:
精彩链接
发表评论