jQuery中的事件和動畫

標籤：

 1、事件綁定——bind(type,[params],fn)

type:事件類型，包括blur,focus,load,resize,scroll,unload,click,dbclick,mousedouwn,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error,

params:選擇性參數，作為event.data屬性值傳遞給事件對象的額外資料對象

fn:綁定的處理函數

*jQuery中的時間綁定類型比普通的javascript少了on,如onclick()——click()

<div id="panel"><h5 class="head">jQuery的事件綁定</h5><div class="content">It‘s a ......</div></div>

//當Dom載入完畢，找到標題所在的元素，綁定click事件，找到內容元素，將內容元素顯示

$(function(){$("#panel").bind("click",function(){$(this).next().show();})});

與ready()方法一樣，bind()方法也可以多次調用，this引用的是相應行為的Dom元素，為了使Dom 元素能夠使用jQuery中的方法，可以使用$(this)將其轉換為jQuery對象

//承上，顯示內容後，再點擊標題後，內容被隱藏

//當Dom載入完畢，找到標題所在的元素，綁定click事件，找到內容元素，如果內容元素是顯示的，則隱藏，如果內容是隱藏的，則顯示

$(function(){

$("#panel h5.head").bind("click",

function(){

if($(this).next().is(":visible")){

$(this).next().hide();}

else{$(this).next().show();

}});

});

//$(this).next()被多次使用，因此可以為它定義一個局部變數

var $content=$(this).next();

$(function(){

$("#panel h5.head").bind(function(){

var $content=$(this).next();

if($content.is(":visible"))

{

$content.hide();

}

else

{

$content.show();

}

});

});

//當發現相同的選取器在代碼中出現多次，用變數把它緩衝起來，更多的jQuery效能最佳化後面的章節會再提到

2、改變綁定事件的類型

上面的例子中，給元素繫結的事件類型是click,當使用者單擊的時候會觸發綁定的事件，然後執行時間的函數代碼，現在把事件類型換成mouseover和mouseout,即當滑鼠滑過的時候就觸發事件

//等待Dom載入完畢，找到標題所在的元素，綁定mouseover事件，找到內容元素，顯示內容，找到標題所在的元素，綁定mouseout事件，找到內容元素後，隱藏內容

$(function(){

var $content=$(this).next();

$("#panel h5.head").bind("mouseover",function(){

$content.show();

}).bind("mouseover",function(){

$content.hide();

});

});

像click,mouseover,mouseout這類事件，在程式中經常會使用到，jQuery為此也提供了簡寫方法，簡寫方法和bind()方法類似，實現的效果也相同，唯一的區別就是能夠減少代碼量

$(function(){

$("#panel h5.head").mouseover(function(){$content.show()}).mouseout(function($content.hide()));

});

3、合成事件

jQuery有兩個合成事件——hover()和toggle(),類似前面的ready()，hover()，toggle()方法都屬於jQuery自訂方法

hover：用於類比滑鼠游標懸停事件，當游標移動到元素上時，會觸發指定的第一個函數——enter,當滑鼠移出這個元素時，會觸發指定的第二個函數——leave

$(function(){

$("#panel h5.head").hover(function(){

$content.show();

}).function(){

$content.hide();

}

});

==>代碼運行效果與下面代碼運行效果是一樣的

$(function(){

$("#panel h5.head").mouseover(function(){

$content.show();

}).mouseout(function(){

$(this).next().hide();

});

});

attention:css中有偽類選擇符，例如“：hover”,當使用者游標懸停在元素上時，會改變元素的外觀，在大多數符合規範的瀏覽器中，偽類選擇符可以用於任何元素，然而在IE6中瀏覽器中，偽類選擇付僅可用於超連結元素，對於其他元素，可以使用jQuery中的hover(),hover()準確來說是的提到了bind("mouseenter") and bind("mouseleave"),而不是替代bind(mouseover) and bind("mouseout"),因此當需要觸發hover()的第二個函數時，需要用trigger("mouseleave"),而不是trigger("mouseout")

 4、toggle(fnN):toggle()用來類比滑鼠連續單擊事件，第一次單擊元素時，觸發指定的第一個函數，當在此點擊同一個元素時，則觸發第二個函數，如果有更多的函數，則依次觸發，知道最後一$("#panel h5.head").toggle(

function(){$content.show();},

function(){$content.hide();});

toggle()在jQuery中還有另外一個作用：切換元素的可見狀態，如果元素是可見的，單擊切換後則為隱藏，如果元素是隱藏的，單擊切換後則為可見的，則上面的代碼可寫成如下jQuery代碼：

$(function(){

$("#panel h5.head").toggle(function(){

$content.toggle();

$(this).addClass("highlight");

}),function(){

$(this).removeClass("highlight");

$content.toggle();

}

});

 

jQuery中的事件和動畫