jQuery中 的动画和事件

第一个开始的事件
$(document).ready()方法,可以缩写成$(function(){}),$(document)也可以简写成$()

与传统的window.onload有所不同

1: onload方法将会在网页中所有元素被加载到浏览器后才执行
ready方法将会在dom完全就绪时就可以被调用,并不等于所有元素关联的文件已经下载完毕
2: onload函数只能保存一个对函数的引用,而ready可以保存多个引用


事件的绑定

bind(type,[data],fn)
绑定元素的事件,type为html事件类型,js的形式(去除on),data为传递的参数(可选),fu为监听的函数

注意data需要使用[]进行包装,在监听函数中使用一个参数进行捕获,e.data获取数组形式后,进行访问

也可以使用简写的进行绑定事件,如:
$("p").click(function(){$(this) //为源对象})

合成事件,hover(),toggle() 用于两个事件之间的切换,分别为移过和点击后触发
其中hover的使用例子为hover(fun,fun2),而taggle则可以带更多的function

使用元素.toggle(),带指定的事件类型,可以模拟事件: 如 $(".vic").toggle("click")

事件的冒泡处理

与Flex类似,JavaScript中的事件也同样存在,捕获--触发--冒泡 三个节点.
比较常见的情况是,在子元素触发事件时,如果父元素也监听同类事件,那么也会一起触发,并向上冒泡

jQuery对事件监听函数,都会默认传递一个参数,一般命名为event(非必须,也可以任意命名)

停止事件冒泡的方法
event.stopPropagation();

组织默认行为--如超链接的跳转
event.preventDefault();

更简单的方式:
return false,对上面两种都起同样的作用

由于不同浏览器对事件捕获阶段的支持不同,所有jQuery并不支持事件捕获

event参数中的其他属性

event.type ---事件的类型,如click
event.target---事件的html元素对象
event.relatedTarget() --如在mouseover事件触发时,相关的元素,如另外一个mouseout元素
event.pageX()/event.pageY() --相对于页面的x,y坐标
event.which() --获取与事件相关的键盘或鼠标的按键值
event.metaKey()--判断事件是否包含ctrl按键
event.originalEvent()--指向原始的事件对象

移除事件
unbind("type") 移除元素上指定类型的事件,也可以不带参数,移除该元素所有的事件.也可以带两个参数,移除指定事件
类型上,不同的监听函数(一个事件可以有多个监听函数)

获取监听事件函数的方法,在开启监听时:
$("btn").bind("click",myfun=function(){....}); //移除时,就可以使用myfun进行移除

one(...) 类似bind的使用,指定监听的事件类型,已经对于的函数,区别在于one只会触发一次后,就被自动移除


trigger("..") 触发元素的指定事件,可以使用bind绑定任意自定义事件与对应的事件监听函数,然后使用trigger触发

注意:使用trigger时,默认将会触发浏览器对该事件的默认行为,比如focus等,也会使组件获取焦点,可以使用
triggerHandler("focus"),将会取消浏览器的默认行为

一次绑定多个事件
bind("mouseover mouseout") 可以同时绑定两个不同的时间,注意只能使用一个函数进行监听

给事件添加命名空间,便于管理
bind("click.p",fun...) ,移除的时候,可以批量使用ubind(".p") 进行移除同命名空间的事件

相同事件名称,不同命名空间执行方法
在trigger("click!"),中注意使用!,将只会触发对应的非命名空间的方法


jQuery中的动画

最常见的有
show()
hide()

会根据display的属性值,进行隐藏和显示, 注意需要使用标准模式的xHtml的DTD头部

可以带给这两个方法带参数,表示不同的显示效果,主要是现实速度上的不同
关键字有: slow,hide,normal(400),fast(200),毫秒的时间

也可以指定具体的数值,如 show(1000) 表示1000毫秒内

渐变效果: fadeIn()方法和fadeOut()方法,只通过修改元素的不透明度

改变元素的高度:slideUp()方法和slideDown()方法,用于收放组件..卷帘

animate() 自定义动画类型,弥补其他三种动画只能同时执行一种缺陷

注意需要在样式里面设置position: relative或absolute其他绝对位置的布局,否则有可能导致效果无法显示

animate({left:"500px"},3000,collback); 其中
第一个{}里面用json形式设置动画要修改的属性
第二个3000,表示持续时间,也可以使用slow等关键字代替
第三个collback为回调函数

属性中 可以使用+= 来对元素进行添加
常用的属性有left,right,height,width,top,opacity(透明度,使用1-0之间),marginLeft,scrollTop如果分开,会连续的执行,并不会时执行

也可以使用链式的方法,设置多个动画效果,逐步执行

在使用动画时,注意对元素属性的修改,如样式,将不会在动画结束后执行,需要使用回调函数中进行变更

同样回调函数也可以作用与其他的3个动画

使用stop可以立即结束指定元素的动画,不带参数,只会停止当前链表中的一个动画,带true参数则会结束所有动画
最多可以带两个参数,其中两个都为true时,将会停止所有动画,并改变成动画的最终结果,一个为true时,将会停止
动画效果,并且保持现状.

is(":animated") 判断指定元素是否在动画效果

其他动画效果

toggle() 切换元素的可见性,自动来回切换隐藏与显示
slideToggle() 通过高度来回切换匹配元素的可见性
fadeTo() 使用透明度切换匹配元素的可见性,参数为时间和结果的透明度