jQuery04-事件与动画

最新推荐文章于 2022-03-22 16:30:59 发布

黩817

最新推荐文章于 2022-03-22 16:30:59 发布

阅读量819

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_66939060/article/details/123636092

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、事件

1.1 加载DOM两种方式(区别)

javascript:

window.onload=function(){
console.info("js方式");
}

只能有一个，多个会被覆盖

jQuery:

$(function(){
console.info("jQuery方式");
})

可以有多个,并且都会执行

1.2 绑定事件的两种方式[eg,:点击、悬停事件等等]

--元素 .on/bind() 用法

点击事件

$(".big").on("click",function(){
alert("点我开除")
})

悬停事件

$(".big").bind("mouseover",function(){
alert("加油加油")
})

--元素.事件名

点击事件

$(".big").click(function(){
alert("点我开除")
})

悬停事件

$(".big").mouseover(function(){
alert("点我干哈")
})

1.3合成事件/事件切换

--hover() 悬停控制元素的显示和隐藏

$("a").hover(function(){
    //鼠标移上事件 mouseover
    $(".big").show();//显示
},function(){
    //鼠标移出事件 mouseout
    $(".big").hide()//隐藏
})

--toggle()点击控制元素的显示和隐藏(需要注意版本问题)

$("a").toggle(function(){
	//鼠标移上事件 mouseover
	$(".big").show();//显示
},function(){
	//鼠标移出事件 mouseout
	$(".big").hide()//隐藏
})

1.4事件的传播(事件冒泡) 小->中->大

例如：

<html>
   <head>
       <meta charset="utf-8" />
       <title>jQuery04</title>
       <style type="text/css">
           .big {
               background-color: yellow;
               width: 200px;
               height: 200px;
               position: absolute;
               /* 绝对定位 */
               left: 100px;
               top: 100px;
           }

           p {
               background-color: pink;
               text-align: center;
               /* 居中 */
           }
       </style>

</head>

<div class="big">
           <br />
           <br />
           <p>这是一巴掌</p>
       </div>
   </body>
</html>

由上述代码可以看出关系为

p->div->body的关系

$(" p").click(function(){
    alert("p被攻击了")
})
$("div").click(function(){
    alert("div被攻击了")
})
$("body").click(function(){
	alert("body被攻击了")
})

当点击p标签的时候 div body都会有相应

而点击div标签的时候只有body有相应

这叫做事件的传播（事件冒泡）

1.5 事件event的坐标[了解即可 pageX,pageY]

$(".big").click(function(e){
    console.info(e.pageX,e.pageY);//XY坐标
})

1.6 事件的移除

--按钮只能点击一次[2]

$("#btn").on("click",function(){
	//做一系列事件
	console.info("44944")
	//将点击事件移除
	$("#btn").unbind("click");//
	//让按钮禁用
	$("#btn").attr("disabled",true);
})

--让按钮只能在2，4，6，8偶数次可以点击有效

var i=0;
$("#btn").click(function(){
	if(i%2==0){
	alert("嘿嘿嘿")
	}
     i++;
})

二、动画

2.1 基本动画[回调函数]

$(".big").hide();//默认隐藏

$("#aa").click(function(){
$(".big").show(1000,function(){
	alert("来了老弟")//等动画效果结束后的任意事件
});//1s
})

$("#bb").click(function(){
	$(".big").hide(2000);//1s
})

$("#cc").click(function(){
 $(".big").toggle(2000);//1s
})

事件都是可以加上回调函数

滑动动画

$(".big").hide();//默认隐藏
$("#aa").click(function(){
$(".big").slideDown(1000);//1s后滑动显示
})
$("#bb").click(function(){
$(".big").slideUp(2000);//1s后滑动隐藏
})
$("#cc").click(function(){
$(".big").slideToggle(2000);//1s按前面两个来
})

2.3 淡入淡出（本质就是透明度）

$(".big").hide();//默认隐藏
$("#aa").click(function(){
$(".big").fadeIn(1000);//1s
})
$("#bb").click(function(){
$(".big").fadeOut(2000);//1s
})
$("#cc").click(function(){
$(".big").fadeToggle(2000);//1s
})

2.4 自定义动画

--缩放

$("#dh").click(function(){
$(".big").animate({
	width:100,//width:"100px"
	height:300//height:"300px"
	},1000);
})

--移动[2]

$("#dh").click(function() {
$(".big").animate({
    top: 200, 
    left: 200 
    }, 1000);
})

黩817

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录