16_JQuery高级

Posted 2020-11-29 ktfeng

## 今日内容：
    1.JQuery高级
        1.动画
            1.三种方式显示和隐藏元素
                1.show([speed,[easing],[fn]])
                    *参数：
                        1.speed:动画的速度。三个预定义的值（"slow","normal","fast")或表示动画时长的毫秒数值（如：1000）
                        2.easing:用来指定切换的效果，默认是"swing",可用参数"linear"
                            *swing:动画执行效果是 先慢， 中间快， 最后又慢
                            *linear：动画执行时，速度是匀速的
                        3.fn:在动画完成时执行的函数，每个元素执行一次。

                2.hide([speed,[easing],[fn]])
                3.toggle([speed],[easing].[fn])

            2.滑动显示和隐藏方式
                1.slideDown([speed],[easing],[fn])
                2.slideUp([speed,[easing],[fn]])
                3.slideToggle([speed],[easing],[fn]

            3.淡入淡出显示和隐藏方式
                1.fadeIn([speed],[easing],[fn])
                2.fadeOut([speed],[easing],[fn])
                3.fadeTonggle([speed,[easing],[fn]])

        2.遍历
            1. js的遍历方式
                * for(初始化值;循环结束条件;步长)
            2. jq的遍历方式
                1. jq对象.each(callback)
                    1. 语法：
                        jquery对象.each(function(index,element){});
                            * index:就是元素在集合中的索引
                            * element：就是集合中的每一个元素对象
        
                            * this：集合中的每一个元素对象
                    2. 回调函数返回值：
                        * true:如果当前function返回为false，则结束循环(break)。
                        * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
                2. $.each(object, [callback])
                3. for..of: jquery 3.0 版本之后提供的方式
                    for(元素对象 of 容器对象)

        3.事件绑定
            1.jQuery标准的绑定方式
                iq对象.事件方法（回调函数）；
            2.on绑定事件/off解除绑定事件
                jq对象.on("事件名称"，回调函数)
                jq对象.off("事件名称")
            3.事件切换：toggle
                *jq对象.toggle(fn1,fn2...)
                    *当单击事件jq对象对应的组件后，会执行fn1.第二次点击会执行fn2...
                
                *注意：1.9版本 .toggle()  方法删除，jQuery Migrate （迁移）插件可以恢复字功能。

                    
            
        4.案例
        5.插件：增强JQuery的功能
            1.实现方式：
                1.$.fn.extend(object)
                    *增强通过JQuery获取对象的功能  $("#id")
                2.$.extend(object)
                    *增强JQuery对象自身的功能  $/jQuery