`
hb_keepmoving
  • 浏览: 226689 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

锋利的jquery —— 事件和动画

阅读更多

jquery中的事件和动画

 

1、jquery的事件

$(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>
      <body>
             <div>
                   <span>
                   </span>
             </div>
      </body>
</html>
 给body、div、span 都绑定一个click事件。

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

 

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

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

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

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

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

event.pageX()  和 event.pageY() 获取到光标相当于页面的X、Y坐标。

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

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

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

 

模拟事件操作

 

1、trigger(type,[,data])     

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

 2、 trigger() 与 triggerHandler() 的区别

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

动画

 

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

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

<!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

 

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

 

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

 

4、自定义动画  animate()

 

5、停止动画 stop()

 

6、其它的动画方法 

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

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

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

 

 

 

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics