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、