jQuery常會用到的切換事件和懸停事件
阿新 • • 發佈：2019-01-30
切換事件
jQuery定義了兩個事件的切換方法：hover()和toggle()。事件切換在Web開發中經常會用到，如樣式互動、行為互動等。
jQuery定義了一個toggleClass()方法，他能夠顯示/隱藏指定的樣式類，實現樣式的動態切換，而hover()和toggle()方法能夠實現行為互動，toggle()方法用於繫結兩個或多個事件處理器函式，以相應被選元素的輪流的click事件。
從jQuery 1.9版本開始，jQuery 刪除了toggle(function, function, ..)用法，僅作為元素顯隱切換的互動事件。如果元素是可見的，切換為隱藏的;如果元素是隱藏的，切換為可見的。toggle([speed], [easing], [fn])預設是0毫秒，可選值如"slow”、引數speed為可選引數，表示隱藏/顯示效果的速度，可用引數"normal"、"fast"。 引數easing也是可選引數，用來指定切換效果，預設是"swing大"linear"。引數fn也是可選引數，定義在動面完成時執行的函式，每個元素執行一次。
在下面程式碼中，使用按鈕動態控制列表框的顯示或隱藏。
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="jquery/jquery-3.1.1.js" type="text/javascript"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("ul#list").toggle("slow"); }); }) </script> <style type="text/css"> </style> </head> <body> <button>控制按鈕</button> <ul id="list"> <li>空山新雨後，天氣晚來秋。</li> <li>明月鬆間照，清泉石上流。</li> <li>竹喧歸浣女，蓮動下漁舟。</li> <li>隨意春芳歇，王孫自可留。</li> </ul> </body> </html>
也可以直接為toggle()方法傳遞true或false引數，用於確定顯示或隱藏元素。如下面的程式碼，當單機阿牛時，將段落文字隱藏，而不是切換效果。
$(function(){
$("button").click(function(){
$("ul#list").toggle(false);
});
})懸停事件
hover()方法可以模仿懸停事件，其用法也非常的簡單，它包含兩個引數，第一個引數表示滑鼠移動到元素上時所觸發的函式，第二個引數表示滑鼠指標移除元素後要觸發的函式。
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="jquery/jquery-3.1.1.js" type="text/javascript"></script> <script type="text/javascript" > $(function(){ $("input").hover( function(){ this.text("滑鼠經過"); }, function(){ this.text("滑鼠已移出"); }) }) </script> </head> <body> <div style="width:100px;height:100px;border:1px solid red;"></div> </body> </html>