jQuery入门

jQuery中的事件与动画

2018-05-29  本文已影响8人  琴匣自鸣

一、基础事件(1)鼠标事件(2)键盘事件(3)window事件(4)表单事件  
       复合事件(1)鼠标光标悬停(2)鼠标连续点击

二、鼠标事件
    1.click() 点击鼠标时执行
    2.mouseover() 鼠标指针移入时执行,注意无论是被选中元素,还是其子元素被移入都会触发事件。
    3.mouseout() 鼠标指针移出时执行,注意无论是被选中元素,还是其子元素上鼠标移出都会触发事件。
    4.mouseenter() 鼠标指针移入时执行,只有移动至被选中元素才能执行,子元素无效
    5.mouseleave() 鼠标指针移出时执行,只有移动出被选元素才执行,子元素无效。

三、键盘事件
    1.keydown(), 按下键盘时执行,例$("input").keydown(function(event){}),event.key可以获取按下的键值,event.keyCode可以获取键码
    2.keyup(),释放按键时执行,例:$("input").keyup(function(event)
    3. keypress,产生可打印的字符时执行, $("iinput").keypress(function(event){})
注意event都是可选参数,根据需要判断是否加上 

四、浏览器事件
    1.resize() 调整窗口大小时执行,例: $(window).resize()

五、绑定事件
    bind(type,[data],fn);
         type:事件类型例如 click、mouseover、mouseout、
        [data]:可选函数
        fn: 处理函数
    绑定单个事件:$(".on").bind("mouseover",function(){ $(".ss").show() })
    绑定多个事件: $(".on").bind({ mouseover:function(){},mouseout:function(){} })

六、移除事件
unbind(type,fn) 注意当unbind() 不带参数时默认移除所有绑定事件,注意只能解除行外事件
例:unbind() 解除所有事件 unbind("click") 解除点击事件

七、复合事件
hover: 相当于mouseover 和 mouseout的组合体
$(".top-m .on").hover(function(){
        $(".topDown").show();  //光标移入触发
         },
         function(){$(".topDown").hide();//光标移出触发
         }
);
第一个事件为光标移入触发,第二个光标移出触发

toggle鼠标连续点击事件:$("input").toggle(

            function(){$("body").css("background","#ff0000");},

            function(){$("body").css("background","#00ff00");},

            function(){$("body").css("background","#0000ff");}
    )

八、jQuery动画效果  
1.show([speed],[callback]) hide([speed],[callback])
speed:表示速度,值:毫秒、slow,normal、fast 这几个也是指速度
2. fadeIn([speed],[callback]) fadeOut([speed],[callback]),通过改变元素透明度实现淡入淡出
2.slideDown([speed],[callback]) 使元素逐步延伸显示出来
slideUp([speed],[callback]) 使元素逐步缩短至隐藏
2.animate({params},speed,callback)
params 指的是实现的效果例如 animate({wdith:"200px"}) 使宽度变为200px的动画效果 

上一篇下一篇

猜你喜欢

热点阅读