jquery学习笔记事件和动画

Posted 2020-09-23

一、ready机制

$(document).ready( function(){} )

$().ready( function(){} )

$( function(){} )

 jquery的ready函数会在dom准备完毕后执行，并且可以多次使用

 

$(selector).load( function(){} ) 此方法相当于js自身的onload方法

如 $(window).load(function(){})    相当于  window.onload=function(){}

-----------------------------------------------------------------------------------

二、事件绑定

$(selector).bind( type[,date],fn )

事件绑定函数，type不用带on前缀,而且还可以是多个事件，用空格隔开，date会作为event.date的值传给事件对象，fn是监听函数

 

一些简化的事件绑定函数：

$(selector).click( function(){} )

支持这种写法的时间还有 mouseover、mouseout  等

 

juqery的自定义事件：

$(selector).hover( enterFun,leaveFun )

enterFun为鼠标移入元素时执行的函数，leaveFun为鼠标离开元素时执行的函数

$(selector).toggle( fun1,fun2,…,funn )

当每一次单击selector时，会按顺序轮番调用toggle里的函数

如果toggle方法不带参数，则调用toggle方法的元素会在可见与不可见之间进行切换

如：$(selector).toggle()   //假设初始是可见的，则这时会隐藏    $(selector).toggle()   //再次调用，元素变为可见

 

三、事件对象的属性 

event.type()   获取事件类型

event.preventDefault()  阻止默认事件行为

event.stopPropagation()  阻止事件继续向上冒泡

event.target()  获取事件元素

event.pageX/Y()  获取鼠标相对于页面的x/y坐标，如果有滚动条，则还要加上滚动条的距离

event.which()  鼠标事件中获取鼠标的左、中、右键,左、中、右键分别返回1、2、3 ；键盘事件中获取键盘按键

 

四、 移除事件

$(selector).unbind( [type][,date] )

第一个参数是事件类型，第二个参数是要移除的监听函数，如果没有参数则删除所有类型的所有事件,如果只有type参数，则只删除该类型事件

 

$(selector).one( type,[date],fn )

用来触发一次事件的函数，即该事件只能触发一次，以后便无效了

 

五、自动触发事件

$(selector).trigger( type[,date])

用来自动触发某类事件，对触发自定义事件尤其有用

$(selector).triggerHandler( type[,date])

上面的函数触发的事件会执行浏览器的默认动作，而该函数触发的事件则不会

 

六、Jquery中的动画

hide()、show()

hide方法把元素的display属性改为none

show方法把元素的display属性改为block或inline（视hide之前元素的diaplay属性而定）

hide()和show()方法还可以带一个表示时间的参数，这样便可实现渐隐和渐显效果，参数可以是一个数字，单位为毫秒，也可以是“slow”、“normal”、“ fast”三个常量

hide()和show()方法会同时减少元素的高度、宽度和透明度

fadeIn()、fadeOut()

这两个函数与hide()、show()方法用法类似，只不过这两个函数改变的只是元素的透明度

slideUp()、slideDown()

与hide()、show()方法用法类似，只不过改变的是元素的高度

 

注：Jquery中的任何动画，都可以指定3中速度参数，即"slow"、"normal"、"fast"，时间长度分别是0.4，0.6，0.2秒，使用速度关键字时要加引号，也可以直接使用数字，单位为毫秒，这时不用加引号

 

animate( params[,speed][,callback] )

自定义动画函数，参数说明如下：

params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",…},如果value前出现了+=或-=，比如{width:"+=400px"},则表示是在原来值的基础上作动画

speed:速度参数，可选

callback:动画执行完毕时的回调函数，可选

对同一个元素运用多个animate时(或其他动画函数)，则会产生动画队列，即每个animate会按先后顺序执行

stop( [queue] [,gotoEnd] )

queue:布尔类型，为true时表示清空后面的动画队列

gotoEnd:布尔类型，为true时表示跳转到正在执行动画的末状态

当使用stop()方法时，会立即停止正在执行的动画

toggle()

toggle()方法用来切换元素的可见状态，如果元素时可见的则切为隐藏的，如果元素时隐藏的则切为可见的

fadeTO( speed,opacity )

可以把元素的透明度以渐进的方式调整到指定值