jqueryでフォーカスを失ってスパンの内容を変更する方法

Web テクノロジーの継続的な発展に伴い、ますます多くの Web ページ機能がバックエンド プログラム開発ではなく、JavaScript や jQuery などのフロントエンド JS ライブラリを通じて実現されています。その中で、ページ インタラクションは比較的一般的な機能であり、フォーム インタラクションが最も一般的です。この記事では、jQuery を使用して、フォーム入力ボックスがフォーカスを失ったときに、対応する タグの内容を自動的に変更する方法を紹介します。

1. 前提知識

jQuery を使用して タグの内容を変更する方法を紹介する前に、いくつかの基本知識を理解する必要があります。

1. jQuery バージョン

jQuery の最新バージョンは 3.x で、公式は 1.x と 2.x のメンテナンスを停止しています。したがって、この記事では jQuery の最新バージョンである jQuery 3.x を使用します。

2. セレクター

セレクターは jQuery の非常に重要な概念の 1 つで、タグ名、クラス名、ID、その他の属性に基づいて要素を選択できます。たとえば、セレクター $('input[type="text"]') は、ページ上のすべてのテキスト入力ボックスを選択できます。

3. イベント

JavaScript では、イベントは非常に一般的な概念です。クリックやマウスの動きなど、DOM (Document Object Model) 内の特定の操作によってトリガーされる動作を指します。 jQuery では、on() メソッドを使用してイベントをバインドできます (例: $('button').on('click', function(){alert('Button clicked'); })。

2.

1. HTML パーツの実装方法

HTML では、テキスト入力ボックスと タグを定義する必要があります。前進。例:

<input type="text" id="txtName" />
<span id="spnName"></span>

input タグはユーザー入力の受信に使用され、span タグはユーザーが入力したコンテンツの表示に使用されます。初期値は空にすることができます。

2. jQuery パート

jQuery コードでは、最初にテキスト入力ボックスを選択し、次に on() メソッドを使用してブラー イベントをバインドする必要があります。テキスト入力ボックスがフォーカスを失うと、コード内のコールバック関数を実行できます。具体的なコードは次のとおりです。

$(function() {
    $('#txtName').on('blur', function() {
        $('#spnName').text($(this).val());
    });
});

このうち、$(this).val() メソッドはテキスト入力ボックスの値を取得するために使用され、$('#spnName').text メソッドはテキスト入力ボックスの値を取得するために使用されます。 () メソッドは、 タグのテキスト内容を設定するために使用されます。

3. まとめ

上記の紹介により、フォーム入力ボックスが失われたときに、jQuery を使用して対応する タグの内容を自動的に変更する方法を誰もが明確に理解できると思います。集中。 。もちろん、text() メソッドを使用して タグのコンテンツを設定するだけでなく、html() メソッドを使用して HTML コンテンツを設定したり、append() メソッドを使用して新しいコンテンツを追加したりすることもできます。 タグに追加します。

最後に、jQuery には DOM を操作するための便利なメソッドが多数用意されていますが、実際の開発では、コードが肥大化しすぎてページのパフォーマンスに影響を与えないよう、コードのパフォーマンスの最適化にも注意を払う必要があることに注意してください。

以上がjqueryでフォーカスを失ってスパンの内容を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。