012-jQuery高级

2019 10 08

1. 动画

   1. 三种方式显示和隐藏元素

      1. 默认显示和隐藏方式

         1. show([speed,[easing],[fn]])
            1.speed:动画的速度，三个预定义(‘slow’,‘normal’,‘fast’),或表示动画时长毫秒值
            2.easing:切换效果，默认值’swing’,可选参数’linear’
            *swing 先慢，再快，最后慢
            3.fn,function，回调函数，在动画执行完之后调用一次
         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. fadeToggle([speed,[easing],[fn]])

2. 遍历
   1.js for(初始化值;结束循环条件;步长)
   2.jq
   1.jq对象.each(function(索引,元素){})
   this 表示每个元素对象
   回调函数返回值： function返回false 结束循环(break)
   function返回true 结束本次循环，继续下次循环(continue)
   2.$.each(function)
   3.for(元素 of 容器对象) 3.0版本以后使用

3. 事件绑定
   1.jq的标准事件绑定方式
   jq对象.事件方法(回调函数)
   当回调函数为空的时候，会触发浏览器默认行为
   focus() submit()提交表单
   2.on绑定事件/off解除绑定
   jq对象.on(‘事件名称’, 回调函数)
   jq对象.off(‘事件名称’) 当不写参数的时候，解除所有事件
   3.事件切换
   jq对象.toggle(fn1, fn2,…) 依次执行(可循环)参数函数
   从1.9版本之后，jq不在支持toggle 所以要用migrate(迁移)插件回复此功能

4. 插件：增强JQuery的功能
   1.实现方式：
   1. $.fn.extend(对象)
   增强jq对象的功能 $(’#id’).新功能();
   2. $.extend(对象)
   $.新功能();