jQuery はクリックとマウスの感知イベントを実装します

jQueryは、クリックとマウスのセンシングイベントを実現します。jQueryのイベントに慣れていない学生や、jQueryのクリックとマウスのセンシングイベントについてあまり知らない学生は、それを保存して取得することができます。見て！

1. クリック イベントの動的代替を実装する

クリック イベントについては、jQuery で動的代替 toggle() メソッドも提供されます。両方のパラメータはリスニング関数です。クリック イベントでは同じ意味で使用されます。

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

<script type="text/javascript">
            $(function() {
                $("#ddd").toggle(
                    function(oEvent) {
                        $(oEvent.target).css("opacity", "0.5");
                    },
                    function(oEvent) {
                        $(oEvent.target).css("opacity", "1.0");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>

2. マウスセンシング

を実装するには、CSSで:hover疑似クラスを使用して、スタイルの改訂と個別のCSSスタイルを実装できます。 jQueryの導入後、ほとんどすべての要素でhover()が使用できるようになりました。 ) マウスを感知します。さらに複雑なエフェクトを作成することもできます。その本質は、mouseover イベントと Mouseout イベントを結合したものです。hover(over,out) メソッドは、両方とも関数である 2 つのパラメーターを受け入れます。 1 つ目はマウスが要素上に移動するとトリガーされ、2 つ目はマウスが要素の外に移動するとトリガーされます。

<script type="text/javascript">
            $(function() {
                $("#ddd").hover(
                    function(oEvent) {
                        //第一个函数相当于mouseover事件监听
                        $(oEvent.target).css("opacity", "0.5");
                    },
                    function(oEvent) {
                        //第二个函数相当于mouseover事件监听
                        $(oEvent.target).css("opacity", "1.0");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>

最初の例と比較すると、toggle() が hover() に置き換えられているだけです。

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

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

<script type="text/javascript">
            $(function() {
                $("#ddd").click(function(){
                $("#eee").toggle();    
                });
            });
        </script>
        <div id="ddd">11</div>
        <div id="eee">122</div>

2 .css 属性

<script type="text/javascript">
            $(function(){
                $("#eee").toggle(function() {
                        $("#ddd").css("background-color", "green");
                    },
                    function() {
                        $("#ddd").css("background-color", "red");
                    },
                    function() {
                        $("#ddd").css("background-color", "yellow");
                    }
                );
            });
        </script>
        <div id="ddd">11</div>
        <div id="eee">122</div>

この記事はまずここで終わります。学生は jQuery マウス イベントについて新たに理解しましたか?

関連する推奨事項:

子要素がある場合

jQueryイベントのhover、mouseenter、mouseleaveはアニメーションを一度だけトリガーします

jQueryイベントのmouseover、mouseout、およびhoverの違い

以上がjQuery はクリックとマウスの感知イベントを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。