• 【学习笔记】锋利的jQuery(三)事件和动画


    一、jQuery事件

    1,加载事件

    $(document).ready(function(){...}) //等同于$(function(){..})
    $(window).load(function(){...})    //等同于window.onload = fn

    2,基本事件绑定

    bind(type,[.data],fn)  //可绑定多个事件:bind("mouseover mouseout",fn)
    unbind(type,fn)        //解除绑定
    one(type,[.data],fn)   //绑定的事件只执行一次
    
    //简写绑定
    click(fn)/dblclick(fn) mouseover(fn)/mouseout(fn) mouseenter(fn)/mouseleave(fn) //不包括移出元素内部的子元素
    scroll(fn)

    //常用表单事件

    focus(fn)/blur(fn)
    keyup(fn)/keydown(fn) //按下和松下按键
    keypress(fn) //按了个键值时候
    change(fn) //表单文本域(input:text,textarea,select)值改变时触发
    //合成事件 hover(fn1,fn2)
    //相当于bind("mouseenter")和bind("mouseleave") toggle(fn1,fn2,fn3...) //连续单击事件,轮番调用多个函数 trigger(type) //触发对应type的事件,会执行浏览器默认操作,type可为自定义名称 triggerHandler(type) //绑定type事件,且阻止浏览器默认操作

    3,事件的命名空间

    bind("click.name",fn);
    bind("mouseover.name",fn);
    bind("click",fn);
    
    unbind(".name");     //命名空间解绑
    trigger("click!");   //匹配不包含命名空间的click,即第三个

    4,event事件对象

    bind(type,function(event){....})  //添加事件对象参数,推荐命名为event或e,原理上可随便命名
    
    //event属性
    event.type  
    event.target   
    event.relatedTarget      //触发事件的相关元素
    event.pageX/event.pageY  //相对于页面的x和y坐标
    event.which //键盘事件:返回按键的ASCALL码,点击事件:1(左)2(中)3(右)。jq中整合了keyCode和charCode的兼容及鼠标事件
    event.keyCode //返回按键的ASCALL码,建议用which
    //event方法,两个同时使用,相当于事件里边添加"return false;" event.stopPropagation(); //阻止冒泡 event.preventDefault(); //阻止浏览器事件默认行为

     注意:jQuery中,获取和设置类似disabled和checked属性时,用prop()方法代替attr(),只有true/false值。

    二、jQuery动画

    /*
     *params:动画的最终样式或值的效果,如{left:"+=500px"},left会进行累加
     *speed:动画时间,单位ms。slow为600,normal为400,fast为200
     *callback:动画完成后执行的回调函数
     */
    animate(params,speed,callback);
    $div.animate().animate()... //按顺序执行动画
    .stop([clearQueue],[goEnd]) //两个布尔值参数可选,无参数仅停止当前动画
    .delay()  //推迟执行
    
    //动画简写
    hide()/show()   //相当于css("display":"none/block/inline")
    slideUp()/slideDown() //通过高度上下拉伸隐藏
    fadeIn()/fadeOut()    //淡进、淡出
    fadeTo(speed,0~1)     //渐进方式调到指定透明度
    
    //组合动画
    toggle()
    slideToggle()
    fadeToggle()

    //animate(params,500),常用的params
    {scrollTop:"-=50"}
    {height:"+=50"}
     
  • 相关阅读:
    BufferedGraphics 性能测试
    ManualResetEvent 与 AutoResetEvent 区别
    管道式编程(收藏)
    C# 中扩展方法应用
    WinForm Invoke 调用 传入 out 类型参数
    断路器选型的一些理解
    为什么通了PE线,现场设备外壳还需要接地?
    RS485终端电阻解释
    驱动器的“安全转矩关断(Safe Torque Off,STO)”
    TCP和UDP的优缺点及区别
  • 原文地址:https://www.cnblogs.com/xinghh/p/3979230.html
Copyright © 2020-2023  润新知