一、概述

1.1、说明

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

学习jQuery本质：就是学习调用这些函数（方法）。

jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生

JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

官网地址：https://jquery.com/

0001

1.2、为什么要学jQuery

使用javascript开发过程中，有许多的缺点：

查找元素的方法单一，麻烦。
遍历数组很麻烦，通常要嵌套一大堆的for循环。
有兼容性问题。
想要实现简单的动画效果，也很麻烦
代码冗余。

1.3、优点

轻量级。核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源

1.4、jQuery的版本问题

1x ：兼容 IE 678 等低版本浏览器，官网不再更新

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本，也是更加的精简

1.5、HelloWorld入门

1.5.1、体验1

<head>
    <style>
        div {
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        $("div").hide();
    </script>
</head>

<body>
    <div></div>
</body>

作用是要将div隐藏，但是运行起来之后，发现程序并没有。原因是程序从上往下执行，还没有解析到div标签，就已经解析到了$("div").hide() 。

1.5.2、解决

<head>
    <style>
        div {
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        // 更页面加载完毕之后，再去执行该代码。
        $(document).ready(function() {
            $("div").hide();
        });
    </script>
</head>

<body>
    <div></div>
</body>

1.5.3、体验

<head>
    <script>
        $(document).ready(function() {
            console.log('HelloWorld,jQuery');
        });
    </script>
</head>

二、jQuery基本使用

2.1、入口函数

2.1.1、写法一

<head>
    <script>
        $(document).ready(function() {
            // 此处是页面DOM加载完成的入口
        });
    </script>
</head>

2.1.2、写法二

<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {
            // 此处是页面DOM加载完成的入口
        })
    </script>
</head>

2.1.3、总结

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装
相当于原生 js 中的 DOMContentLoaded。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第二种方式，书写简单方便。

2.1.4、问题说明

如果报了这个错误，$ is not defined，就说明没有正确引入jQuery文件。

2.2、jQuery的顶级对象 $

2.2.1、说明

$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        //  $ 是jQuery的别称（另外的名字）
        $(function() {
            alert('Hello');
        });

        jQuery(function() {
            alert('World');
        });
    </script>
</head>

2.2.2、 jQuery对象和DOM对象

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

==注意：==

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

0002

<body>
    <div></div>
    <script>
        // 1. DOM 对象：  用原生js获取过来的对象就是DOM对象
        var divObj = document.querySelector('div');
        console.dir(divObj);

        // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 
        // >> 本质： 通过$把DOM元素进行了包装
        var $div = $('div');
        console.dir($div); // S.fn.init(1)

        // 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        divObj.style.display = 'none';	// DOM对象只能使用原始的对象中的属性和方法
        $div.hide();	// jQuery对象只能使用jQuery中的方法
    </script>
</body>

2.2.3、jQuery 对象和 DOM 对象转换

2.2.3.1、说明

DOM 对象与 jQuery 对象之间是可以相互转换的。

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装，那么意味着要想使用这些属性

和方法需要把jQuery对象转换为DOM对象才能使用。

2.2.3.2、DOM 对象转换为 jQuery 对象

# 语法
	$(DOM对象)
# 案例
	$(document)

<head>
    <style>
        div {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1. DOM 对象：用原生js获取过来的对象就是DOM对象
        var divObj = document.querySelector('div');
        // 2、将DOM对象转换为jQuery对象
        var $div = $(divObj);
        // 3、调用jQuery方法
        $div.hide();
    </script>
</body>

2.2.3.3、jQuery 对象转换为 DOM 对象

# 语法1
	$(DOM对象)[index] index 是索引号
# 案例1
	$(document)[0]
# 语法2
	$(DOM对象).get(index) index 是索引号
# 案例2
	$(document).get(0)

<head>
    <style>
        div {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1. jQuery对象
        var $div = $("div");
        // 2、将jQuery对象转换为DOM对象
        var divObj = $div.get(0);
        // 3、调用DOM对象的属性
        divObj.style.display = 'none';
    </script>
</body>

三、jQuery选择器

3.1、概述

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

1 2	# 语法 $(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

3.2、基础选择器

3.2.1、说明

0003

3.2.2、案例

<body>
    <div>HelloWorld</div>
    <script>
        // 1、基本选择器
        console.log($('div'));
    </script>
</body>

3.3、层级选择器

3.3.1、说明

层级选择器最常用的两个分别为：后代选择器和子代选择器。

0004

3.3.2、案例

<body>
    <ul>
        <li>张无忌</li>
        <li>赵敏</li>
    </ul>
    <script>
        // 1、层次选择器
        console.log($('ul li'));
    </script>
</body>

3.4、筛选选择器(上)

3.4.1、说明

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :

0005

3.4.2、案例1

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <script>
        // 1、设置第一个li字体为红色
        $('ul li:first').css('color', 'red');
        // 2、设置最后一个li字体为蓝色
        $('ul li:last').css('color', 'blue');
        // 3、设置第4个li字体为天蓝色[选取索引号为3的元素,索引号从0开始]
        $('ul li:eq(3)').css('color', 'skyblue');
    </script>
</body>

3.4.3、案例2

<body>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        // 1、设置索引号为偶数的li背景颜色为红色，由于索引号从0开始,所以页面效果是奇数行会变为红色
        $('ol li:even').css('backgroundColor', 'red');
        // 2、设置索引号为奇数的li背景颜色为天蓝色，由于索引号从0开始,所以页面效果是偶数行会变为天蓝色
        $('ol li:odd').css('backgroundColor', 'skyblue');
    </script>
</body>

3.5、筛选选择器(下)

3.5.1、说明

jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。

0006

3.5.2、案例1

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>
    <script>
        // parent() : 查找父级
        console.log($('.son').parent());
    </script>
</body>

3.5.3、案例2

<body>
    <div class="nav">
        <p>HelloWorld</p>
        <div>
            <p>JavaScript</p>
        </div>
    </div>
    <script>
        // children() : 查找直接孩子,类似于 ul>li
        $('.nav').children('p').css('color', 'red');
    </script>
</body>

3.5.4、案例3

<body>
    <div class="nav">
        <p>HelloWorld</p>
        <div>
            <p>JavaScript</p>
        </div>
    </div>
    <script>
        // find() : 查找后代元素,类似于 $('ul li')
        $('.nav').find('p').css('color', 'red');
    </script>
</body>

3.5.5、案例4

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <script>
        // siblings() : 查找兄弟节点,不包括自己本身
        $('ol .item').siblings('li').css('color', 'red');
    </script>
</body>

<body>  
    <div>HelloWorld</div>
    <p class="item">JavaScript</p>
    <h1>Java</h1>
    <p>CSS</p>
    <div>HTML</div>

    <script>
        // siblings() : 查找兄弟节点,不包括自己本身
        $('.item').siblings().css('color', 'red');
    </script>
</body>

<body>
    <div>HelloWorld</div>
    <p class="item">JavaScript</p>
    <h1>Java</h1>
    <p>CSS</p>
    <div>HTML</div>

    <script>
        // siblings() : 查找兄弟节点,不包括自己本身
        $('.item').siblings('p').css('color', 'red');
    </script>
</body>

1	# siblings()，方法中可以设置选择器参数，如果没有，则是所有的兄弟节点,如果有指定的选择器,则筛选指定选择器的元素。

3.5.6、案例5

<body>
    <div>HelloWorld</div>
    <p class="item">JavaScript</p>
    <h1>Java</h1>
    <p>CSS</p>
    <div>HTML</div>

    <script>
        // next() : 查找下一个兄弟节点
        $('.item').next().css('color', 'red');
    </script>
</body>

3.5.7、案例6

<body>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>

    <script>
        // eq() : 相当于$("ul li:eq(2)"),index是从0开始
        $('ul li').eq(2).css('color', 'red');
    </script>
</body>

3.5.8、案例7

<body>
    <div>HelloWorld</div>
    <p class="item">JavaScript</p>

    <script>
        // hasClass() :  判断是否有某个类名
        console.log($('div').hasClass('item'));
        console.log($('p').hasClass('item'));
    </script>
</body>

3.5.9、案例8

<body>
    <div>HelloWorld</div>
    <p class="item">JavaScript</p>
    <h1>Java</h1>
    <p>CSS</p>
    <div>HTML</div>

    <script>
        // nextAll() :  查找当前元素之后所有的同辈元素
        $('.item').nextAll().css('color', 'red');
    </script>
</body>

3.5.10、案例9

<body>
    <div>HelloWorld</div>
    <p class="item">JavaScript</p>
    <h1>Java</h1>
    <p>CSS</p>
    <div>HTML</div>

    <script>
        // nextAll() :  查找当前元素之前所有的同辈元素
        $('.item').prevAll().css('color', 'red');
    </script>
</body>

四、其他说明

4.1、设置样式

<body>
    <div>JavaScript</div>

    <script>
        $('div').css('background-color', 'red');
    </script>
</body>

4.2、隐式迭代

<body>
    <div>JavaScript</div>
    <div>HTML</div>
    <div>CSS</div>

    <script>
        // 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $('div').css('background-color', 'red');
    </script>
</body>

给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

4.3、排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>

    <script>
        // 1. 隐式迭代 给所有的按钮都绑定了点击事件
        $('button').click(function() {
            // 2. 当前的元素变化背景颜色
            $(this).css('backgroundColor', 'red');
            // 3. 其余的兄弟去掉背景颜色 隐式迭代
            $(this).siblings('button').css('backgroundColor', '');
        });
    </script>
</body>

4.4、链式编程

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>

    <script>
        // 1. 隐式迭代 给所有的按钮都绑定了点击事件
        $('button').click(function() {
            // 2. 当前的元素变化背景颜色,并且将其余的兄弟去掉背景颜色
            // >> 分开设置
            // $(this).css('backgroundColor', 'red');
            // $(this).siblings('button').css('backgroundColor', '');

            // >> 链式编程
            $(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '');
        });
    </script>
</body>

五、样式操作

5.1、操作 css 方法

5.1.1、说明

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

1 2	# 语法 css();

5.1.2、参数只写属性名

参数只写属性名字，则是返回属性值。

<body>
    <div style="background-color: blue;">JavaScript</div>

    <script>
        var result = $('div').css('background-color');
        console.log(result);
    </script>
</body>

5.1.3、参数是属性名，属性值

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。

<body>
    <div>JavaScript</div>

    <script>
        $('div').css('width', '100px').css('height', 100);
    </script>
</body>

5.1.4、参数可以是对象形式

<body>
    <div>JavaScript</div>

    <script>
        $('div').css({
            'width': '100px',
            'height': '150px',
            'background-color': 'red'
        });
    </script>
</body>

5.1.5、注意

1	# 注意：css() 多用于样式少时操作，多了则不太方便。

5.2、操作类样式方法

5.2.1、添加类

<head>
    <style>
        .current {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>JavaScript</div>

    <script>
        // 添加类样式,注意操作类里面的参数不要加点。
        $('div').addClass('current');
    </script>
</body>

5.2.2、删除类

<head>
    <style>
        .current {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="current">JavaScript</div>

    <script>
        // 移除类样式,注意操作类里面的参数不要加点。
        $('div').removeClass('current');
    </script>
</body>

5.2.3、切换类

<head>
    <style>
        .current {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="current">JavaScript</div>

    <script>
        // 切换类样式,注意操作类里面的参数不要加点。
        $('div').click(function() {
            $(this).toggleClass('current');
        });
    </script>
</body>

5.2.4、注意

设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。这个addClass相当于追加类名不影响以前的类名。

六、效果操作

6.1、概述

jQuery 给我们封装了很多动画效果，最为常见的如下：

0007

6.2、显示隐藏效果

6.2.1、显示效果

6.2.1.1、语法

# 语法
	show([speed,[easing],[fn]])
# 说明
	1. 参数都可以省略,无动画直接显示。
	2. speed：三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如：1000)。 
	3. easing：用来指定切换效果，默认是“swing”，可用参数“linear”。
	4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

6.2.1.2、案例

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <div></div>
    <script>
        $('button').click(function() {
            $("div").show(2000);
        });
    </script>
</body>

6.2.2、隐藏效果

6.2.2.1、语法

# 语法
	hide([speed,[easing],[fn]])
# 说明
	1. 参数都可以省略,无动画直接显示。
	2. speed：三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如：1000)。 
	3. easing：用来指定切换效果，默认是“swing”，可用参数“linear”。
	4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

6.2.2.2、案例

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>隐藏</button>
    <div></div>
    <script>
        $('button').click(function() {
            $("div").hide(2000);
        });
    </script>
</body>

6.2.3、切换效果

6.2.3.1、语法

# 语法
	toggle([speed,[easing],[fn]])
# 说明
	1. 参数都可以省略,无动画直接显示。
	2. speed：三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如：1000)。 
	3. easing：用来指定切换效果，默认是“swing”，可用参数“linear”。
	4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

6.2.3.2、案例

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>切换</button>
    <div></div>
    <script>
        $('button').click(function() {
            $("div").toggle(2000);
        });
    </script>
</body>

6.3、滑动效果

6.3.1、语法

# 上滑
	slideUp([speed,[easing],[fn]])
	
# 下滑
	slideDown([speed,[easing],[fn]])
	
# 滑动切换
	slideToggle([speed,[easing],[fn]])
	
# 参数说明
	1. 参数都可以省略,无动画直接显示。
	2. speed：三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如：1000)。 
	3. easing：用来指定切换效果，默认是“swing”，可用参数“linear”。
	4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

6.3.2、案例

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        // 下滑
        $('button').eq(0).click(function() {
            $("div").slideDown(2000);
        });

        // 上滑
        $('button').eq(1).click(function() {
            $("div").slideUp(2000);
        });

        // 切换
        $('button').eq(2).click(function() {
            $("div").slideToggle(2000);
        });
    </script>
</body>

6.4、淡入淡出

6.4.1、语法

# 淡入
	fadeIn([speed,[easing],[fn]])
	
# 淡出
	fadeOut([speed,[easing],[fn]])
	
# 淡入淡出切换
	fadeToggle([speed,[easing],[fn]])
	
# 参数说明
	1. 参数都可以省略,无动画直接显示。
	2. speed：三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如：1000)。 
	3. easing：用来指定切换效果，默认是“swing”，可用参数“linear”。
	4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

6.4.2、案例

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>淡入淡出切换</button>
    <div></div>
    <script>
        // 淡入
        $('button').eq(0).click(function() {
            $("div").fadeIn(2000);
        });

        // 淡出
        $('button').eq(1).click(function() {
            $("div").fadeOut(2000);
        });

        // 淡入淡出切换
        $('button').eq(2).click(function() {
            $("div").fadeToggle(2000);
        });
    </script>
</body>

6.5、渐进方式调整到指定的不透明度

6.5.1、说明

# 语法
	fadeTo([[speed],opacity,[easing],[fn]])
# 参数说明
	1. opacity 【透明度必须写】，取值 0~1 之间。
	2. speed：三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如：1000)。【必须写】
	3. easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
	4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

6.5.2、案例

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>渐进方式调整到指定的不透明度</button>
    <div></div>
    <script>
        $('button').click(function() {
            $("div").fadeTo(2000, 0.6);
        });
    </script>
</body>

6.6、自定义动画 animate

6.6.1、说明

# 语法
	animate(params,[speed],[easing],[fn])
# 参数说明
	1. params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号。
	2. speed：三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如：1000)。 
	3. easing： 用来指定切换效果，默认是“swing”，可用参数“linear”。
	4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

6.6.2、案例

<head>
    <style>
        div {
            position: absolute;
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>动起来</button>
    <div></div>
    <script>
        $('button').click(function() {
            $("div").animate({
                width: '300px',
                heigth: '600px',
                opacity: 0.6,
                top: '100px',
                left: '300px'
            }, 3000);
        });
    </script>
</body>

6.7、事件切换

6.7.1、案例1

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 鼠标悬浮上去的事件
        $('div').mouseover(function() {
            $(this).fadeIn(3000);
        });
        // 鼠标离开的事件
        $('div').mouseout(function() {
            $(this).fadeOut(3000);
        });
    </script>
</body>

6.7.2、事件切换

# 语法
	hover([over,]out)
	hover 就是鼠标经过和离开的复合写法
# 参数说明
	1. over:鼠标移到元素上要触发的函数
	2. out:鼠标移出元素要触发的函数
	3. 如果只写一个函数，则鼠标经过和离开都会触发它

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 事件切换
        $('div').hover(function() {
            $(this).fadeIn(3000);
        }, function() {
            $(this).fadeOut(3000);
        });
    </script>
</body>

<head>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 事件切换
        // >> hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
        $('div').hover(function() {
            $(this).fadeToggle(3000);
        });
    </script>
</body>

6.8、动画队列及其停止排队方法

6.8.1、说明

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。此时就需要停止排队。

# 语法
	stop()
# 说明
	1. stop() 方法用于停止动画或效果。
	2. stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

6.8.2、案例

<body>
    <div></div>
    <script>
        // 事件切换
        $('div').hover(function() {
             // stop 方法必须写到动画的前面
            $(this).stop().fadeToggle(3000);
        });
    </script>
</body>