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

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

WBOY
リリース: 2016-05-16 16:16:34
オリジナル
1124 人が閲覧しました

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 マウス マーク イベントに新しい承認を持っているかどうかを確認し、小さなパートナーが喜べるようにすることを望みます。

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