zoukankan      html  css  js  c++  java
  • Jquery绑定事件及动画效果

     Jquery绑定事件及动画效果

    本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522

    绑定事件

    bind(type,data,fuc)

    one(type,data,fuc) //只执行一次

    常见事件类型

    名称 含义
    blur 失去焦点
    focus 获取焦点
    load 加载
    resize 重置大小
    scroll 滚动
    unload 卸载
    click 点击
    dblclick 双击
    mousedown 鼠标按下
    mouseup 鼠标弹起
    mousemove 鼠标移动
    mouseover 鼠标悬停
    mouseout 鼠标移走
    mouseenter 鼠标移入
    mouseleave 鼠标离开
    change 内容改变
    select 选中
    submit 提交
    keydown 有键按下
    keypress 有键按下
    keyup 有键弹起
    error 有错误

    判断是否显示

    if($("#id").is(":visible"))
    
    {
    }
    
    else
    
    {
    
    }

    简化绑定事件

    $(this).mouseover(function(){
    
    //代码
    
    })

    Hover事件

    hover(enter,leave)
    
     
    
    光标移入,触发第一个事件,光标移走,触发第二个事件
    
     
    
    $("#id").hover(function(){
    
    //光标移入
    
    },function(){
    
    //光标移出
    
    })

    toggle事件

    $("#id").toggle(function(){
    
    //第一次点击
    
    },function(){
    
    //第二次点击
    
    })
    
     
    
    $(this).toggle();  //表示显示隐藏之间的切换
    
    $(this).slideToggle();  //切换显示
    
    $(this).fadeTo(1000,0.5); //1000ms淡化到0.5透明度

    阻止默认事件的发生event.preventDefault()

    获取事件针对的对象event.target

    获取光标所在页面的位置event.pageX()/event.pageY()

    获取鼠标按键类型event.which()       1左键2中键3右键

    移除所有的绑定事件

    $("#id").unbind("click")
    
    //
    
    $("#id").unbind();

    移除指定的事件

    $("#id").unbind("click",funName);

    模拟触发事件

    $("#id").trigger("click");
    
    //
    
    $("#id").click();

    元素的显示隐藏

    $("#id").show();
    
    $("#id").hide();

    $("#id").show("slow"); //600ms 

    $("#id").show("normal"); //400ms

    $("#id").show("fast"); //200ms

    $("#id").hide("slow"); //600ms 

    $("#id").hide("normal"); //400ms

    $("#id").hide("fast");//200ms

    $("#id").show(1000);//1000ms 

    元素的淡入淡出

    $("#id").fadeIn();
    
    $("#id").fadeOut();

    元素延展出现或隐藏

    $("#id").slideDown(); //显示
    
    $("#id").slideUp(); //隐藏

    自定义动画

    animate(param,speed, callback);
    
    $(this).animate({"left":"500px"},3000);  //三秒内,位置改变到指定地方
    
    $(this).animate({"left":"+=500px"},3000);  //三秒内,位置改变500px
    
    $(this).animate({"left":"-=500px"},3000);  //三秒内,位置改变500px
  • 相关阅读:
    selenium 操作过程中,元素标红高亮的两种实现方式
    python pytest测试框架介绍五---日志实时输出
    pytest 3.9在python 2.7下的一个bug
    Qt assis tant 帮助集合文档 -由.qhcp生成.qhc
    Qt assistant .qch显示乱码问题
    qhelpgenerator 由qhp生成qch过程碰到的问题 记录
    Qt creator新建widget项目....no valid kits found.....
    Qt creator 账号
    Qt 写Excel
    Qt获取主窗口
  • 原文地址:https://www.cnblogs.com/hb88/p/12006367.html
Copyright © 2011-2022 走看看