jQuery4

最新推荐文章于 2023-07-23 21:14:20 发布

陈峰806

最新推荐文章于 2023-07-23 21:14:20 发布

阅读量1.8k

点赞数 1

文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_65768991/article/details/123624605

版权

本文详细介绍了jQuery中的事件处理，包括事件加载的DOM两种方法、事件绑定、事件传播、事件坐标、移除事件、动画效果以及自定义动画。重点讲解了如何使用jQuery进行元素操作，如点击、滑动、淡入淡出等，并通过实例展示了事件的绑定和传播机制。同时，文章还探讨了如何通过jQuery实现元素的动画效果，如滑动、淡入淡出和自定义动画效果。

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

事件

jquery的事件就是js去掉on
js的事件只有一个
jquery能有多个事件
点击 onclick
鼠标 onmouseover onmouseout onmousemove
键盘 onkeydown onkeyup onkeypress
表单提交 onsubmit onreset
onchange 输入框的值发生改变的时候
onblur 失去/onfocus 得到
ondblclick 双击事件

加载Dom打额两种方法

window.onload方式
执行时间：当整个网页全部加载完成后才执行
编写个数：1

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

jQuery方式
执行时间：网页结构绘制完后执行
编写个数：多个（可执行多个）

$(()=>{}) //加载事件

注：在jQuery3.0中window.onload比jQuery先执行
在jQuery1.0和2.0中jQuery比window.onload先执行

绑定事件的两种方式

元素.on（“事件名”，function（）{}）
元素.事件名（function（）{}）

 $("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)
        })

合成事件/事件切换

hover() :鼠标悬停合成事件
当鼠标移上时触发第一个函数，
当鼠标移出时触发第二个函数。

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

<button onclick="$('div').toggle(1000)">点我</button>

事件传播（事件冒泡）

传播：小>中>大
阻止传播：事件后面加上return false

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

事件坐标

offsetX：当前元素左上角
clientX：窗口左上角
pageX：网页左上角

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

移除事件

元素． unbind (＂事件名＂)
注1：一般情况下，不会使用 unbind ，推荐使用变量控制事件
注意2：如果某个元素只允许使用一次事件，则可以使用one0案例9：按钮只允许点击一次

$("body").unbind("mousemove")
//运行后移除mousemove事件

动画效果

基本

显示： show ( Time )隐幕： hide ( Time )
切换： toggle ( Time )

滑动

slideUp ( Time )：动画收缩（向上滑动）–＞隐藏
slideDown ( Time )：动画展开（向下滑动）–＞显示
slideToggle ( Time )：动画切换

淡入淡出

fadeln ( Time )：淡入（透明度减少）
fadeOut ( Time )：淡出（透明度增大）
fadeToggle ( Time )：切换 (fadeln ( Time ) 与fadeOut ( Time )的结合)

$("div").fadeOut(5000)
//五秒内淡出
$("div").fadeIn(5000)
//五秒内淡入

自定义动画

元素． animate （尾性：尾性值）. Time )
缩放 width height
移动 top left
移动（本元素），距离 left =＂-=＂ top ="+="

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

移入前
在这里插入图片描述
移入后

总览

<!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=()=>{} //加载事件
    $(()=>{}) //加载事件

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

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

    $(()=>{
        //窗口加载完成
        /**
        $("td>button").click(function (){
            $(this).parents("tr").remove()
            alert("---")
        })
         **/
        $("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)
        })

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

        $("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>