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

    jquery中的事件和动画

       

    1jquery的事件

    $(document).ready()   javascript中的 window.onload()  的对比;

       

    简写成: $(function(){});          $() <==>$(document)

       

    绑定事件 bind(type,[,data],fn)

           第一个参数是类型;如:click...

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

           第三个参数是用来绑定的处理函数;

           简写: $(".hello").bind("click",function(e){});   <====>     $(".hello").click(function(){});

       

    合成事件 hover(enter,leave) 

          当鼠标移动到元素上时,触发第一个函数;当鼠标离开元素时,触发第二个函数;

       

    合成事件 toggle(fn1,fn2,fn3.....fnN)

         当第一次单击时触发第一个函数,第二次时触发第二个函数.......依次循环

         toggle()  还可以切换元素的可见状态      

       

    事件冒泡

           例如:

    Html代码  

    1. <html>  
    2.       <body>  
    3.              <div>  
    4.                    <span>  
    5.                    </span>  
    6.              </div>  
    7.       </body>  
    8. </html>  
    9.  bodydivspan 都绑定一个click事件。  

    如果单击 span 元素后。。。spandivbody click 事件都会被执行;      这就叫事件冒泡  (从里往外)

       

    1、停止事件冒泡   event.stopPropagation()   <====> return false;

    2、阻止默认行为    submit的提交行为;超链接的跳转行为等

           event.preventDefualt()  <====> return false;

    event.type() 获取事件类型。

    event.target() 获取触发事件的元素。

    event.pageX()   event.pageY() 获取到光标相当于页面的XY坐标。

    event.which()  在鼠标单击事件中获取到鼠标的左、中、右键;以及键盘事件中获取键盘的按键。

    event.metaKey()  在键盘事件中获取<ctrl>按键。

    event.originalEvent()  指向原始的事件对象。

       

    模拟事件操作

       

    1trigger(type,[,data])     

    Js代码  

    1. $(".btn").trigger("click");//当加载完成时,就执行class="btn" click事件  
    2. //等价于 $(".btn").click();  

     2 trigger() triggerHandler() 的区别

    Js代码  

    1. $("input").trigger("myclick");//执行完myclick事件后,聚焦到input文本框  
    2. $("input").triggerHandler("myclick");//执行完myclick事件后,不会聚焦input文本框  

       

    动画

       

    1show()  hide()    不带参数表示 立即显示或隐藏元素

    JQUERY 的动画要求在标准模式 下进行,否则有可能发生抖动;标准模式 即是要求文件头部包含如下的DTD定义:

    Html代码  

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

     默认值:    fast = 200ms    normal = 400ms    slow = 600ms

       

    2fadeIn()  fadeOut()  只改变元素的 不透明度 ,不会改变元素的高度和宽度

       

    3slideUp()  slideDwon() 只改变元素的高度。

       

    4、自定义动画  animate()

       

    5、停止动画 stop()

       

    6、其它的动画方法 

         toggle(speed,[callback])     切换元素的可见状态

         slideToggle(speed,[callback])   通过高度的变化,来切换元素的可见性

         fadeTo(speed,opacity,[callback])    以渐进的方式来改变元素的不透明度,不改变高度和宽度

  • 相关阅读:
    迅为4412开发板实验Menuconfig_Kconfig(上)
    迅为IMX6ULL开发板Linux 4G通信实验
    迅为IMX6ULL开发板Linux RS232/485驱动实验(下)
    迅为4412开发板实验_Makefile编译(下)
    迅为IMX6Q开发板QtE5.7编译(上)
    迅为干货 | iTOP-4418/6818移植mt6620热点
    UDT源码剖析(十一)之SendQueue And RecvQueue
    UDT源码剖析(九)之CCC
    UDT源码剖析(十)之Channel
    UDT源码剖析(八)之Cache
  • 原文地址:https://www.cnblogs.com/wuseyukui/p/3402685.html
Copyright © 2011-2022 走看看