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

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

韦小宝
リリース: 2017-11-30 09:10:03
オリジナル
1548 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート