jQuery事件

最新推荐文章于 2022-11-04 14:57:24 发布

wzh110110110

最新推荐文章于 2022-11-04 14:57:24 发布

阅读量171

点赞数

分类专栏： jQuery笔记文章标签： jquery

本文链接：https://blog.csdn.net/weixin_50652993/article/details/119549066

版权

jQuery笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery事件

一、鼠标事件
- 分类
- 示例
二、键盘事件
- 分类
- 示例
三、表单事件
- 分类
- 示例
四、窗口事件
- 分类
- 示例

一、鼠标事件

分类

鼠标事件	说明
click	鼠标点击元素时触发
dbclick	鼠标双击元素时触发
mouseenter	鼠标进入或经过元素时触发
mouseleave	鼠标离开元素时触发
hover	鼠标停留在元素上时触发

示例

click

$(function(){
//当盒子被点击时，盒子变为蓝色
	$("div").click(function(){
		$("div").css('color','blue');
	});
});

dblick

$(function(){
//当盒子被双击时，盒子变为蓝色
	$("div").dbclick(function(){
		$("div").css('color','blue');
	});
});

mouseenter

$(function(){
//当鼠标进入盒子时，盒子变为蓝色
	$("div").mouseenter(function(){
		$("div").css('color','blue');
	});
});

mouseleave

$(function(){
//当鼠标离开盒子时，盒子变为蓝色
	$("div").mouseleave(function(){
		$("div").css('color','blue');
	});
});

二、键盘事件

分类

键盘事件	说明
keypress	当按键按下时触发事件
keydown	当按键盘按下时触发事件
keyup	当按键松开时触发事件

示例

keypress

<body>
    <form action="">
       输入内容时盒子将会隐藏: <input type="text">
    </form>
    <div></div>
    <script src="min_jQuery.js"></script>
    <script>
        $(function(){
            $("input").keypress(function(){
                $("div").hide();
            });
        });
    </script>
</body>

其中，在文本框里输入内容时，盒子被隐藏。

keydown,keyup

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="min_jQuery.js">
    </script>
    <script>
        $(function(){
        //当按键按下时，盒子变黄色
            $("input").keydown(function(){
                $("div").css("background-color","yellow");
            });
            //当按键松开时，盒子变粉色
            $("input").keyup(function(){
                $("div").css("background-color","pink");
            });
        });
    </script>
    <style type="text/css">
        div
        {
            width: 200px;
            height: 200px;
            background-color: darkorange;
        }
    </style>
</head>
<body>

    输入内容: <input type="text">
    <div></div>
</body>
<html>

三、表单事件

分类

表单事件	说明
submit	当提交表单时触发
change	当元素的值被修改时触发
focus	当元素获得焦点时触发（例如：点击输入框获得焦点）
blur	当元素失去焦点时触发（例如：点击输入框外部失去焦点）

注意
1.submit方法只适用于form标签。
2.change方法只适用于有字段的元素。
3.focus方法和blur方法通常一起使用。

示例

submit

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="min_jQuery.js">
    </script>
    <script>
        $(function(){
            //当点击提交时，跳出提示框
            $("form").submit(function () {
                alert("提交成功，点击跳转页面...");
            });
        });
    </script>
</head>
<body>
<!--创建一个表单-->
<form action="">
    用户名：<input type="text" name="Name" value="1">
    密码：<input type="text" name="Password" value="2">
    <input type="submit" value="提交">
</form>
</body>
<html>

change

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="min_jQuery.js">
    </script>
    <script>
        $(function(){
            //当更改文本框内容后，点击文本框外时，显示隐藏的文本
            $("input").change(function () {
                $("p").show();
            });
        });
    </script>
</head>
<body>
在此处输入内容：<input type="text">
<!--开始被<p>标签被隐藏-->
<p style="display: none;">文本框内容被修改！！！</p>
</body>
<html>

focus

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="min_jQuery.js">
    </script>
    <script>
        $(function(){
            //点击文本框获得焦点，弹出提示文本
            $("input").focus(function () {
                $("p").show();
            });
        });
    </script>
</head>
<body>
在此处输入内容：<input type="text">
<!--开始时隐藏提示文本-->
<p style="display: none;">此处输入密码</p>
</body>
<html>

blur

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="min_jQuery.js">
    </script>
    <script>
        $(function(){
            //点击文本框外失去焦点，弹出提示文本
            $("input").blur(function () {
                $("p").show();
            });
        });
    </script>
</head>
<body>
在此处输入内容：<input type="text">
<!--开始时隐藏提示文本-->
<p style="display: none;">您需要输入密码！</p>
</body>
<html>

四、窗口事件

分类

窗口事件	说明
load	已废弃
unload	已废弃
scroll	当滚动元素时会触发
resize	当调整浏览器大小时触发

示例

scroll

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="min_jQuery.js">
    </script>
    <script>
        $(function(){
            //当滚动文本框时，弹出提示文本
            $("div").scroll(function () {
                $("p").show();
            });
        });
    </script>
    <style>
        div{
            width: 400px;
            height: 100px;
            border: 1px solid skyblue;
            overflow: scroll;
        }
    </style>
</head>
<body>
<!--创建一个滚动的文本框-->
<div>
    1、没有可怕的深度，就没有美丽的水面。 --尼采 《尼采遗稿选》
    2、每一个不曾起舞的日子，都是对生命的辜负。 --尼采
    3、一个人知道自己为什么而活，就可以忍受任何一种生活。 --尼采
    4、但凡不能杀死你的，最终都会使你更强大。 That which does not kill us makes us stronger. --尼采
    5、白昼的光，如何能够了解夜晚黑暗的深度呢？ --尼采
</div>
<!--开始时隐藏提示文本-->
<p style="display: none">你滚动了文本框！</p>
</body>
<html>

resize

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="min_jQuery.js">
    </script>
    <script>
        $(function(){
            //当调整浏览器窗口大小时，弹出提示文本
            $(window).resize(function () {
                $("p").show();
            });
        });
    </script>
</head>
<body>
<!--开始时隐藏提示文本-->
<p style="display: none">你调整了窗口的大小！</p>
</body>
<html>