JQuery事件和动画效果

最新推荐文章于 2024-08-18 10:54:05 发布

钟意

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量479

点赞数 2

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_61857264/article/details/123624226

版权

本文详细介绍了JavaScript加载DOM的两种方式，包括window.onload和jQuery的DOM准备就绪。接着，列举了常见的JS事件，如点击、鼠标、键盘和表单事件，并讨论了事件传播（冒泡）原理。此外，还展示了如何使用jQuery实现合成事件、事件切换以及移除事件。在动画效果部分，讲解了基本动画、滑动动画和淡入淡出效果的实现。最后，给出了具体的示例代码供读者参考学习。

摘要由CSDN通过智能技术生成

事件加载Dom的方式1.window.onload方式

2.jQuery方式

js常用事件:

合成事件/事件切换

事件传播/事件冒泡方式：从自己往比自己等级高的地方一层一层传送

事件
加载Dom的方式
1.window.onload方式

执行时间:整个网页中所有内容加载完成后,才会执行

编写个数:1

<script type="text/javascript">
    window.onload=()=>{
        alert('pppp')
    }
</script>

2.jQuery方式

执行时间:网页结构绘制完成后,执行

编写个数:多个

<script type="text/javascript">
    $(()=>{
        alert('jQuery加载完成')
    })
</script>

js常用事件:

点击 onclick
鼠标 onmouseover onmouseout onmousemove
键盘 onkeydown onkeyup onkeypress
表单提交 onsubmit 表单重置 onreset
输入框的值发生改变的时候 onchange
失去焦点 onblur 得到焦点 onfocus
双击事件 ondblclick

PS:jQuery事件仅在js事件上没有on，js的事件只有一个，jquery能有多个事件

ps:在正常函数中this是指自己

箭头函数中是指窗口（window）


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/jquery-3.5.1.js"></script>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="div"></div>
        <button type="button" id="del">点我删除div</button>
        <script type="text/javascript">
            $('#del').click(function (){
                $(this).siblings('div').remove()
            })
        </script>
    </body>
</html>

合成事件/事件切换

1. hover(over,out) 鼠标悬停合成事件

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

2. toggle(speed,easing,fn) 鼠标点击合成事件(第一次为隐藏第二次为显示)

speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/jquery-3.5.1.js"></script>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="div"></div>
        <button type="button" id="del" onclick="$('div').toggle(1000)">点我隐藏div</button>
        <script type="text/javascript">
            $('div').hover(function (){
                $(this).hide(1000) //div隐藏
            })
        </script>
    </body>
</html>

事件传播/事件冒泡
方式：从自己往比自己等级高的地方一层一层传送

阻止传播：事件后面加上 return false事件坐标

移除事件

1. offsetX 当前元素左上方

2. clientX 窗口左上方

3. pageX 网页左上方

动画效果

基本动画

显示: show(speed,easing,fn)

隐藏: hide(speed,easing,fn)

切换: toggle(speed,easing,fn)

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            margin: auto;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div></div>
    <button onclick="$('div').toggle(1000)">点我</button>
</body>
</html>

滑动动画

1. slideUp(speed,easing.fn) 动画收缩(向上滑动)-->隐藏

2. slideDown(speed,easing.fn) 动画展开(向下滑动)-->显示

3. slideToggle(speed,easing.fn) 动画切换

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/jquery-3.5.1.js"></script>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="div"></div>
        <button type="button" id="del" onclick="$('div').slideToggle(1000)">点我隐藏</button>
    </body>
</html>

淡入淡出

1. fadeIn(speed,easing,fn) 淡入(透明度减少)

2. fadeOut(speed,easing,fn) 淡出(透明度增大)

3. fadeToggle(speed,easing,fn) 切换

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

在动画完成时执行的函数，每个元素执行一次。

<script type="text/javascript">
    $('div').hover(function (){
        $(this).fadeToggle(1000) //div隐藏
    })
</script>

持续更新中

钟意

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery事件和动画效果

目录事件加载Dom的方式1.window.onload方式2.jQuery方式js常用事件:合成事件/事件切换事件传播/事件冒泡方式：从自己往比自己等级高的地方一层一层传送移除事件动画效果基本动画滑动动画淡入淡出事件加载Dom的方式1.window.onload方式执行时间:整个网页中所有内容加载完成后,才会执行编写个数:1<script type="text/javascript"> window.onload=()=...
复制链接

扫一扫