zoukankan      html  css  js  c++  java
  • jquery学习笔记(三)事件和动画

    一、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前出现了+=或-=,比如{"+=400px"},则表示是在原来值的基础上作动画

    speed:速度参数,可选

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

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

    stop( [queue] [,gotoEnd] )

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

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

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

    toggle()

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

    fadeTO( speed,opacity )

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

  • 相关阅读:
    结构体初体验
    hdu 2068 RPG的错排
    hdu 2160 母猪的故事
    python爬虫从入门到放弃(一)——试用bs4, request爬百度股票
    python web开发c6——阿里云上ubuntu+flask+gunicorn+nginx服务器部署(一)简单测试
    python web开发——c5 图片上传 flask-uploads 云储存sdk
    python web开发——c3 数据库交互和flask-SQLALchemy
    python web开发——c2 flask框架和flask_script
    javar入门——基本数据类型
    java入门——面向对象
  • 原文地址:https://www.cnblogs.com/2050/p/1831845.html
Copyright © 2011-2022 走看看