jQuery 学習の概要 jQuery events_jquery

まず、以前の知識を深めるために役立つ例を見てみましょう。そのうちのいくつかは以前に登場したものです。

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

c2927140466346f8989b95bca6593c33
f0bc763be618e8f3bd3f87048e918b4c

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

[画像を非表示] をクリックすると、Google ロゴ画像が 1 秒以内に非表示になります。ここでは、当然、時間を指定する必要はありません。画像を表示したい場合は、show() メソッドを使用するのが良いでしょう。

それでは、この記事のメインコンテンツであるイベントから始めましょう。上記の多くの場所でイベントが使用されていることに気づいたかもしれません。このうち document.ready は、ドキュメントの準備ができたときに、マウスの移動、クリック、テキスト ボックスのフォーカスの離脱などのイベントを実行できることを jQuery に伝えます。

過去には、次のようなことがよくありました。

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

49ef2eb9a60450e3e890fc4bf7ebff1f北京16b28748ea4df4d9c2150843fecfba68

この書き方。これからは皆さんこの書き方をやめるべきです。 js コードと html の分離を実現することで、ページがよりクリーンで効率的になります。現在の書き込みメソッドは次のようになります:

jQuery("#divRent").click(function() {
  alert("租房贵");
});

これは要約なので、最初の 3 つの記事と同様に、サンプルを使用してできるだけ多くのイベント メソッドを記録し、必要なときに誰もが参照できるようにします。

以下は私が研究中に遭遇したものです:

1. one() イベント、1 回実行されるイベントをバインドします

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

220dad31e9953ce1caefcfa84705a250人々は北京にいます16b28748ea4df4d9c2150843fecfba68

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

jQuery("#divRent").one("click", function() {
alert("レンタルは高い");
});

上記はクリック イベントにバインドされており、2 回目のクリック時にプロンプ​​トは表示されません。

2. focus() および Blur() イベント

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

d98f0c487087b05cd3d419ae72cd7696

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

jQuery("#tTest").focus(function() {
jQuery(this).css("背景", "黄色"); }).blur(function() {
jQuery(this).css("背景", "白"); });

この例ではチェーンライティング手法を使用していますが、理解するのは難しくないと思います。 jQuery の CSS スタイルの操作に慣れていない場合は、2 番目の概要を読むことができます。この例では、テキスト ボックスにフォーカスがあると背景色が黄色に変わり、フォーカスが離れると背景色が白に戻ります。これの目的は、ユーザーエクスペリエンスを向上させることだと個人的に感じています。

3. keydown() および keyup() イベント

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

4b2764a3c367b627d6153bdf397b9c24 98f415770703c711e9c2bd3c6f6867da8c1ecd4bb896b2264e0711597d40766c

コードをコピーします コードは次のとおりです: jQuery("#tTest").keyup(function() {

jQuery("#lResult").html(jQuery(this).val()); });

キーがポップアップすると(表現が難しい気がします^_^)、テキストボックスの内容がラベルに表示されます。操作要素の属性に関する部分については、3 番目の概要を参照してください。

4. submit() イベント

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

21450525e974e9be578136fc32da3f7c
a9aafc0e48dc1e40a299f1198237c1bc 884976a3506233d77845d3dbf1537c84 1f6ca7726b91dbaad511ad08bdd0d042 f5a47148e367a6035fd7a2faa965022e

コードをコピーします コードは次のとおりです: jQuery("#form1").submit(function() {

If (jQuery.trim(jQuery("#text").val()).length == 0) {

false を返します
}
});



ご覧のとおり、この例ではサーバー コントロールを使用しています。これは本質的に同じことであり、最終的にはフォームの送信が行われます。ボタンをクリックするとフォームが送信されます。テキスト ボックスの内容が空の場合は false を返し、それ以外の場合は送信します。このようなアプリケーションは、Web 開発のいたるところで見られます。

5. hover() イベント

コードをコピーします コードは次のとおりです: 7f0eda05e93e41d7a8baaa89a79f95f9カーソルを合わせてください16b28748ea4df4d9c2150843fecfba68

コードをコピーします コードは次のとおりです: jQuery("#divHover").hover(function() {

jQuery(this).css("背景", "黄色"); }、関数() {

jQuery(this).css("背景", "赤"); });



マウスを div 上に移動すると、div の背景色が黄色に変わり、マウスを外に移動すると、背景色が赤色に変わります。

上記のイベントは比較的一般的で、よく使用されます。もちろん、この記事はほんの一部を要約したものにすぎません。学習中に問題が発生した場合は、jQuery ドキュメントを参照してください。