02 jQuery中的事件、动画、复合函数

jquery中的事件

在javascript中，常用的基础事件有鼠标事件、键盘事件、window事件、表单事件、事件绑定和处理函数的语法格式如下

语法q

　　事件名 = "函数名()"；    或者        dom对象.事件名 = 函数；

1、载入事件

$(function () {});    //推荐使用
$(document).ready(function () {});   //推荐使用
window.onload = function () {}    

 

2、鼠标事件

click()  　　　　　　 触发将函数绑定到指定元素的click事件　　　　　　鼠标单击时

mouseover() 　　　  触发将函数绑定到指定元素的mouseover事件　　　鼠标指针移过时　　　　

mouseout() 　　　　触发将函数绑定到指定元素的mouseout事件　　　  鼠标指针移出时

mouseenter()　　　 触发将函数绑定到指定元素的mouseenter事件　　   鼠标指针进入时

mouseleave()　　    触发将函数绑定到指定元素的mouseleave事件　　  鼠标指针离开时

mouseover() 和 mouseenter()的区别：mouseover()包含子元素绑定，而mouseenter不包含子元素绑定

3、键盘事件

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

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

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

 

$(document).keydown(function (event){
     if (event.keycode == "13") {    //按enter事件
            alert("确认要提交吗？");
          }
      });

 

4、浏览器事件

此事件是当浏览器窗口大小发生变化时而触发来完成页面的一些特效

语法

$(selector).resize();

绑定事件与移除事件

在jquery中，如果需要为匹配的元素同时绑定多个事件，则可以使用bing()方法，其语法格式如下

语法

bind(type,[data],fn);

bind() 方法有三个参数，其中参数data不是必需的，如下表所示

type　　　　事件类型　　　主要包括click、mouseover、mouseout等基础事件，此外，还是可自定义事件

[data]　　　 可选参数　　　作为event.data属性值传递事件对象的额外数据对象，该参数不是必需的

fn　　　　　处理函数　　　用来绑定处理函数

 

绑定单个事件

$("#btn").bind("click", function() {
    alert('绑定单击事件');
   });

绑定多个事件

$("#btn").bind({
    "mouseover":function(){
        alert('事件一');
     },
    "mouseout":function () {
        alert('事件二');
    }
});

 

移除事件

语法

unbind([type],[fn]);

[type]　　　　事件类型　　　　主要包括click、mouseover、moseout 等基础事件外，此外，还可以是自定义事件

[fn]　　　　　处理函数　　　　用来处理绑定的处理函数

如果没有参数则是移除所有被bind()绑定的函数

 

 绑定多个事件的函数还有很多，例如常用的链式编程或on()

 

绑定事件---on()

$( "#datatable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});
或
$( "#datatable tbody" ).on( "click", function() {
  console.log( $( this ).text() );
});

其用法和bind()类似

 

绑定多个事件--链式编程

$("#btn").click(function(){
    console.log("单击");
}).mouseover(function(){
    console.log("鼠标悬浮");
});

 

 jquery中的动画

1、show()、hide()

前期学过显示和隐藏，其实shwo() 和 hide() 也是一种动画，当加入参数时效果明显

show()　　　  显示　　　　用于显示元素其原理相当于css("display","block")

hide()　　　　隐藏　　　　用于显示元素其原理相当于css("display","none")

show() 和 hide() 中的三个参数：

1、[duration]速度，默认400毫秒，也可用字符串表示("slow","normal","fast")

 

2、[easing] 一个字符串，指示要在过渡中使用哪个缓动函数

3、[complete] 回调函数，指当显示完后隐藏后执行的函数

常用的的是show() 、show([duration],[complete]) 或 hide() 、hide([duration],[complete])

/* show() */
$("#btn").click(function (){
    //第一种显示，第一个参数为数字
$("#dv").show(1000,function(){
    alert("我已经显示完成了");
       });
        //第二种显示，第一个参数为字符串
$("#dv").show("fast",function(){
    alert("我已经显示完成了");
       });
    //第三种显示，无参
    $("#dv").show();
});    

hide()用法也和show()一样

 

2、