jQuery事件&动画（四）

一麟yl

于 2022-03-18 23:33:58 发布

阅读量892

点赞数 4

文章标签： jquery 动画 javascript

本文链接：https://blog.csdn.net/m0_67376124/article/details/123580218

版权

1.element.on/bind(event,function(){})事件委托

2element.event(function(){})

一，jQuery事件

毫不夸张的讲，jQuery就是为了处理事件特别设计的。

针对不同访问者的响应，通常被称之为事件。

tip：我们在设置事件的时候

常见的DOM事件有

鼠标事件

键盘事件

表单事件

文档//窗口处理事件

click

(点击事件)

keypress

(键盘按压事件)

submit

(表单提交事件)

load

(页面加载事件)

dblclick

(双击事件)

keydown

(键盘按下事件)

change

(表单改变事件)

resize

()

mouseenter

(鼠标移入事件)

keyup

(键盘事件)

focus

(得到焦点事件)

scroll

(滚动条事件)

mouseleave

(鼠标移除事件）

blur

(失去焦点事件)

unload

(页面关闭事件)

hover

(鼠标悬停事件)

加载DOM的两种方式

1window.onload

当整个页面全部被加载之后执行，只会执行一次，如果页面写了两个Windows加载事件，有且只对第一个生效。

2.jquery

网页结果绘制完成后执行，会执行多次

tip：有且只有jQuery3.0版本的window.onload会比jQuery先执行,其余版本都是jQuery优先于window.onload

notice：在jQuery中加载事件可以简写为$(()=>{})，我们在编写js的时候箭头函数和简单函数中的this指的是不同的东西

//常规函数
element.onclick=function(){
        this//指的是element
}

//箭头函数
element.onclick=()=>{
        this//指的是window
}

绑定事件的两种方式

1.element.on/bind(event,function(){})事件委托

//点击事件
$("good").on("click",functino(){
     console.log("hello world");        
})

2element.event(function(){})

//点击事件
$("good").click(function(){
console.log("hello world");
})

合成事件/事件切换

1.hover():鼠标悬停合成事件

hover()方法运行时还会运行的两个函数，即mouseenter()和mouseleave()，hover()函数具有两个参数

$("a").hover(function(){
      $(".big").show();//展示
},function(){
      $(".big").hide();//隐藏
})

2.toggle():鼠标点击合成事件

toggle()方法在jQuery1.8版本中就已经被废弃了，在1.9中几经被废除，toggle()方法中加入的两个或者多个函数click事件切换做的响应，当点击时调用第一个函数，再次被点击时就调用第二个函数，以此类推。

$("a").toggle(function(){
        console.log("点击一次");   
}.function(){
        console.log("点击两次");
},function(){
        console.log("点击三次");
})
//点击一次就显示点击一次，以此类推

目前我们使用的toggle是隐藏和显示

$("div").click(function(){
        alter("隐藏");
})
//点击一次时隐藏点击两次就是显示

事件传播（事件冒泡）

tip：事件冒泡是从子元素到父元素，而事件传播自我是相反的，从父元素到子元素

1传播方式：

从小到大

2.阻止传播：

在事件后面加上return false；

3.代码示例

$("p").click(function(){
        console.log("p被教训了");
})
$("div").click(function(){
        console.log("div被教训了");
        return false;//阻止传播 
})
$("body").click(function(){
        console.log("body被教训了");
})
//控制台结果为：p被教训了   div被教训了

移除事件

1.element.unbind/off(event)

$("button").unbind("click");//移除点击事件

$("button").off("click");//移除点击事件

2.element.one(event,data,function)

$("button").one("click",function(){
        console.log("只能被点击一次");
})

二，jQuery动画

基本动画

1.控制元素的隐藏和显示

$(selector).hide/show(speed,callback)

speed指的是显示/隐藏的速度，可以取以下值：“show”、"fast"或毫秒

callback指的是执行了hide/show之后执行的函数

$("button").click(function(){
       $(".a").show(1000,function(){
            alert("显示完毕");
    });
})

$("button").click(function(){
        $("button").hide(2000);//将延迟设置为2s
})

2.toggle

toggle刚好包括以上两个，点击一次就是隐藏，再点击一次就是显示

$("#a").click(function(){
        $(".big").toggle(1000);//点击一次隐藏,再点击一次就是显示,延迟为1s
})

滑动动画

1.控制元素的上下滑动效果

$(selector).slideDown(speed,callback)；//向下滑下

$(selector).slideUp(speed,callback);//向上滑下

speed参数规定隐藏/显示的速度，可以取以下的值：“slow”,"fast"或毫秒

2.slideToggle()

$("button").click(function(){
        $(".big").slideToggle(1000);    
})
//点击一次就向上滑动，再点击一次就想下滑动，延迟为1s

淡化动画

1.控制元素的淡入和淡化

fadeIn(speed,callback)淡入

fadeOut(speed,callback)淡出

$("#btn").click(function(){
        $(".big").fadeIn(1000);//淡入
})
$("#btn").click(function(){
        $(".big").fadeOut(1000);//淡出
})

2.fadeToggle()

$("#btn").click(function(){
        $("big").fadeToggle(1000);
})
//点击一次就淡出，再点击一次就淡入

自定义动画

$(selector).animate({params},speed,callback)

params填写css样式

speed延迟

callback执行动画后的函数

//点击按钮，控制dic的大小
$("#btn").click(function(){
        $(".big").animate({
            height:"100px",
            width:"100px"
    },1000)
})

//点击按钮控制div的移动，距离网页左上角
$("#btn").click(function(){
        $(".big").animate({
            top:100,
            let:100
    },1000)
})
//点击按钮控制div的移动，距离此元素
$("#btn").click(function(){
        $(".big").animate({
            top:"+=10",
            let:"+=20"
    },1000)
})

掌握jQuery的事件，可以在我们编写js的时候省很多事儿。