JavaScript+jQuery+ES6入门到放弃之jQuery事件与动画

博主： Arvin
发布时间：2022 年 09 月 06 日
1491 次浏览
暂无评论
12130字数
分类： JavaScript

## 概述

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

例如：

* 在某个元素上移动鼠标。
* 选择某个单选按钮
* 点击某个元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

**常见 DOM 事件：**

| 鼠标事件                                                                     | 键盘事件                                                                                  | 表单事件                                                         | 文档/窗口事件                                                                        |
| ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| [click](https://www.runoob.com/jquery/event-click.html) 单击事件               | [keypress](https://www.runoob.com/jquery/event-keypress.html) 键盘释放且产生可打印字符      | [submit](https://www.runoob.com/jquery/event-submit.html) 表单提交 | [load](https://www.runoob.com/jquery/event-load.html) 加载                             |
| [dblclick](https://www.runoob.com/jquery/event-dblclick.html) 双击事件         | [keydown](https://www.runoob.com/jquery/event-keydown.html) 键盘按下                        | [change](https://www.runoob.com/jquery/event-change.html) 内容改变 | [resize](https://www.runoob.com/jquery/event-resize.html) 调整窗体大小                 |
| [mouseenter](https://www.runoob.com/jquery/event-mouseenter.html) 鼠标进入时   | [keyup](https://www.runoob.com/jquery/event-keyup.html) 键盘释放                            | [focus](https://www.runoob.com/jquery/event-focus.html) 获得焦点   | [scroll](https://www.runoob.com/jquery/event-scroll.html) 窗体滚动                     |
| [mouseleave](https://www.runoob.com/jquery/event-mouseleave.html) 鼠标离开时   |                                                                                           | [blur](https://www.runoob.com/jquery/event-blur.html) 失去焦点     | [unload](https://www.runoob.com/jquery/event-unload.html) 离开窗体、重新加载【已移除】 |
| [hover](https://www.runoob.com/jquery/event-hover.html) 鼠标悬浮时             |                                                                                           |                                                                  |                                                                                      |
| [mouseover](https://www.runoob.com/jquery/event-mouseover.html) 鼠标指针移过时 | 鼠标在其被选元素的子元素上来回进入时：触发 `mouseover`不触发 `mouseenter` |                                                                  |                                                                                      |
| [mouseout](https://www.runoob.com/jquery/event-mouseout.html) 鼠标指针移出时   | 鼠标在其被选元素的子元素上来回离开时：触发 `mouseout`不触发 `mouseleave`  |                                                                  |                                                                                      |

## 事件绑定与解绑

### 绑定事件

**概述：**`on()` 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，`on()` 方法是 `bind()`、`live()` 和 `delegate()` 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

**注意：** 使用 `on()` 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

**提示：** 如需移除事件处理程序，请使用 [off()](https://www.runoob.com/jquery/event-off.html) 方法。

**提示：** 如需添加只运行一次的事件然后移除，请使用 [one()](https://www.runoob.com/jquery/event-one.html) 方法。

</div>

**演示案例：**

```html
<!DOCTYPE html>
<html>

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("#div1").on("click", function () {
                $(this).css("background-color", "pink");
            });
            $("#div2").one("click", function () {
                $(this).css("background-color", "pink");
            });
        });
    </script>
</head>

<body>

<h4 style="color:green;">该实例演示了如何使用 on() 来达到与 one() 相同的效果。</h4>

<div id="div1" style="border:1px solid black;">这些一些文本。
        <p>点我使用 <b>on() 方法设置背景颜色</b>。</p>
    </div><br>

<div id="div2" style="border:1px solid black;">这些一些文本。
        <p>点我使用 <b>bind() 方法设置背景颜色</b>。</p>
    </div>

</body>

</html>
```

**扩展：**

```javascript
// 为多个事件绑定相同的事件处理函数
$(selector).on("event2 event3 …", function () { …… })

// 同时绑定多个事件
$(selector).on({
    "event1": function () { …… },
    "event2 event3 …": function () { …… },
        ……
})
```

### 解绑事件

**概述：**`off()` 方法通常用于移除通过 [on()](https://www.runoob.com/jquery/event-on.html) 方法添加的事件处理程序。

自 jQuery 版本 1.7 起，`off()` 方法是 `unbind()`、`die()` 和 `undelegate()` 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

**注意：** 如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

</div>

**演示案例：**

```html
<!DOCTYPE html>
<html>

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).css("background-color", "pink");
            });
            $("#btn1").click(function () {
                $("p").off();
            });
        });
    </script>
</head>

<body>

<h4 style="color:green;">该事件演示了如何使用 off() 和 unbind() 方法来达到相同的效果。</h4>

<p>点击段落修改背景颜色。</p>
    <p>点击以下按钮再点击这个段落 ( click 事件被移除)。</p>

<button id="btn1">使用 off() 方法移除 click 事件</button>

</body>

</html>
```

### hover()

**概述：**`hover() `方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 [mouseenter](https://www.runoob.com/jquery/event-mouseenter.html) 和 [mouseleave](https://www.runoob.com/jquery/event-mouseleave.html) 事件。

**注意:** 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

</div>

**演示案例：**

```html
<!DOCTYPE html>
<html>

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("p").hover(function () {
                $("p").css("background-color", "yellow");
            }, function () {
                $("p").css("background-color", "pink");
            });
        });
    </script>
</head>

<body>

<p>鼠标移动到该段落。</p>

</body>

</html>
```

## jQuery动画效果

### show() 与 hide()

**概述：**`show()`方法控制元素的显示，`hide()`方法控制元素的隐藏

**语法：**

```javascript
$(selector).show([duration][, easing][, complete]);
$(selector).hide([duration][, easing][, complete]);
```

**参数说明：**

* duration规定显示效果的速度，可选值
  * 毫秒值（如：1000）
  * "slow"（600毫秒）
  * "normal"（400毫秒，默认值）
  * "fast"（200毫秒）
* easing规定在动画的不同点上元素的速度，可选值
  * "swing"：默认值，在开头/结尾移动慢，中间移动快
  * "linear"：匀速移动
* complete规定动画结束后要执行的方法，每个匹配元素的动画完成后都会调用一次

### fadeIn() 和 fadeOut()

**概述：**`fadeIn()`和 `fadeOut()`方法可通过改变元素的透明度实现淡入淡出效果

**语法：**

```javascript
$(selector).fadeIn([duration][, easing][, complete]);
$(selector).fadeOut([duration][, easing][, complete]);
```

### slideDown() 和 slideUp()

**概述：**slideDown()方法使元素逐步延伸显示、slideUp()方法使元素逐步缩短直至隐藏

**语法：**

```javascript
$(selector).slideDown([duration][, easing][, complete]);
$(selector).slideUp([duration][, easing][, complete]);
```

### 自定义动画

**概述：**`animate()` 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

**语法：**`$(selector).animate(properties[, duration][, easing][, complete]);`

| 参数         | 描述                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| *styles*   | 必需。规定产生动画效果的一个或多个 CSS 属性/值。**注意：** 当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。可以应用动画的属性：backgroundPositionX、backgroundPositionY、borderWidth、borderBottomWidth、borderLeftWidth、borderRightWidth、borderTopWidth、borderSpacing、margin、marginBottom、marginLeft、marginRight、marginTop、outlineWidth、padding、paddingBottom、paddingLeft、paddingRight、paddingTop、height、width、maxHeight、maxWidth、minHeight、minWidth、fontSize、bottom、left、right、top、letterSpacing、wordSpacing、lineHeight、textIndent**提示：** 颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色，您需要从 jQuery.com 下载 [颜色动画插件](http://plugins.jquery.com/project/color)。 |
| *speed*    | 可选。规定动画的速度。可能的值：* 毫秒* "slow"* "fast"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| *easing*   | 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。可能的值：* "swing" - 在开头/结尾移动慢，在中间移动快* "linear" - 匀速移动**提示：** 扩展插件中提供更多可用的 easing 函数。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| *callback* | 可选。animate 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问[jQuery Callback](https://www.runoob.com/jquery/jquery-callback.html)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

**演示案例：**

```html
<!DOCTYPE html>
<html>

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#box").animate({ height: "300px" });
            });
            $("#btn2").click(function () {
                $("#box").animate({ height: "100px" });
            });
        });
    </script>
</head>

<body>
    <button id="btn1">使用动画放大高度</button>
    <button id="btn2">重置高度</button>
    <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
    </div>
</body>

</html>
```

---

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之表单验证](https://jbea.cn/archives/574.html)

</div>

最后修改：2022 年 09 月 07 日

都滑到这里了，不点赞再走！？

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

JavaScript+jQuery+ES6入门到放弃之jQuery事件与动画

Arvin • 2022 年 09 月 06 日

## 概述

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

例如：

* 在某个元素上移动鼠标。
* 选择某个单选按钮
* 点击某个元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

**常见 DOM 事件：**

## 事件绑定与解绑

### 绑定事件

**概述：**`on()` 方法在被选元素及子元素上添加一个或多个事件处理程序。

**注意：** 使用 `on()` 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

**提示：** 如需移除事件处理程序，请使用 [off()](https://www.runoob.com/jquery/event-off.html) 方法。

**提示：** 如需添加只运行一次的事件然后移除，请使用 [one()](https://www.runoob.com/jquery/event-one.html) 方法。

</div>

**演示案例：**

```html
<!DOCTYPE html>
<html>

<body>

<h4 style="color:green;">该实例演示了如何使用 on() 来达到与 one() 相同的效果。</h4>

<div id="div1" style="border:1px solid black;">这些一些文本。
        <p>点我使用 <b>on() 方法设置背景颜色</b>。</p>
    </div><br>

<div id="div2" style="border:1px solid black;">这些一些文本。
        <p>点我使用 <b>bind() 方法设置背景颜色</b>。</p>
    </div>

</body>

</html>
```

**扩展：**

```javascript
// 为多个事件绑定相同的事件处理函数
$(selector).on("event2 event3 …", function () { …… })

// 同时绑定多个事件
$(selector).on({
    "event1": function () { …… },
    "event2 event3 …": function () { …… },
        ……
})
```

### 解绑事件

**概述：**`off()` 方法通常用于移除通过 [on()](https://www.runoob.com/jquery/event-on.html) 方法添加的事件处理程序。

**注意：** 如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

</div>

**演示案例：**

```html
<!DOCTYPE html>
<html>

<body>

<h4 style="color:green;">该事件演示了如何使用 off() 和 unbind() 方法来达到相同的效果。</h4>

<p>点击段落修改背景颜色。</p>
    <p>点击以下按钮再点击这个段落 ( click 事件被移除)。</p>

<button id="btn1">使用 off() 方法移除 click 事件</button>

</body>

</html>
```

### hover()

**概述：**`hover() `方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 [mouseenter](https://www.runoob.com/jquery/event-mouseenter.html) 和 [mouseleave](https://www.runoob.com/jquery/event-mouseleave.html) 事件。

**注意:** 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

</div>

**演示案例：**

```html
<!DOCTYPE html>
<html>

<head>
    <title>青鸟技术栈</title>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    </script>
    <script>
        $(document).ready(function () {
            $("p").hover(function () {
                $("p").css("background-color", "yellow");
            }, function () {
                $("p").css("background-color", "pink");
            });
        });
    </script>
</head>

<body>

<p>鼠标移动到该段落。</p>

</body>

</html>
```

## jQuery动画效果

### show() 与 hide()

**概述：**`show()`方法控制元素的显示，`hide()`方法控制元素的隐藏

**语法：**

```javascript
$(selector).show([duration][, easing][, complete]);
$(selector).hide([duration][, easing][, complete]);
```

**参数说明：**

### fadeIn() 和 fadeOut()

**概述：**`fadeIn()`和 `fadeOut()`方法可通过改变元素的透明度实现淡入淡出效果

**语法：**

```javascript
$(selector).fadeIn([duration][, easing][, complete]);
$(selector).fadeOut([duration][, easing][, complete]);
```

### slideDown() 和 slideUp()

**概述：**slideDown()方法使元素逐步延伸显示、slideUp()方法使元素逐步缩短直至隐藏

**语法：**

```javascript
$(selector).slideDown([duration][, easing][, complete]);
$(selector).slideUp([duration][, easing][, complete]);
```

### 自定义动画

**概述：**`animate()` 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

**语法：**`$(selector).animate(properties[, duration][, easing][, complete]);`

**演示案例：**

```html
<!DOCTYPE html>
<html>

</html>
```

---

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之表单验证](https://jbea.cn/archives/574.html)

</div>

JavaScript+jQuery+ES6入门到放弃之jQuery事件与动画

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Java基础之JDK的安装

开启Visual Studio Code编写jQuery语法提示

C#-WinForms实现手写板

使用GSAP实现滚动条交互动画

HTML从入门到精通 - 初识HTML

HTML从入门到精通 - 盒子模型

JavaScript+jQuery+ES6入门到放弃之面向对象

uni-app之-微信小程序应用开发

此内容被密码保护

来自肖嘉乐同学的项目总结

JavaScript+jQuery+ES6入门到放弃之jQuery事件与动画

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript+jQuery+ES6入门到放弃之jQuery事件与动画

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款