zoukankan      html  css  js  c++  java
  • jquery中的事件与动画

    一:Jquery中的事件 加载DOM事件:

        (1)执行时机:Window.onload()方法实在网页中所有的元素完全加载到浏览器后才执行.而jquery中的$(document).ready()方法注册的事件处理程序,在DOM完全就绪时可以直接调用.

        (2)执行次数:Window.onload()方法只执行一次,而$(document).ready()方法可以执行多次.

         (3)简约写法:

            Window.onload()方法没有简约写法,

           而$(documen).ready()方法有三种简写方法,并且这三种方法完全等价.

             分别是:$(document).ready(function(){}),

                  $().ready(function(){}),

                 $(function(){}).

                 事件绑定:

            (1)方法:bind(type,[data],fn),type表示事件类型,data可选参数,作为event.data属性值传递给事件对象的的额外数据对象.fn表示用来绑定的处理函数.

            (2)作用:为对象注册事件.

            (3)对比:Jquery中的事件绑定类型比普通的javascript事件绑定事件类型少了on,如鼠标单击事件在jquery中对应的click事件,在javascript中对应的是onclick事件.

            (4)绑定方法还用one()方法,它与bind()方法一样,只不过one()方法只有一次,bind()可以有多次.

                合成事件:

                (1)方法:hover()方法用于模拟光标悬浮事件,是mouseover()和mouseout()方法事件的组合.toggle()方法用于模拟鼠标连续单击事件,不停循环处理函数.

                (2)togger()方法的作用:当没有参数时,注册该事件在显示和隐藏状态之间不停的切换.

                  (3)定义:多个事件组合在一起使用. 事件冒泡:

                     (1)定义:当DOM树不同的层级绑定相同的事件,当某一层级的事件触发,该层上部的绑定了该事件的层级都会触发该类型的事件.                   (2)方法:stopPropagation()方法用于停止事件冒泡,只能触发该层级的事件,而其它层级不会触发,还可以使用return false来停止事件冒泡. preventDefaut()方法用于阻止默认行为,即阻止DOM对象的默认行为.

                     (3)注释:stopPropagation()方法与preventDefault()方法都需要参数来调用,而这个参数实在fn处理函数中传入的.

                     事件对象的属性:

                    (1)作用:对事件对象的常用属性进行封装,使得事件处理函数在各大浏览器下都可以正常运行,不需要对浏览器进行类型判断.

                    (2)方法:都需要参数来调用,而这个参数是fn处理函数传入的,

                       type()方法:该方法用于获取到事件的类型.

                       preventDefault()方法:该方法用于阻止默认的事件行为.

                       stopProPagaion()方法:该方法用于阻止事件冒泡.

                       target()方法:该方法用于获取到触发事件的元素。

                       relaedTarge()方法:

                        该方法用于对jquery进行封装,使之能兼容各种浏览器.

                       pageX()与pageY()方法:

                        该放过的用于获取到光标对相对与页面的X坐标和Y坐标.

                       which()方法:

                        该方法用于在鼠标单击事件中获取到鼠标的左,中,右键,在键盘事件中获取键盘的按键.

                      metaKey()方法:

                        该方法用于获取触发事件时键盘的键值.

                      originaIEvent()方法:

                        该方法用于指向原始的事件对象. 移除事件:

                        (1)作用:移除元素上已经注册的事件(移除特定的事件类型).

                         (2)方法:onBind([type],[data])方法,type表示事件类型,data表示将要移除的函数.如果没有参数,则删除所有的绑定事件.

                   模拟操作:

                    (1)方法:trigger(type,[data]),type表示要触发的事件类型,data表示要传递给事件处理函数的附加数据,以数组形式传递.                       triggerHandler()方法:

                          该方法触发元素上绑定的特定事件,同时取消浏览器对此事件的默认操作.

                     (2)作用:模拟事件操作. jquery中的动画:

                        (1)作用:通过jquery中的动画方法,给网页添加精彩的视觉效果.

                         (2)方法: show(speed,callback)与hide(speed,callback)方法是jquery中最基本的动画方法,用于显示和隐藏对象,speed表示动画执行的时间,

                              callback表示动画执行完时的处理函数.执行的时间:

                              slow表示元素在600毫秒内显示和隐藏,normal表示元素在400毫秒内显示和隐藏,

                              fast表示元素在200毫秒内显示和隐藏.

                               fadeIn(speed,callback)和fadeOut(speed,callback)方法:作用:只改变元素的不透明度.

                              fadeOut()方法相反.

                               slideUp(speed,callback)和slideDown(speed,callback)方法:作用:改变元素的高度.

                               slideUp()表示元素将由上到下缩短隐藏,

                              slideDown()方法表示元素将由下到上的扩展显示.

                               animate(params,speed,callback)方法:表示自定义动画,

                              params表示样式属性及值的映射,如:{top:"100px",left:"+=100px"},

                              speed表示速度,callback表示回调函数.即事件处理函数.

            注意:在使用animate()方法之前,为了影响该元素的top,left,bottom,right样式属性,必须先把元素的 position样式设置为relative或者absolute.还需将整个多余的内容页用overflow样式设置hidde隐藏起来.

                               stop([clearQueue],gotoEnd)方法:作用:停止动画.clearQueue表示是否清空执行完的动画列队,gotoEnd表示是否直接将正在执行的动画跳转到末状态. $(element).is(":animated")表示该对象是否在执行动画.

  • 相关阅读:
    隐藏导航练习
    分层导航
    做一个问题,如果输入的答案正确则弹出正确,错误弹出错误
    同意按钮,倒计时10秒
    golang strings
    seek指针大文件上传
    go文件操作大全
    zipimport.ZipImportError: can't decompress data; zlib not available 解决办法
    centos 安装redis自启动要点
    golang 文件读取
  • 原文地址:https://www.cnblogs.com/xiongzhuang/p/3484581.html
Copyright © 2011-2022 走看看