ホームページ > 記事 > ウェブフロントエンド > jQuery はクリックとマウスの感知イベントを実装します

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

韦小宝オリジナル: 2017-11-30 09:10:031515ブラウズ

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 はクリックとマウスの感知イベントを実装します

関連記事