jQuery.04.动画和事件

最新推荐文章于 2024-10-07 09:24:46 发布

Champion_me

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量83

点赞数 3

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/Champion_me/article/details/123618388

版权

一、思维导图

在这里插入图片描述

二、加载事件

1.窗口加载完成过后才会调用函数

window.onload=()=>{}//加载事件
		$(()=>{})//加载事件简写

三、jQuery事件和JS事件的区别

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

jQuery的事件就是js去掉on
js的事件只有一个
jQuery能有多个事件

四、this在箭头函数和正常函数中的区别

this在正常函数中就是this
this在箭头函数中函数就是window

五、委托事件

一：什么是事件委托？

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

二：为什么要用事件委托？

1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。

三、委托事件
在这里插入图片描述

六、案例

<!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>
<a href="https://www.baidu.com">
    <p>dasdasdasdsada</p>
</a>
<button onclick="$('div').toggle(1000)">点我</button>
<script src="js/jquery-3.5.1.js"></script>
<script>

    $("p").click(()=>{
        alert("---")
        return false //阻止事件的冒泡
    })

    window.onload=()=>{} //加载事件
    $(()=>{}) //加载事件
    $(()=>{
        //窗口加载完成
        $("table").on("click","button",function () {
            $(this).parents("tr").remove()
        })
        //add有两个点击事件
        $("#add").click(function (){
            let str=`<tr>
                        <td>🍉🍉🍉🍉🍉🍉</td>
                        <td>
                            <button>点我删除</button>
                        </td>
                    </tr>`
            $("table").append(str)
        })

        $("body").mousemove(e=>{
            // e就是事件对象
            console.log(e.clientX,e.pageX,e.offsetX)
        })

        $("body").unbind("mousemove")

        $("div").mouseover(function (){
            $(this).animate({
                width:"300px",
                height:"300px",
                // left:"30px",
                // top:"30px"
            })
        })
    })

</script>
<table border>
    <tr>
        <td>🍉🍉🍉🍉🍉🍉</td>
        <td>
            <button>点我删除</button>
        </td>
    </tr>
    <tr>
        <td>🍉🍉🍉🍉🍉🍉</td>
        <td>
            <button>点我删除</button>
        </td>
    </tr>
</table>
<button id="add">点我增加</button>
</body>
</html>