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

前端模块化