So verlieren Sie den Fokus und ändern den Span-Inhalt in JQuery

Mit der kontinuierlichen Weiterentwicklung der Webtechnologie werden immer mehr Webseitenfunktionen nicht mehr durch Back-End-Programmentwicklung, sondern durch Front-End-JS-Bibliotheken wie JavaScript und jQuery realisiert. Unter diesen ist die Seiteninteraktion eine relativ häufige Funktion, und die Formularinteraktion ist die häufigste. In diesem Artikel erfahren Sie, wie Sie mit jQuery den Inhalt des entsprechenden -Tags automatisch ändern, wenn das Formulareingabefeld den Fokus verliert.

1. Vorkenntnisse

Bevor wir uns vorstellen, wie man mit jQuery den Inhalt des -Tags ändert, müssen wir einige Grundkenntnisse verstehen.

1. jQuery-Version

Die neueste Version von jQuery ist 3.x, und der Beamte unterstützt die Wartung von 1.x und 2.x nicht mehr . Daher wird in diesem Artikel die neueste Version von jQuery, jQuery 3.x, verwendet.

2. Selektor

Der Selektor ist eines der sehr wichtigen Konzepte in jQuery. Er kann auf dem Tag-Namen, dem Klassennamen und der ID basieren des Elements. Beispielsweise kann der Selektor $('input[type="text"]') alle Texteingabefelder auf der Seite auswählen.

3. Event

In JavaScript sind Ereignisse ein sehr verbreitetes Konzept. Es bezieht sich auf das Verhalten, das durch eine bestimmte Operation im DOM (Document Object Model) ausgelöst wird, wie z. B. Klicks, Mausbewegungen usw. In jQuery können Ereignisse mit der Methode on() gebunden werden, zum Beispiel: $('button').on('click', function(){ Alert('Button clicked'); }).

2. So implementieren Sie

1. HTML-Teil

In HTML müssen wir das Texteingabefeld definieren im Voraus und -Tags. Beispiel:

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

Unter diesen wird das Eingabe-Tag verwendet, um Benutzereingaben zu empfangen, und das Span-Tag wird verwendet, um den vom Benutzer eingegebenen Inhalt anzuzeigen. Sein Anfangswert kann leer sein.

2. jQuery-Teil

Im jQuery-Code müssen wir zuerst das Texteingabefeld auswählen und dann die on()-Methode verwenden, um Binden Sie das Unschärfeereignis. Wenn das Texteingabefeld den Fokus verliert, kann die Rückruffunktion im Code ausgeführt werden. Der spezifische Code lautet wie folgt:

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

Unter diesen wird die Methode $(this).val() verwendet, um den Wert im Texteingabefeld zu erhalten, während die Methode $('#spnName') Die Methode .text() wird verwendet. Legen Sie den Textinhalt des -Tags fest.

3. Zusammenfassung

Durch die obige Einführung glaube ich, dass jeder die Verwendung von jQuery zum automatischen Ändern des entsprechenden verstehen kann, wenn das Formulareingabefeld den Fokus verliert . So markieren Sie Inhalte. Zusätzlich zur Verwendung der text()-Methode zum Festlegen des Inhalts des -Tags können wir natürlich auch die html()-Methode zum Festlegen des HTML-Inhalts verwenden oder die append()-Methode zum Anhängen neuer Inhalte verwenden zum -Tag.

Abschließend sei darauf hingewiesen, dass jQuery zwar viele praktische Methoden zum Betreiben des DOM bietet, Sie in der tatsächlichen Entwicklung jedoch auch auf die Optimierung der Codeleistung achten müssen, um zu vermeiden, dass es zu aufgebläht wird und die Seitenleistung beeinträchtigt.

Das obige ist der detaillierte Inhalt vonSo verlieren Sie den Fokus und ändern den Span-Inhalt in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!