第十四周笔记2

Ascssy

于 2021-06-02 18:25:41 发布

阅读量80

点赞数

本文链接：https://blog.csdn.net/weixin_48999849/article/details/117478157

版权

JQuery 事件

一、事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
-在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用术语"触发"（或"激发"）例如： “当按下按键时触发 keypress 事件”。
常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

二、jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：$("p").click();
下一步是定义了点击后触发事件。可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

三、常用的 jQuery 事件方法

1.$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。

2.click()

click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>zpyooooo</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

运行结果：
在这里插入图片描述
点击 “如果你点我，我就会消失” 后：

点击 “点我消失“ 后：
点击 ”点我也消失“ 后：

3.dblclick()

当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>zpyooooo</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

</body>
</html>

运行结果：在这里插入图片描述
双击 ”双击鼠标左键的，我就消失“ 后：

双击 ”双击我消失！“ 后：

双击 ”双击我也消失” 后：
4.mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生
mouseenter 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>zpyooooo</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
</script>
</head>
<body>

<p id="p1">鼠标指针进入此处，会看到弹窗。</p>

</body>
</html>