JavaScript 学习笔记（十）jQuery事件 和 jQuery 的动画函数

一、jQuery绑定事件

方法：on()、 one()、 hover() 、常用事件函数

1. on() 方法绑定事件

1-1. 基础绑定事件

语法：元素集合.on('事件类型', 事件处理函数)

$('div').on('click', function () {
    console.log('我是 div 的点击事件')
})

1-2. 事件委托绑定事件

语法： 元素集合.on('事件类型'，选择器，事件处理函数)

把事件绑定给div 元素，当你在 div 内的 p 元素触发事件的时候，执行事件处理函数

事件委托，把 p 元素的事件委托给了 div 元素来绑定

$('div').on('click', 'p', function () { 
    console.log('我是事件委托形式的事件') 
})

1-3. 批量绑定事件

语法：元素集合.on({ 事件类型1：处理函数， 事件类型2：处理函数 })

注意：不能进行事件委托了

        $('div').on({
            click: function () { console.log('点击事件') },
            mouseover: function () { console.log('鼠标移入事件') },
            mouseout: function () { console.log('鼠标移出事件') }
        })

2. one()绑定事件

用来绑定事件，和 on 方法绑定事件的方式是一样的

区别： one 方法绑定的事件，只能执行一次

2-1. 基础绑定事件

    $('div').one('click', function () { 
        console.log('基础绑定事件')
    })

2-2. 事件委托

    $('div').one('click', 'p', function () {
        console.log('事件委托绑定事件')
    })

2-3. 批量绑定事件

    $('div').one({
        click: function () { console.log('点击事件')},
        mouseover: function () { console.log('鼠标移入事件') },
        mouseout: function () { console.log('鼠标移出事件') }
    })

3. hover()

注意：jQuery 中的一个特殊的事件

语法：元素集合.hover(移入时触发的函数，移出时触发的函数)  

当你只传递一个函数的时候，会在移入移出都触发

     $('div').hover(
        function () { console.log('函数1')},
        function () { console.log('函数2')}
     )

4. 常用事件函数

jQuery 把我们最常用到的一些事件，单独做成了事件函数，我们通过调用这些事件函数，来达到绑定事件的效果。

比如：click()、mouseover()、mouseout()、change()，...

$('div').click(function () { console.log('点击事件') })

二、jQuery 事件的解绑和触发

1. off() 事件解绑

1-1. 解绑全部事件处理函数

语法：元素集合.off(事件类型)

$('div').off('click')  //会把 div 的 click 事件对应的所有事件处理函数全部移除

1-2.  解绑指定的时间处理函数

语法：元素集合.off(事件类型, 要解绑的事件处理函数)

$('div').off('click', h1)  //会把 div 的click 事件对应的 h1 事件处理函数移除

2. trigger() 事件触发

使用代码的方式，来触发事件。

语法： 元素集合.trigger(事件类型)

    setInterval(function () {
        $('div').trigger('click')  //表示每隔 1000ms 触发一次 div 的 click 事件
    }, 1000)

三、jQuery 的基本动画函数

1. show()：表示显示

2. hide(): 表示隐藏

3. toggle(): 表示切换，即本身如果是显示的，就隐藏；本身使隐藏的，就显示。

对于以上三个运动函数，有共同的参数：第一个表示运动时间，第二个表示运动曲线，第三个表示运动结束的回调函数

    <button>show</button>
    <button>hide</button>
    <button>toggle</button>

    <div></div>

    <script>
        $('button:nth-child(1)').click(function () {
            //执行 show 动画函数
            $('div').show(1000, 'linear', function () { console.log('show 结束了')})
        })
        $('button:nth-child(2)').click(function () {
            //执行 hide 动画函数
            $('div').hide(1000, 'linear', function () { console.log('hide 结束了')})
        })
        $('button:nth-child(3)').click(function () {
            //执行 toggle 动画函数
            $('div').toggle(1000, 'linear', function () { console.log('toggle 结束了')})
        })
    </script>

四、  jQuery 的折叠动画函数

1. slideDown()：表示显示

2. slideUp(): 表示隐藏

3. slideToggle(): 表示切换，即本身如果是显示的，就隐藏；本身使隐藏的，就显示。

同理，他们也有有共同的参数。

    <button>slideDown</button>
    <button>slideUp</button>
    <button>slideToggle</button>

    <div></div>

    <script>
        $('button:nth-child(1)').click(function () {
            //执行 show 动画函数
            $('div').slideDown(1000, 'linear', function () { console.log('slideDown结束了')})
        })
        $('button:nth-child(2)').click(function () {
            //执行 hide 动画函数
            $('div').slideUp(1000, 'linear', function () { console.log('slideUp结束了')})
        })
        $('button:nth-child(3)').click(function () {
            //执行 toggle 动画函数
            $('div').slideToggle(1000, 'linear', function () { console.log('slideToggle结束了')})
        })
    </script>

五、jQuery 渐隐渐现动画函数

1. fadeIn()：表示显示

2. fadeOut(): 表示隐藏

3. fadeToggle(): 表示切换，即本身如果是显示的，就隐藏；本身使隐藏的，就显示。

同理，他们也有有共同的参数。

4. fadeTo(运动时间， 指定的透明度， 运动曲线， 运动结束的回调函数)

    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>
    <button>fadeTo</button>

    <div></div>

    <script>
        $('button:nth-child(1)').click(function () {
            //执行 show 动画函数
            $('div').fadeIn(1000, 'linear', function () { console.log('fadeIn 结束了')})
        })
        $('button:nth-child(2)').click(function () {
            //执行 hide 动画函数
            $('div').fadeOut(1000, 'linear', function () { console.log('fadeOut 结束了')})
        })
        $('button:nth-child(3)').click(function () {
            //执行 toggle 动画函数
            $('div').fadeToggle(1000, 'linear', function () { console.log('fadeToggle 结束了')})
        })
        $('button:nth-child(4)').click(function () {
            //执行 toggle 动画函数
            $('div').fadeTo(1000, 0.68, 'linear', function () { console.log('运动到指定的透明度')})
        })
    </script>

六、jQuery 的综合动画函数

animate()：第一个参数：要运动的样式，以一个对象数据类型传递；

第二个参数：运动时间； 第三个参数：运动曲线； 第四个参数：运动结束的回调函数

注意：关于颜色 相关的样式是不能运动的；关于 transform 相关的样式是不能运动到的

    <button>开始 动画</button>
    <div></div>

    <script>
        $('button').click( function() {
            $('div').animate({
                width: 400,
                height: 400,
                'background-color': 'pink',  //不能实现
                transform: 'rotate(45deg)',  //不能实现
                left: 200,
                top: 200,
                'border-radius': '20%'
            }, 1000, 'linear', function(){ console.log('运动结束了')} )
        })
    </script>

七、jquery 结束动画函数

需要用到运动结束的函数。

1. stop()

当任何一个元素，执行了 stop 方法以后，会立即结束当前的所有运动，目前运动到什么位置，就停留在什么位置。一般对于结束动画的时候，都是在运动开始之前。

可以利用结束动画书写动画函数，每一次触发的时候，都会把之前的动画停止下来，只执行本次最新的动画。

    <button>开始动画</button>
    <button>stop</button>
    <button>finish</button>
    <div></div>

    <script>
        $('button:nth-child(1)').click(function () {
            //开始动画
            //使用一个简单的toggle 动画
            // $('div').toggle(2000)

            //利用结束动画书写动画函数
            $('div').stop().toggle(2000)
        })
        $('button:nth-child(2)').click(function () {
            //停止动画
            $('div').stop()
        })
       
    </script>

2. finish()

当任何一个元素，执行了finish 方法以后，会立即结束当前的所有运动，直接去到动画的结束位置。

    <button>开始动画</button>
    <button>finish</button>
    <div></div>

    <script>
        $('button:nth-child(1)').click(function () {
            //开始动画
            //使用一个简单的toggle 动画
            // $('div').toggle(2000)
 
            //利用结束动画书写动画函数
            $('div').finish().toggle(2000)
        })
        
        $('button:nth-child(3)').click(function () {
            //停止动画
            $('div').finish()
        })
    </script>

八、jQuery 的 Ajax 请求

因为发送 ajax 请求，不是操作 DOM ，不需要依赖选择器去获取到元素，他的使用，是直接依赖 jQuery 或者 $ 变量来使用。

语法：$.ajax({本次发送的 ajax 的配置项 })

配置项：1.url：必填，表示请求地址；

2. method：选填，默认是 GET ，表示请求方式；

3. data：选填，默认是 ' '，表示携带给后端的参数；

4. async：选填，默认是 true，表示是否异步；

5. success：选填，表示请求成功的回调函数；

6. error： 选填，表示请求失败的回调函数。

    <script>
        $.ajax({
            url: 'http://localhost:8080/test',
            method: 'POST',
            async: false,
            data: {name: 'xiaozhang', age: 18},
            success: function (res) {
                //res 接受的就是后端给回的响应结果
                console.log(res)
            }
        })
    </script>

文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?share_source=copy_web