zoukankan      html  css  js  c++  java
  • 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]

  • 相关阅读:
    工具函数(代码块的大小,代码块起始地址,提升进程权限)
    在共享DLL中使用MFC 和在静态库中使用MFC的区别
    虚拟机检测绕过总结--不定时更新
    OSGI原形(.NET)
    iOS开发技术分享(1)— iOS本地数据存储
    将JSON映射为实体对象(iOS篇)
    灵活的路由(上)
    github开源项目
    EF里查看/修改实体的当前值、原始值和数据库值以及重写SaveChanges方法记录实体状态
    实体能否处于非法状态
  • 原文地址:https://www.cnblogs.com/qinzhenyu/p/11049348.html
Copyright © 2011-2022 走看看