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])? ? 以渐进的方式来改变元素的不透明度,不改变高度和宽度
?
?
?
?
?
?