Jquery高级

动画

默认显示和隐藏方式

  1. show(speed,easing,fn)
  2. hide(speed,easing,fn)
  3. toggle(speed,easing,fn)

滑动显示和隐藏方式

  1. slideDown(speed,easing,fn)
  2. slideUp(speed,easing,fn])
  3. slideToggle(speed,easing,fn)

淡入淡出显示和隐藏方式

  1. fadeIn(speed],easing,fn)
  2. fadeOut(speed],easing,fn)
  3. fadeToggle(speed,easing,fn])

参数解析

  1. speed：动画的速度。三个预定义的值(“slow”,”normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
  2. easing：用来指定切换效果，默认是**”swing”，可用参数“linear”**
    • swing：动画执行时效果是 先慢，中间快，最后又慢
    • linear：动画执行时速度是匀速的
  3. fn：在动画完成时执行的函数，每个元素执行一次。

自定义动画

  • animate({opacity,width,heigth},speed,fn)

    • opacity：透明度
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var div = $('#test-animate');
    div.animate({
        opacity: 0.25,
        width: '300px',
        height: '300px'
    }, 3000, function () {
        // 恢复至初始状态:
        $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
    });

遍历

js的遍历方式

  • for(初始化值;循环结束条件;步长)

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 容器对象)

事件绑定

jquery标准的绑定方式

  • **jq对象.事件方法(回调函数)**；
  • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
    • 表单对象.submit();//让表单提交

on绑定事件/off解除绑定

  • jq对象.on(“事件名称”,回调函数)
  • jq对象.off(“事件名称”)
    • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

扩展

给jquery绑定插件

  • $.fn.名字 = function(参数){}：最后要return this

    1
    2
    3
    4
    $.fn.myjqueryplugin = function(args){
        this.css("font-size","50px");
        return this;
    }

把多个值合并

  • $.extend(target, obj1, obj2, …)

    1
    2
    // 把后面的都合并到一个变量里去
    var allJson = $.extend({},{"name":"jtx"},{"age":"18"})

错误处理

1
2
3
4
5
6
7
try {
    写上感觉可能出错的代码
} catch (e) {
    出现错误执行这里的
} finally {
    无论出不出现错误最终都会执行
}

相关文章

JavaScript基础

JavaScript高级

Jquery基础

Bootstrap

Ajax和Json

DataTables

Sweetalert2

zTree使用

Vue

前端模块化

2019
#前端知识