jQuery学习笔记（四）

jQuery动画及jQuery事件

jQuery动画

隐藏和显示

show()：显示动画
- 原理：show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见。
- 语法：$(selector).show(speed,callback);
- 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
- 可选的 callback 参数是显示完成后所执行的函数名称。
hide()：隐藏动画
- 原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0。隐藏动画后将display设置为none。
- 语法：$(selector).hide(speed,callback);
显示和隐藏是一对密不可分的动画形式。

显隐切换

toggle()：切换元素的可见状态：显示被隐藏的元素，并隐藏已显示的元素。
- 原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none。
- 语法：$(selector).toggle(speed,callback);

滑动

slideDown()：滑动显示
- 通过使用滑动效果，显示已隐藏的被选元素。
- 语法：$(selector).slideDown(speed,callback);
slidUp()：滑动隐藏
- 通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
- 语法：$(selector).slideUp(speed,callback);
slideToggle():显隐滑动切换
- 通过使用滑动效果（高度变化）来切换元素的可见状态。
- 如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
- 语法：$(selector).slideToggle(speed,callback);

渐变：通过改变不透明度

fadeIn()：淡入
- 使用淡入效果来显示被选元素，假如该元素是隐藏的。
- 语法：$(selector).fadeIn(speed,callback);
fadeOut()：淡出
- 使用淡出效果来隐藏被选元素，假如该元素是显示的。
- 语法：$(selector).fadeOut(speed,callback);
fadeTo()：设置淡出透明效果
- 以渐进的方式调整到指定透明度
- 语法：$(selector).fadeTo(speed,opacity,callback);
fadeToggle()：结合fadeIn和fadeOut，实现渐变切换
- 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
- 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
- 语法：$(selector).fadeToggle(speed,callback);

自定义动画

animate()

注意：
在使用animate方法之前，为了影响该元素的top left bottom right样式属性，必须先把元素的position样式设置为relative或者absolute。
- 该方法执行 CSS 属性集的自定义动画。
- 语法：$(selector).animate(styles,speed,easing,callback);
- 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
- 只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。
- 注释：使用 “+=” 或 “-=” 来创建相对动画（relative animations）。
1
2
3
$(".btn1").click(function(){
$("#box").animate({height:"300px"}); //改变 "div" 元素的高度
});
stop()：停止元素的动画
- 很多时候需要停止匹配正在进行的动画，需要使用stop()。
- jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
- 语法：$(selector).stop([stopAll],[goToEnd]);
- stopAll，goToEnd都是可选参数，为布尔值；如果直接使用stop()方法，会立即停止当前正在进行的动画。
1
2
3
$("#stop").click(function(){
$("#panel").stop(); //停止滑动面板动画
});
判断元素是否处于动画状态
- 如果不处于动画状态，则为元素添加新的动画，否则不添加。
  1
  if(!$(element).is(":animated")){ //判断元素是否处于动画状态}
- 这个方法在animate动画中经常被用到，需要注意。
延迟动画
- 在动画执行过程中，如果想对动画进行延迟操作，则使用delay()

用animate模拟show()、toggle()、hide():

show: 表示由透明到不透明

$("button").click(function(){
    $("div").animate({
        height:'show'
    });
});

toggle: 切换

$("button").click(function(){
    $("div").animate({
        height:'toggle'
    });
});

hide:表示由显示到隐藏

$("button").click(function(){
    $("div").animate({
        height:'hide'
    });
});

动画方法总结

方法名	说明
hide()和show()	同时修改多个样式属性，即高度、宽度和不透明度
fadeIn()和fadeOut()	只改变不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
toggle()	用来代替show()和hide()方法，所以会同时修改多个属性，即高度、宽度和不透明度
slideToggle()	用来代替slideUp和slideDown()方法，所以只能改变高度
fadeToggle()	用来代替fadeIn()和fadeOut方法，只能改变不透明度
animate()	属于自定义动画，以上各种动画方法都是调用了animate方法。此外，用animate方法还能自定义其他的样式属性，例如：left、marginLeft、scrollTop等

jQuery事件

事件对象的属性

event.type：描述触发事件的类型

1
2
3

$("p").bind('click dblclick mouseover mouseout',function(event){
    $("div").html("Event: " + event.type); //显示触发了哪种类型的事件
});

event.target：获取到触发事件的 DOM 元素

1
2
3

$("p, button, h1, h2").click(function(event){
    $("div").html("Triggered by a " + event.target.nodeName + " element."); //显示哪个 DOM 元素触发了事件
});

event.preventDefault：阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）
1
2
3
$("a").click(function(event){
event.preventDefault(); //防止链接打开 URL
});
event.stopPropagation()：阻止事件的冒泡
keyCode：只针对于keypress事件，获取键盘键数字(按下回车->13)
event.pageX / event.pageY：获取到光标相对于页面的x坐标和y坐标
1
2
3
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY); //显示鼠标指针的位置
});
- 如果没有jQuery，在IE浏览器中用event.x / event.y；在Firefox浏览器中用event.pageX / event.pageY。如果页面上有滚动条还要加上滚动条的宽度和高度
event.clientX：光标对于浏览器窗口的水平坐标
event.clientY：光标对于浏览器窗口的垂直坐标
event.screenX：光标对于电脑屏幕的水平坐标
event.screenY：光标对于电脑屏幕的水平坐标

event.which：which 属性指示按了键盘/鼠标的哪个键

1
2
3

$("input").keydown(function(event){
    $("div").html("Key: " + event.which); //显示按了哪个键
});

事件冒泡

什么是冒泡
- 在页面上可以有多个事件，也可以多个元素影响同一个元素。
- 从里到外、嵌套关系、相同事件。
- 其中的某一父类没有相同事件时,继续向上查找。
停止事件冒泡
- 停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。
- 在jQuery中提供了stopPropagation()方法。
阻止默认行为
- 网页中元素有自己的默认行为，例如：单击超链接后会跳转、单击提交后表单会提交，有时需要阻止元素的默认行为。
- 在jQuery中提供了preventDefault()方法来阻止元素的默认行为。
事件捕获
- 事件捕获和冒泡是相反的过程，事件捕获是从最顶端往下开始触发。
- 并非所有的浏览器都支持事件捕获，并且这个缺陷无法通过JavaScript来修复。
- jQuery不支持事件捕获，如需要用事件捕获，要用原生的JavaScript。

绑定

bind()
- 为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
- 语法：$(selector).bind(event,data,function)
- 替代语法：$(selector).bind({event:function, event:function, …});
1
2
3
$("p").bind('click dblclick mouseover mouseout',function(event){
$("div").html("Event: " + event.type); //显示触发了哪种类型的事件
});
one()
- 为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。
- 当使用 one() 方法时，每个元素只能运行一次事件处理器函数。
1
2
3
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"}); //当点击 p 元素时，增加该元素的文本大小
});

绑定特定事件类型方法：

分类	方法名称	说明
页面载入	ready(fn)	当DOM载入就绪可以绑定一个要执行的函数
事件绑定	bind(type,[data],fn)	为每个匹配元素的特定事件绑定一个事件处理函数
事件绑定	unbind()	解除绑定
事件绑定	on(events,[,selector[,]data],handler)	在选择元素上绑定一个或者多个事件处理函数
事件绑定	off()	移除on绑定的事件
事件绑定	delegate(selector,eventType,handler)	为所有选择匹配元素附加一个或多个事件处理函数
事件绑定	undelegate()	移除绑定
事件动态	live(type,fn)	对动态生成的元素进行事件绑定
事件动态	die(type,fn)	移除live()绑定的事件
交互事件	hover()	鼠标移入移出
交互事件	toggle(fn1,fn2,[fn3],[fn4])	每单击后依次调用函数
交互事件	blur(fn)	触发每一个匹配元素的blur事件
交互事件	change()	触发每一个匹配元素的change事件
交互事件	click()	触发每一个匹配元素的click事件
交互事件	focus()	触发每一个匹配元素的focus事件
交互事件	submit()	触发每一个匹配元素的submit事件
键盘事件	keydown()	触发每一个匹配元素的keydown事件
键盘事件	keypress()	触发每一个匹配元素的keypress事件
键盘事件	keyup()	触发每一个匹配元素的keyup事件
鼠标事件	mousedown(fn)	绑定一个处理函数
鼠标事件	mouseenter(fn)	绑定一个处理函数
键盘事件	mouseleave(fn)	绑定一个处理函数
键盘事件	mouseout(fn)	绑定一个处理函数
键盘事件	mouseover(fn)	绑定一个处理函数
窗口操作	resize(fn)	绑定一个处理函数
窗口操作	scroll(fn)	绑定一个处理函数