• jQuery中的事件与动画


    1.事件的绑定:bind(type[,data],fn)

                type:事件类型,包括blur,focus,load,resize,

     scroll,unload,click,dbclick,mousedown

     ,mouseup,mouseover,mouseout,

                     mouseenter,mouseleave,change,select,

     submit,keydown,keypress,keyup和error

                     等.

        data:可选参数,作为event,data属性值传递给事件对象的额外数据对象.

        fn:用来绑定的处理函数.

    2.合成事件:(1)hover(enter,leave);模拟鼠标悬停事件,当光标移上时,即触发(enter),相当于mouseover;移除鼠标时就触发(leave),相当于mouseout.触发第二个函数需要用tigger("mouseleave")来触发.

      (2)toggle()方法

                 toggle(fn1,fn2....fnN);模拟鼠标连续单击事件,一次触发,直到最后一个.

    3.事件冒泡:事件会按照DOM的层次结果由里层向外层元素,直到           DOM顶端被触发.

    4.停止事件冒泡:(1)return false;

          (2)stopPropagation();

    5.阻止默认行为:(1)preventDefault()方法;

    (2)return false;

    6.事件捕获:与事件冒泡相反,事件捕获由最顶端往下开始触发.

    7.事件对象的属性:

    (1)event.type():取事件的类型

    (2)event.preventDefault():阻止默认事件行为

    (3)event.stopPropagation():阻止事件冒泡

    (4)event.target():取触发事件的元素,避免W3C,IE,safari浏览器不同标准的差异

    (5)event.relatedTarget()

    (6)event.pageX()和event.pageY():取光标相对于页面的坐标

    (7)event.which():获取鼠标或者键盘的按键

    (8)event.metakey():对键盘的<ctrl>按键解释的不同

    (9)event.originaIEvent():指向原来的事件对象

    8.移除事件:unbind(type[,data]);

    9.one(type[,data],fn);

     注意:one与bind用法一样;只是one只能触发一次,bind可以多

    10.trigger();不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义的事件

    (1).传递数据:trigger(type[,data]);以数组传递

    (2)执行默认操作:

    例如:$("input").trigger("focus");

    11.show()和hide():同时修改元素的多个样式属性(高度,宽度,不透明度)

    (1)调用hide()时,要设置元素的属性display:none,调用show()时,元素属性设置为:display:block或(inline)

    (2)当show()和hide()不带任何参数时,作用时立即隐藏或者显示匹配元素

    12.fadein()和fadeOut():只改变元素的不透明度,不改变其高度和宽度

    (1)fadeout()在指定的一段时间内降低元素的不透明度,知道元素完全消失(display:none),fadein()则相反

    13.slideUp()和slideDown():只改变元素的高度

    (1)如果display:none;则slideUp()由上至下显示延伸,slideDown()则由下到上缩短隐藏.

    14.自定义动画方法animate()

    (1)语法结构:animate(params,speed,callback);

    params:一个包含样式属性及值的映射

    speed:元素的参数,可选

    callback:在动画完成时执行的函数,可选

    (2) 自定义简单动画:设置属性position:relative或(absolute)才能影响元素的"top","left","bottom","right"样式属性.

    (3)累加,累减动画:(+=)或(-=)表示在当前位置累加或累减

    15.停止动画和动画状态的判断

    (1)停止元素的动画:

    stop([clearQueue][,gotoEnd]);

    (2)切换元素的可见状态:toggle()与hide()和show()用法相同,可以互换.

    toggle(speed,[callback])

    (3)通过高度变化来切换匹配元素的可见性:slideToggle()与slideUp(),slideDown()用法相同,可以互相替换.

    slideToggle(speed,[callback])

    (4)把元素的不透明度以渐进方式调整到指定的值:

    fadeTo(speed,opacity,[callback]

  • 相关阅读:
    设计模式观察者模式在Java中的使用示例
    设计模式装饰者模式在Java中的使用示例
    git 恢复误删的远程分支
    从基础到实战 手把手带你掌握新版Webpack4.0
    掘金小册 – Taro 多端开发实现原理与项目实战
    react+tsx中使用betterscroll
    Taro3最新版本开发企业级出行全栈项目
    babelpolyfill的几种使用方式
    Vue3 + React18 + TS4 入门到实战
    typescript学习
  • 原文地址:https://www.cnblogs.com/qinzhenyu/p/11049348.html
Copyright © 2020-2023  润新知