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])
以渐进的方式来改变元素的不透明度,不改变高度和宽度
分享到:
相关推荐
本书循序渐进的对jQuery的各种方法和使用进行介绍,读者可以系统的掌握jQuery关于DOM操作、事件监听和动画、表单操作、AJAX以及插件方面知识点,并结合每个章节后面的案例演示进行练习,达到掌握本章节知识点的目的...
jQuery是继prototype之后又一个优秀的Javascrīpt框架。... jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jquery图片加载动画——queryloader2 兼容所有浏览器
主要应用 scrollTop 和 animate 两个方法, 浏览器页面下拉或上拉卷动的时候,广告始终在窗口固定位置,动画的变到固定位置。
网页模板——jQuery实现滚动到网站页面底部动画弹出对话框
网页模板——jQuery实现生日蛋糕蜡烛动画特效
第12章 回头重看jQuery——核心及工具 第13章 jQuery增强用户体验 第14章 jQuery中使用AJAX跨域操作 第15章 jQuery+PHP动态网站实践 第16章 jQuery键盘操作 第17章 jQuery可视化数据显示 本资料共包含以下附件: ...
网页模板——jquery带缩略图和多种过渡动画效果的轮播图特效源码
第4章 jQuery中的事件和动画 4.1 jQuery中的事件 4.1.1 加载DOM 4.1.2 事件绑定 4.1.3 合成事件 4.1.4 事件冒泡 4.1.5 事件对象的属性 4.1.6 移除事件 4.1.7 模拟操作 …… 第5章 jQuery对表单、表格的操作及更多...
《众妙之门——JavaScript与jQuery技术精粹》最大的价值在于其结合大量实例的生动方式,详细阐述了使用JavaScript和jQuery时应掌握的知识和技巧,以及作者通过实践掌握的各种秘诀,可帮助开发人员提升自身水平,向...
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"...jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities
网页模板——jQuery实现的键盘响应式气球爆炸动画特效源码
网页模板——jQuery+CSS3实现金色的劳力士手表ui动画特效源码
网页模板——jQuery+CSS3实现的双层圆环形进度条加载动画特效
网页模板——jQuery实现点击按钮爆炸式弹出不同颗粒动画特效源码
网页模板——jQuery实现按下键盘对应字母亮灯的字母墙动画效果源码
网页模板——jQuery+CSS3实现鼠标点击显示泼墨动画过渡切换特效源码
Spotlight: jQuery stickyFloat——jQuery动画悬浮在网页顶部的层stickyFloat代码,上部的一个DIV在jQuery的控制下会动画缓冲移动到原始的位置,不管你如何拉动滚动条,它始终会显示在最初的顶部,通过本例你可学习...
本文主要对jQuery停止动画——stop()方法的使用进行详细介绍,对学习jQuery动画有很好的帮助,下面就跟小编一起来看下吧
首先需要有队列(queue)...——————————————————————————– 先根据参数调用jQuery.speed获取动画相关参数,得到一个类似如下的对象;并且生成动画执行函数doAnimation optall = { comple