ホームページ  >  記事  >  ウェブフロントエンド  >  JQuery_jqueryのイベントとアニメーションの使用例

JQuery_jqueryのイベントとアニメーションの使用例

WBOY
WBOYオリジナル
2016-05-16 16:17:581170ブラウズ

この記事の例では、JQuery でのイベントとアニメーションの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1.バインドイベント

コードをコピー コードは次のとおりです:

<スクリプト>
$(関数() {
$("#divid h5.head").bind("click", function () { //イベントをバインドします。これには 3 つのパラメーターが含まれます。1 つ目はイベント、2 つ目はイベントです
alert($(this).text());
});
$("#divid h5.content").css("display", "none"); //css メソッドはラベル スタイルを動的に設定します
});
$(関数() {
$("#btnid").bind("クリック", function () {
if (bool == true) {
$("#btnid .content").css("表示", "なし");
bool = false;
$(this).val("表示");
}
他 {
$("#btnid .content").css("表示", "");
bool = true;
$(this).val("hidden");
}
});
});
$(関数() {
$("input[type=button]").bind("click", function () { //コンテンツの表示と非表示
var content = $("#divid .content");
if (content.is(":visible")) {
content.hide();
$(this).val("表示");
}
他 {
content.show();
$(this).val("hidden");
}
});
});



ロッキー?

傘を持ってくる必要はありません。濡れた心が乾くまでどれくらいかかるかを見てみましょう




上記の操作では、バインド イベントを新たに学習しました。バインド イベントには 3 つのパラメーターがあります。最初のパラメーターは、click、dbclick、mouseover などのイベントの名前です。2 番目のパラメーターは、データです。オブジェクトに渡される、3 番目のパラメータはバインドされたイベント関数を処理するために使用されるメソッドです。また、ここではアニメーションでの例、つまり表示または非表示も記述されています。 show() と Hide() を学習する前に、通常は bool 型変数を定義するだけですが、表示/非表示の処理ボタンを作成する場合は上記のようになります。これはまだ非常に煩わしいので、show() と Hide() を学習すると、はるかに簡単になります。つまり、直接非表示にしたり表示したりできるようになります。明らかに、コード処理は単純です。

2.イベントとイベントバブリングを切り替えます

コードをコピー コードは次のとおりです:
<script><br> $(関数() {<br> $("input[type=button]").toggle(function () { //toggle の両方のパラメータはイベントであり、順番に呼び出されます<br> $(this).css("backgroundColor","re​​d");<br> }、関数() {<br> $(this).css("backgroundColor", " yellow");<br> });<br> });<br> $(関数() {<br> $("div").each(function () {<br> $(this).bind("mouseup", function (e) {<br> alert(e.pageX); //マウスのx方向の位置を出力します<br> alert(e.pageY); //マウスのy方向の位置を出力します<br> alert(e.that); //マウスボタンの選択を出力します。1はマウスの左ボタン、2はマウスのローラーボタン、3はマウスの右ボタンです<br> });<br> });<br> });<br> $(関数() {<br> $("#txt").keydown(function () {<br> e.preventDefault(); //タグリンクを防止します<br> alert(e.keyCode); //キーボードは質問コードを取得します<br> });<br> });<br> $(関数() {<br> $("#ouerdiv").click(function () {<br> alert($(this).text());<br> });<br> $("#div").click(function () {<br> alert($(this).text());<br> });<br> $("#innerdiv").click(function () { //ここではイベントのバブリング現象を記述します。バブリングを整理するには、PreventDefault または RecentDefault<br> を使用できます。 alert($(this).text());<br> });<br> })<br> </script>


外側 div
中間 div
内側 div

百度


トグル イベント: マウス クリック イベントをシミュレートします。最初のイベントはマウスが要素上に移動するとトリガーされ、2 番目のイベントはマウスが要素から離れるとトリガーされます。 2 つのイベントは相互に切り替えることによってトリガーされます。さらに、イベント バブリングについても説明します。実際には、ページ上に複数のイベントが存在することも、複数の要素が 1 つのイベントに対応することもあります。上記のようにページに 2 つの要素があり、1 つの div 要素が別の div 要素にネストされており、両方にクリック イベントがバインドされているとします。すると、内側の div 要素をクリックすると、外側の div 要素も表示されます。ただイベントが湧き出ているだけです。ここで注意する必要があるのは、これらはすべてイベントにバインドされているということです。クリック イベントのみが内部で発生することは当然のことだと思われがちです。

3. イベントを削除し、複数のイベントを連続して追加します

コードをコピー コードは次のとおりです:
<script><br> $(関数() {<br> $("removeall").click(function () { <br> $("#btn").unbind(); //イベントを削除<br> });<br> $("#btn").bind("click", function () { //複数のイベントを連続して追加できます<br> $("#text").append("<p>私が最初に追加されたイベントです</p>")<br> })<br> .bind("クリック", function () {<br> $("#text").append("<p>私は 2 番目に追加されたイベントです</p>")<br> })<br> .bind("クリック", function () {<br> $("#text").append("<p>私は 3 番目に追加されたイベントです</p>")<br> })<br> });<br> </script>


div テキスト情報


上記で、バインド イベントはイベントを追加すること、バインド解除はイベントを削除することであることを学びました。それを比較することができます。へへ、複数のイベントを連続して追加する場合、実際にはイベントを追加してバインドを続けるときです。イベントを追加します。

4. シミュレーションイベント

私たちが調査した上記のバインド イベント、クリック イベントなどは、通常、ボタンをクリックすることによってトリガーできるイベントです。ただし、場合によっては、クリック効果を実現するためにユーザー操作をシミュレートする必要があります。たとえば、次のような場合です。ユーザーがクリックすることなく後でクリック イベントがトリガーされた場合は、trigger() メソッドを使用してシミュレーション操作を完了します。

5. その他のイベント

コードをコピー コードは次のとおりです:
<script><br> $(関数() {<br> $("#btn").click(function () {<br> //$("#div").hide(2000) //2 秒以内に非表示<br> //$("#div").show(2000); //2 秒以内に <br> を表示します //$("#div").fadeIn(2000) //要素が完全に表示されるまで要素の不透明度を上げます <br> //$("#div").fadeOut(2000) //要素が完全に消えるまで要素の不透明度を下げます<br> $("#btn").toggle(function () { <br> $("div").slideDown(2000) //要素の高さを変更して上から下に表示します<br> $(this).val("表示") <br> }、関数() {<br> $("div").slideUp(2000); //要素の高さを変更し、下から上に向かって短くして非表示にします<br> $(this).val("hidden")<br> });<br> });<br> //$("#btn").click(function () {<br> // $("div").fadeTo(600,0.2); //fadeTo メソッドは、0.6 秒以内の透明度が 0.2<br> の場合に適用されます。 //});<br> });<br> </script>

1234



アニメーション方法

6. 複数行テキストボックスの応用 - 高さ変更

コードをコピー コードは次のとおりです:

<スタイル>
input:focus,textarea:focus {
ボーダー:1px ソリッド #f00;

}

<スクリプト>
$(関数() {
var comment = $("#comment");
$(".bigger").click(function () {
if (comment.height() comment.height($("#comment").height() 100); //元の高さに基づいて高さを 100 増やします
}
});
$(".smaller").click(function () {
if (comment.height() > 100) {
comment.height($("#comment").height() - 100) //元の高さを 100 減らす
}
});
})



拡大縮小

">