JQuery中的事件与动画

Posted 2020-10-31 FANKEXIN

 

1.鼠标事件

方法　　　　　　 描述 　　　　　　　　　　　　　　　　　　　　　　执行时机

click( ) 　　　　 　 触发或将函数绑定到指定元素的click事件 　　　  　 单击鼠标时
mouseover( ) 　　 触发或将函数绑定到指定元素的mouseover事件　　 鼠标指针移过时
mouseout( ) 　　   触发或将函数绑定到指定元素的mouseout事件　　   鼠标指针移出时
mouseenter( ) 　   触发或将函数绑定到指定元素的mouseenter事件        鼠标指针进入时
mouseleave() 　　触或将函数绑定到指定元素的mouseleave事件           鼠标指针离开时

2.键盘事件

方法　　　　　　执行时机　　　　　　　　　　　　　　　　　　描述

keydown( )　　 触发或将函数绑定到指定元素的keydown事件　　  按下键盘时

keyup( )　　　  触发或将函数绑定到指定元素的keyup事件　　　　释放按键时

keypress( )　　触发或将函数绑定到指定元素的keypress事件　　产生可打印的字符时

----------------浏览器事件
resize() 调整大小

-----------------------
3.事件绑定
绑定多个事件：

$(dom).bind({
mouseover:function(){
},
mouseout:function(){
}
});

　　

//卸载部分事件:
unbind("A B C")

on

当unbind()不带参数时，表示移除所绑定的全部事件

 

3.复合事件

hover( )方法

//第一个topDown指光标移入时触发，第二个topDown指光标移出时触发

$(".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");}
    )

　　

toggle( )和toggleClass( )总结
toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

 

事件：触发的XXX
事件：通过某个操作触发某个事情，并执行的效果
事件：通过某个操作来执行这个事件，来返回某个结果
事件：触发事件的对象，和处理事件的方法相关联。

 

4.自定义动画
$("[type=button]").bind("click", function() {
//队列：
$("div")
.animate({"font-size":"50px"},2000,function(){alert(‘aa‘);})
.animate({"width":"200px"},{ queue: false, duration: 2000 });
});
queue：是否加入队列，默认取值为true，加入队列。等待第一个动画完成后再完成第二个动画

animate({css样式},{Duration=3000,queue:false});

5.show() 和hide()

show() 控制元素的显示，hide( )控制元素的隐藏

6.slideDown() 和slideUp()

slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏

$(document).ready(function() {
       $("h2").click(function(){
	   $(".txt").slideUp("slow");
	   $(".txt").slideDown("slow");
       });
 });

　　

7.fadeIn() 和fadeOut()

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果