【JQuery_事件】事件_语法_键盘事件_鼠标事件_

拾贰_C

已于 2022-10-24 15:08:50 修改

阅读量273

点赞数 1

分类专栏：学习笔记文章标签： jquery javascript 前端 Vsc vscode 1024程序员节

于 2022-10-08 17:14:31 首次发布

本文链接：https://blog.csdn.net/weixin_52372189/article/details/127211270

版权

学习笔记专栏收录该内容

29 篇文章 2 订阅

订阅专栏

0.事件

0.0 事件四要素

事件源
事件绑定处理函数
查找修改元素
修改元素

0.0.0事件源

document
某具体元素

0.1 语法格式

	<script>
		$(selector).action(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.2文档事件

<script>
	$(document).ready(
		// 参数
		function() {
			// 函数主体
		}
	);
</script>

0.3窗口事件

0.3.0·`load()`·

	<script>
		$(selector).load(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.3.1~~`unload()`

	<script>
		$(window).unload(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.4键盘事件

0.4.0`keydown()`

0.4.1`keypress()`-重点理解

触发条件：实时产生了可打印的字符时。

中文字符不是实时产生字符的

keypress()`-重点理解

0.4.2`keyup()`

0.4.0-2案例

<textarea id="key"></textarea>
<script>
    var key = document.getElementById("key");
    key.onkeydown =f;  //注册keydown事件处理函数
    key.onkeyup = f;  //注册keyup事件处理函数
    key.onkeypress = f;  //注册keypress事件处理函数
    function f (e) {
        var e = e || window.event;  //标准化事件处理
        var s = e.type + " " + e.keyCode;  //获取键盘事件类型和按下的值
        key.value = s;
    }
</script>

0.5鼠标事件

0.5.1 单击事件`click()`

<script>
		$(selector).click(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.5.1双击事件`dblclick()`

<script>
		$(selector).dbclick(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.5.2悬停事件`hover()`

<script>
		$(selector).hover(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.5.0-2案例

鼠标事件-1讲解
其他的同上：
鼠标事件-1 讲解1

单击双击和悬停事件函数案例

0.5.3 `mousemove()`

事件源：一般为文档`document`

<script>
		$(selector).mousemove(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

<script> $(document).mousemove( // 参数 function() { // 函数主体 } ); </script>

0.5.4`mousedown与mouseup`

<script>
		$(selector).mousedown(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

<script>
		$(document).mouseup(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.5.4.1案例

案例mousedown/up

<script>
		$("#img").mouseup(
			// 参数
			function() {
				// 函数主体
				$("#img").attr("src","url");
			}
		);
	</script>

0.5.5 `mouseenter与mouseleave`

加粗样式

<script>
		$(selector).mouseenter(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

<script>
		$(selector).mouseleave(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.5.6 `mouseover` `mouseout`

<script>
		$(selector).mouseover(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

<script>
		$(selector).mouseout(
			// 参数
			function() {
				// 函数主体
			}
		);
	</script>

0.5.6.1案列

父元素。mouseover

进入本元素或者后代元素都可触发事件~~~！~~~

0.5 表单事件

0.5.1`blur()` `focus()`·

0.5.2案列

在这里插入图片描述

this （文档对象） :简化代码量（简化开发）

next（）（遍历；）
.
text（）单纯地只能加入文本内容。

0.5.3 `change()`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟学堂(edu.jb51.net)</title>
<script src="http://edu.jb51.net/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").change(function(){
    alert("文本已被修改");
  });
});
</script>
</head>
<body>
<input type="text">
<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>
</body>
</html>

参考案例

`text()` `next()`

！！！！！！！！！！！！！！！

应用：做网站的时候是常用的JQ（JavaScript）

0.5.4`select()`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").select(function(){
    alert("文本已选中!");
  });
});
</script>
</head>
<body>

<input type="text" value="www.runoob.com">
<p>在输入框中选取文本</p>

</body>
</html>