jQuery 学習の概要 jQuery events_jquery

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

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

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

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

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

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

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

北京

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

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

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

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

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

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

人々は北京にいます

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

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

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

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

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

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

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

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

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

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

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

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

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

4. submit() イベント

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

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

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

false を返します
}
});



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

5. hover() イベント

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

カーソルを合わせてください

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

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

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



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

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