​第四章(jQuery中的事件与动画)

发布时间:2020-10-03 14:50:05 作者:彳亍的路人
来源:网络 阅读:229

               第四章(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])
















推荐阅读:
  1. ​Oracle安装笔记
  2. ​NOSQL与关系型数据库的区别

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

事件 动画 jquery

上一篇:vue mint-ui tabbar变组件使用

下一篇:python模拟事件触发机制详解

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》