jQuery事件与特效

最新推荐文章于 2024-08-17 21:49:37 发布

Leona__

最新推荐文章于 2024-08-17 21:49:37 发布

阅读量95

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/Leona__/article/details/120637028

版权

事件

鼠标事件

事件	说明
mouseenter	鼠标移入（无冒泡）
mouseleave	鼠标移出（无冒泡）
mouseover	鼠标移入
mouseout	鼠标移出
mousemove	鼠标移动
click	单击
dblclick	双击

复合事件

$(selector).hover(function(){enter事件},function(){leave事件})

键盘事件（参数e）

事件	说明
keydown	按键被按下
keyup	按键被抬起
keypress	可打印字符按键被点击

键盘按键返回值
e.keyCode
阻止默认按键事件
e.preventDefault()
示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <input type="text">
        <input type="submit" value="enter提交">
    </form>

</body>

</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
    $(window).on("keydown", function (e) {
        console.log(e.keyCode)
    })
    $("input:eq(0)").on("keydown", function (e) {
        if (e.keyCode == 13) {
            e.preventDefault()
        }
    })
</script>

上述代码：
1.控制台输出按键对应数值；
2.按回车不自动提交。

系统事件

事件	说明
$(window).resize(回调函数)	调整窗口大小执行

事件绑定

一次性绑定：one（“事件名”，function（）{}）
on（“事件名”，此参数可选，function（）{}）
示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</body>

</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
    //方法1:
    // $("ul").on("click", "li", function () {
    //     alert($(this).text())
    // })

    //方法2:
    $("li").on("click", function () {
        alert($(this).text())
    })
</script>

样式如下：
在这里插入图片描述

解除绑定

语法：$(selector).off（参数）

参数	说明
无	删除该元素全部事件
事件名	删除该元素此事件
事件名，回调函数	删除此事件的此函数

动画

分类	语法	说明
全部	hide（参数）	隐藏
	show（参数）	显示
	toggle（参数）	隐藏、显示切换
高度	slideDown（参数）	展开
	slideUp（参数）	收起
	slideToggle（参数）	展开、收起切换
透明度	fadeIn（参数）	淡入
	fadeOut（参数）	淡出
	fadeToggle（参数）	淡入、淡出切换

参数	说明
“slow”	慢，=600
“normal”	中等，=400
“fast”	快，=200
毫秒数	动画执行时间

定义动画

语法：$(selector).animate(参数)

参数	说明
参数1	{“样式属性”:“值”}
参数2	毫秒数（动画执行时间）
参数3	可选，动画结束后执行的回调函数

停止动画

语法：$(selector).stop(参数)

参数	说明
无参数	停止当前动画，继续执行后续动画
true	停止所有动画
true,true	停止当前动画，并显示当前动画结束样式

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: pink;
            position: relative;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <button>move</button>
    <button>stop</button>
    <div></div>
</body>

</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
    $("button:eq(0)").on("click", function () {
        $("div").animate({
            "top": "+=100px",
            "left": "+=50px"
        }, 1000).animate({
            "width": "-=10px",
            "height": "-=20px"
        }, 1000, function () {
            $("div").css("background-color", "red")
        })
    })
    $("button:eq(1)").on("click", function () {
        //停止当前动画
        //$("div").stop()
        //停止所有动画
        //$("div").stop(true)
        //停止当前动画并停在当前动画结束样式
        $("div").stop(true, true)
    })
</script>

今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）

Leona__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件与特效

事件鼠标事件事件说明mouseenter鼠标移入（无冒泡）mouseleave鼠标移出（无冒泡）mouseover鼠标移入mouseout鼠标移出mousemove鼠标移动click单击dblclick双击复合事件$(selector).hover(function(){enter事件},function(){leave事件})键盘事件（参数e）事件说明keydown按键被按下keyup按键被
复制链接

扫一扫