一、jQuery中的事件:
1、加载DOM:
jQuery:$(document).ready();
JavaScript:window.onload();
$(window).load(function(){
}) 等价于
window.onload = function(){}
简写方式:
(1)$(document).ready(functon(){})
(2)$().ready(functon(){})
(3)$(function(){})
2、事件绑定:
bind();
3、合成事件:
(1)hover() :用于模拟光标悬停事件。
(2)toggle() :用于模拟鼠标连续单击事件。另一作用,切换元素的可见状态。
4、事件冒泡:
event.stopPropagation(); //停止事件冒泡
event.preventDefault(); //阻止默认行为
改写为:
return false;
事件捕获:
jQuery不支持事件捕获,需要使用JavaScrip原生实现。
5、事件对象的属性:
(1)event.type
(2)event.stopPropagation();
(3)event.preventDefault();
(4)event.target
(5)event.relatedTarget
(6)event.pageX、event.pageY
(7)event.which
(8)event.metaKEY
6、移除事件:
unbind();
one();
7、模拟操作:
trigger(type,[data]); //参数:类型、传递的数据
$("btn").trigger("click"); 简化写法:
$("btn").click();
注意:常用模拟、触发自定义事件、传递数据、具有执行默认操作的功能,例如:
$("input".trigger("focus"); //触发元素绑定的focus事件,也会使input元素本身得到焦点(浏览器的默认操作)
triggerHandler() :只触发绑定的focus事件,不执行浏览的默认操作。
8、其它用法:
bind();
(1)绑定多个事件类型。
(2)添加事件命名空间,便于管理。
(3)相同事件名称,不同命名空间执行方法,trigger("click!");。
二、jQuery中的动画:
(1)show(); //同时修改元素的多个样式属性,高度、宽度、不透明度。
将元素的display样式设置为先前的显示状态(block 或 inline,或其他除了 none 之外的值)
.show("slow") :元素将在600毫秒内慢慢的显示出来。其它的关键字还有 normal 和 fast(长度分别为400毫秒和200毫秒),还可以指定一个数字,单位是毫 秒。方法 hide();也是适用的。show(600)方法会从上到下增大内容的高度,从左到右增大内容的宽度,同时增加内容的不透明度,直到内容完全显示。
(2)hide();
将元素设置css样式,display/none,等价于,.css("display","none")
(3)fadeIn(); //改变元素的不透明度。增加不透明度。
(4)fadeOut //在指定的时间内降低元素的不透明度,直到元素完全消失(display:none)。
(5)slideUp(); //改变元素的高度。元素又下到上缩短隐藏。
(6)slideDown(); //如果一个元素的display属性为none,调用该方法,这个元素将从上至下延伸显示
注意:jQuery中的任何动画效果,都可以指定3种速度参数,即 slow 、normal 和 fast(时间分别是0.6秒、0.4秒、0.2秒),当使用速度关键字时要加引号,例如:show("slow");如果用数字作为时间的参数,不需要加引号,单位是毫秒,例如:show(1000);。
2、自定义动画方法:
animate();
//简单动画、累加累减动画、多重动画([1]、同时执行多个动画,[2]、按顺序执行多个动画,动画队列。)、综合动画。
3、动画回调函数:
回调函数适用于jQuery中所有的动画效果方法。
4、停止动画和判断是否处于动画状态:
(1)停止元素的动画:
stop([clearQueue],[gotoEnd]);
参数clearQueue和gotoEnd都是可选参数,为Boolean值(true或false)。
参数clearQueue代表是否要情况未执行完的动画队列。
参数gotoEnd代表是否直接将正在执行的动画跳转到末状态。
(2)判断元素是否处于动画状态:
$("element").is(":animate");
(3)延迟动画:
delay();
5、其他动画方法:
(1)toggle(); :切换元素的可见状态。
(2)slideToggle(); :通过高度变化来切换匹配元素的可见性。只调整元素的高度。
(3)faseTo(); :把元素的不透明度以渐进方式调整到指定的值。只调整元素的不透明度。
(4)fadeToggle(); :通过不透明度变化来切换匹配元素的可见性。只调整元素的不透明度。
6、动画方法概括:
改变样式属性:
方法名 | 说明 |
hide() 和 show() | 同时修改多个样式属性,即高度、宽度、不透明度 |
fadeIn() 和 fadeOut() | 只改变不透明度 |
slideUp() 和 slideDown() | 只改变高度 |
fadeTo() | 只改变不透明度 |
toggle() | 用来代替hide()和show()方法,所以会同时修改多个样式属性,即高度、宽度和不透明度 |
slideToggle() | 用来代替slideUp() 和 slideDown(),所以只能改变高度 |
fadeToggle() | 用来代替fadeIn() 和 fadeOut()方法,所以只能改变不透明度 |
特别注意:
animate() | 自定义动画方法,可以用它代替所以的动画方法 |