jQuery はクリックとマウスの感知を実装します events_jquery

1. クリックイベントの動的な切り替えを実装します

クリック イベントの場合、jQuery は動的に交互する toggle() メソッドも提供しており、どちらのパラメーターもクリック イベントで交互に使用されます。

例: クリック イベントの動的な相互作用。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(function() {
$("#ddd").toggle(
function(oEvent) {
$(oEvent.target).css("不透明度", "0.5");
},
function(oEvent) {
$(oEvent.target).css("opacity", "1.0");
}
);
});
                                                                                                                                                                                                                                                                                                               

2. マウスセンシングを実装する

CSS では、:hover 疑似クラスを使用してスタイルを変更し、別の CSS スタイルを実装できます。jQuery の導入後、ほぼすべての要素で hover() を使用してマウスを検出できます。さらに複雑なエフェクトを作成することもできます。その本質は、マウスオーバー イベントとマウスアウト イベントの統合です

hover(over,out) メソッドは 2 つのパラメーターを受け取り、どちらも関数です。 1 つ目はマウスが要素上に移動するとトリガーされ、2 つ目はマウスが要素の外に移動するとトリガーされます。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">

$(function() {
$("#ddd").hover(
function(oEvent) {
//最初の関数はマウスオーバーイベント監視と同等です
$(oEvent.target).css("不透明度", "0.5");
},
function(oEvent) {
//2 番目の関数はマウスオーバー イベント監視と同等です
$(oEvent.target).css("opacity", "1.0");
}
);
});
                                                                                                                                                                                                                                                                                                               


最初の例と比較すると、toggle() を hover() に置き換えるだけです。

wenzi0_0 の指導の下、toggle() に関する小さな例をいくつか書きます

1. 従来のアプリケーション

コードをコピー

コードは次のとおりです:

<スクリプトタイプ="text/javascript">
            $(function() {
                $("#ddd").click(function(){
                $("#eee").toggle();   
                });
            });
       
       

11

       

122

2.css プロパティ

复制代 代码如下:

<スクリプトタイプ="text/javascript">
            $(関数(){
                $("#eee").toggle(function() {
                        $("#ddd").css("背景色", "緑");
                    }、
                    function() {
                        $("#ddd").css("背景色", "赤");
                    }、
                    function() {
                        $("#ddd").css("背景色", "黄色");
                    }
                );
            });
       
       

11

       

122

ここでは、小さなパートナーが jQuery マウス マーク イベントに新しい承認を持っているかどうかを確認し、小さなパートナーが喜べるようにすることを望みます。