jQuery中的事件和动画

1、jQuery事件是对JavaScript事件的封装，常用事件分类

基础事件：

• 鼠标事件
• 键盘事件
• window事件
• 表单事件

复合事件：

• 鼠标光标悬停
• 鼠标连续点击

2、常用的鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件！

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

mouseover( ) 与mouseout( )方法：

    $(".top .on").mouseover(function(){
            //鼠标移入，显示
            $(".top .on .topDown").show("slow");
        });
    $(".top .on").mouseout(function(){
            //鼠标移除，隐藏效果
            $(".top .on .topDown").hide("fast");
    });

鼠标事件方法的区别：

方法	相同点	不同点
mouseover( )	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter
mouseenter( )
mouseout( )	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时： 触发mouseout 不触发mouseleave
mouseleave( )

3、键盘事件

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

代码如下：

    $("[type=password]").keyup(function () {  //键盘释放时触发
	$("#events").append("keyup");

      }).keydown(function (e) {                //按下键盘时触发
	$("#events").append("keydown");           

      }).keypress(function () {                //输入字符时触发
	$("#events").append("keypress");
     });

$(document).keydown(function (event) {        
	 if (event.keyCode == "13") {            //keyCode==13代表按下回车
		alert("确认要提交么？");
	}
});

4、浏览器事件

$(selector).resize( );

//注释：主要是调整浏览器窗口大小

5、事件的绑定和移除

绑定：bind() , on();

移除：unbind()，off();

一般都会用on(),off()事件。在对元素操作时，可以对新增的元素有效。

代码如下：

$(document).ready(function () {
    //绑定事件 on是绑定事件，off是解绑事件
    $("#nav li").on(
        //给点击事件命名
        "click", bg = function () {
            //拿到当前的li的下标
            var index = $("#nav li").index(this);
            if (index == 0) {
                //1.让父级盒子背景发生改变
                $(".taskContent").css("background", "#26a6e3");
            } else {
                $(".taskContent").css("background", "#ff9400");
            }
        }
    ).on(      //有多个绑定事件，在后面直接链接.on
        "click", content = function () {
            var index = $("#nav li").index(this);
            //2.让对应的ul显示，其他的ul隐藏
            //先让所有的ul隐藏，再让对应（index下标）的ul显示
            $(".taskContent ul").hide();
            $(".taskContent ul:eq(" + index + ")").show();
        }
    );
    //点击事件
    $("#del").click(function () {
        //解除指定绑定的事件
        $("#nav li").off("click",content);
        //解除所有的绑定事件
        // $("#nav li").off();
    });


});

6、复合事件

• hover( )方法
• toggle( )方法

hover()方法：相当于mouseover事件和mouseout事件的结合。

 代码如下：

$(".top-m .on").hover(

    //移入时触发
    function(){
	    $(".topDown").show();
    },
    //移除时触发
    function(){
	     $(".topDown").hide();
    }
);

toggle()方法：相当于鼠标连续点击事件

语法：

toggle(fn1,fn2,...,fnN);

//里面可以放入多个函数

toggle()方法不带参数，与show( )和hide( )方法作用一样,第一次点击显示，第二次点击隐藏

$("input").click(function(){
    $("p").toggle();}
)

//注释：连续点击input标签，显示和隐藏p标签

toggleClass()方法：可以对样式进行操作。

$("input").click(function(){
    $("p").toggleClass("red");
});

//注释：当点击input标签的时候，将p标签的样式修改

toggle( )和toggleClass( ）的总结：

toggle( fn1,fn2...) 实现单击事件的切换，无须额外绑定click事件

toggle( )实现事件触发对象在显示和隐藏状态之间切换

toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

7、jQuery动画

在jQuery里面有很多的动画效果：

• 控制元素显示与隐藏
• 改变元素的透明度
• 改变元素高度
• 自定义动画

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

代码如下：

//显示：speed是时间，callback是show函数执行完后要执行的函数，这两个参数都是可选的
$(selector).show([speed],[callback])；

//隐藏
$(selector).hide([speed],[callback])；

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

代码如下：

//fadeIn()淡入：speed是设置时间，callback是执行完fadeIn要执行的函数
$(selector).fadeIn([speed],[callback])；

//fadeOut()淡出：speed是设置时间，callback是执行完fadeIn要执行的函数
$(selector).fadeOut([speed],[callback])；


//注意：speed和callback这两个参数都是可选的

slideDown() 可以使元素下拉显示 ，slideUp()则使元素上升直至隐藏

//slideDown()延伸显示，里面的参数可选，speed是时间，callback是执行完slideDown再执行
$(selector).slideDown ([speed],[callback]);

//slideUp()上升隐藏，里面的参数可选，speed是时间，callback是执行完slideDown再执行
$(selector).slideUp ([speed],[callback]);

自定义动画

$(selector). animate({params},speed,callback)；

//{params}是定义形成动画的属性，必须要写上，speed是时间，callback是执行完animate再执行，后两个是可选