ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery の使用法を切り替えます。
JQuery の使用法を切り替えます。
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 18:41:281746ブラウズ
今回は主にイベントの回転操作を切り替えるために使用されるtoggle(fn, fn,….)関数に焦点を当てます。
例: ボタン クリック イベントと DIV 背景の場合、ボタンを 1 回クリックすると、DIV 背景が青で表示され、2 回目にクリックすると、DIV の
背景色が黒に変更されます。
定義した HTML コードは次のとおりです。
=" DivToggle">ID "DivToggle" の内容がここに表示されます
定義された初期スタイルは次のとおりです:
コードをコピーします コードは次のとおりです。
#DivToggle {
高さ: 150px
幅: 200px; margin: 50px;
background-color: #6CC;
最初に toggle() 関数を理解します。主に要素の表示状態を切り替えるために使用されます。要素が表示されている場合、.toggle() を呼び出した後は非表示になります。
高さ: 150px
幅: 200px; margin: 50px;
background-color: #6CC;
最初に toggle() 関数を理解します。主に要素の表示状態を切り替えるために使用されます。要素が表示されている場合、.toggle() を呼び出した後は非表示になります。
JQuery コード:
ここでは要素の表示と非表示を手動で設定できます。要素。
$("#DivToggle").toggle(600);
もちろん、この時点では、Web ページでよく遭遇することを考えることができます。表示し、マウスを離すとエフェクトが非表示になります。
もちろん、ここでは hover(fnover,fnout) イベントが使用されます。 fnover と fnout を上記の toggle(600) に設定するだけです;
ここでの fnover はマウスが上に移動したときのイベント関数であり、fnout はマウスが遠ざかったときのイベント関数です。
読みやすくするために、呼び出す別の関数として toggle(600) を設定しました。
コードをコピー
コードをコピーします
コードは次のとおりです:
< スクリプトタイプ="text/javascript"> $( function(event) { $("#DivToggle") .toggle(600); } $("#DivToggle").toggle(function() {
$(this).click(function() { $(this).css("background ", "青"); } ); }, function(event) {
$(this).click(function() { $(this).css("background", "Green"); });
}) ;
}
);
この時点で、上記の効果を実現するには、イベントをボタン、つまり「btnShow」に直接ロードする必要があることに突然思いつきました。これは、まず表示を非表示にしてから、DIV のスタイルを変更することを意味します。詳細なコードは次のとおりです。
< script type="text /javascript">
$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600) ;
}
$("#btnShow").toggle(
OverOut, OverOut,
function() { $("#DivToggle").css({ "背景": "緑" }) },
function() { $("#DivToggle").css({ "背景": "青" }) }
}
);
これにより、最初に非表示にしてから表示し、次にスタイルを変更することができます。
$(this).click(function() { $(this).css("background", "Green"); });
}) ;
}
);
この時点で、上記の効果を実現するには、イベントをボタン、つまり「btnShow」に直接ロードする必要があることに突然思いつきました。これは、まず表示を非表示にしてから、DIV のスタイルを変更することを意味します。詳細なコードは次のとおりです。
コードをコピー コードは次のとおりです。
< script type="text /javascript">
$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600) ;
}
$("#btnShow").toggle(
OverOut, OverOut,
function() { $("#DivToggle").css({ "背景": "緑" }) },
function() { $("#DivToggle").css({ "背景": "青" }) }
}
);
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。