jQuery の対話型ヘルプ メソッド
1. hover(over, out)
hover 関數(shù)は、主に元の JavaScript のマウスオーバー関數(shù)とマウスアウト関數(shù)の問題を解決します。次の例を見てください:
2 つの div (赤い領(lǐng)域) があります。內(nèi)部にネストされた div (黃色の領(lǐng)域) があります。 HTML コードは次のとおりです:
<div class="outer" id="outer1"> Outer 1 <div class="inner" id="inner1">Inner 1</div> </div> <div class="outer" id="outer2"> Outer 2 <div class="inner" id="inner2">Inner 2</div> </div> <div id="console"> </div>
次のイベントをバインドします:
<script type="text/javascript">
function report(event) {
$('#console').append('<div>'+event.type+'</div>');
}
$(function(){
$('#outer1')
.bind('mouseover',report)
.bind('mouseout',report);
$('#outer2').hover(report,report);
});
</script>
Outer1 マウスが Outer1 の赤い領(lǐng)域から移動(dòng)するときに使用します。黃色の領(lǐng)域に移動(dòng)すると、これらはすべてOuter1內(nèi)で移動(dòng)しているにもかかわらず、mouseoutイベントがトリガーされていることがわかります:
多くの場合、上記の結(jié)果は望ましくありませんが、イベントが単にトリガーされないことを願(yuàn)っています。マウスがアウター 1 內(nèi)に移動(dòng)すると、アウター 2 は Hover() 関數(shù)を使用してこの効果を?qū)g現(xiàn)します。
ここでのイベント名は、「mouseover」を使用するのではなく、入るときは「mouseenter」、出るときは「mouseleave」と呼ばれることに注意してください。 " および "mouseleave" イベント。
経験豊富な開発者は、ポップアップ メニューを作成するときによく遭遇するこの問題をすぐに思いつくでしょう。mouseout イベントは、ポップアップ メニューが自動(dòng)的に閉じるように設(shè)定されていますが、マウスがその範(fàn)囲內(nèi)で移動(dòng)すると、ポップアップ メニューが自動(dòng)的に閉じるように設(shè)定されています。ポップアップ メニューでは、メニューを閉じるためにマウスアウト イベントが頻繁にトリガーされます。この問題に対する優(yōu)れた解決策は、hover() 関數(shù)です。
2. .. )
トグル関數(shù)は、クリック イベント バインディング関數(shù)をオブジェクトに追加できますが、呼び出し関數(shù)をクリックするたびに順番に設(shè)定します。
一致する要素をクリックすると、指定された最初の関數(shù)がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関數(shù)がトリガーされ、さらに関數(shù)がある場合は、最後の関數(shù)まで再度トリガーされます。後続のクリックごとに、これらの関數(shù)の呼び出しが順番に繰り返されます。
unbind("click") を使用して削除できます。
次の例は、トグル関數(shù)の使用方法を示しています:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<title>toggle example</title>
<link rel="stylesheet" type="text/css" href="css/hover.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$("li").toggle( function()
{
$(this).css({ "list-style-type": "disc", "color": "blue" });
}, function()
{
$(this).css({ "list-style-type": "square", "color": "red" });
}, function()
{
$(this).css({ "list-style-type": "none", "color": "" });
}
);
}) </script></head><body>
<ul>
<li style="cursor:pointer">click me</li>
</ul>
</body>
</html>
その結(jié)果、「click me」をクリックするたびにリストのシンボルとテキストの色が変わります。
