Heim  >  Artikel  >  Web-Frontend  >  Jquery löscht den empfangenen Wert

Jquery löscht den empfangenen Wert

WBOY
WBOYOriginal
2023-05-25 09:04:08428Durchsuche

Bei der Frontend-Entwicklung ist es häufig erforderlich, von Benutzern eingegebene Daten zu löschen oder zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die viele praktische Methoden zum Bearbeiten von HTML- und CSS-Elementen bietet. In diesem Artikel erfahren Sie, wie Sie empfangene Werte mit jQuery löschen.

  1. Verwenden Sie die Methode .val(), um den Wert des Eingabefelds abzurufen.

Bevor wir jQuery zum Ausführen des Löschvorgangs verwenden, müssen wir den Wert des Eingabefelds abrufen. Sie können die Methode .val() verwenden, um den Wert aus dem Eingabefeld abzurufen. Beispiel:

var inputValue = $('#inputBox').val();

Im obigen Code steht $ für die jQuery-Bibliothek und #inputBox für das Eingabefeld in HTML mit dem id-Attribut von inputBox. Die Methode val() weist den Wert des Eingabefelds der Variablen inputValue zu.

  1. Verwenden Sie die Methode .replace(), um eine bestimmte Zeichenfolge zu löschen.

Sobald wir den Wert im Eingabefeld erhalten haben, können wir die Methode replace() verwenden, um eine bestimmte Zeichenfolge zu löschen. Angenommen, wir möchten beispielsweise alle Leerzeichen im Eingabefeld entfernen, können wir den folgenden Code verwenden:

inputValue = inputValue.replace(/s+/g, '');

Im obigen Code ist /s+/g ein regulärer Ausdruck, der mit allen Leerzeichen im Eingabefeldwert übereinstimmen kann. g steht für globales Suchen und Ersetzen. Die Methode

replace() ersetzt alle passenden Leerzeichen durch leere Zeichenfolgen. Jetzt enthält die Variable inputValue keine Leerzeichen mehr.

  1. Verwenden Sie die Methode $.trim(), um Leerzeichen auf beiden Seiten der Zeichenfolge zu entfernen.

Wenn wir nur Leerzeichen vor oder nach dem Wert des Eingabefelds entfernen möchten, können wir die Methode $.trim() verwenden. Der folgende Code entfernt beispielsweise führende und nachgestellte Leerzeichen aus dem Eingabefeldwert:

inputValue = $.trim(inputValue);

Im obigen Code gibt die Methode $.trim() den Eingabefeldwert ein und entfernt die Leerzeichen auf beiden Seiten. Jetzt enthält die Variable inputValue nur noch Nicht-Leerzeichen.

  1. Löschen Sie den Inhalt eines HTML-Elements

jQuery bietet auch eine Möglichkeit, den Inhalt eines bestimmten HTML-Elements zu löschen. Wenn wir beispielsweise den Inhalt im div-Element mit der ID-Ausgabe löschen möchten, können wir den folgenden Code verwenden: Die Methode

$('#output').empty();

empty() löscht alle untergeordneten Elemente des angegebenen Elements und deren Textinhalt.

  1. Wenden Sie die Löschaktion auf das Schaltflächenklickereignis an.

Schließlich können wir die Löschaktion auf das tatsächliche Schaltflächenklickereignis anwenden. Der folgende Code entfernt beispielsweise alle Leerzeichen im Eingabefeld, wenn auf die Schaltfläche geklickt wird:

<input type="text" id="inputBox" value=" This is a sample input. " />
<button id="deleteButton">Delete Spaces</button>

<script>
  $('#deleteButton').click(function() {
    var inputValue = $('#inputBox').val();
    inputValue = inputValue.replace(/s+/g, '');
    $('#inputBox').val(inputValue);
  });
</script>

Im obigen Code wird der Code in der click()-Methode ausgeführt, wenn auf die Schaltfläche geklickt wird. Der Code entnimmt den Wert aus dem Eingabefeld, entfernt alle Leerzeichen und fügt ihn mithilfe der Methode .val() wieder in das Eingabefeld ein.

Zusammenfassung:

In diesem Artikel haben wir gelernt, wie man einen empfangenen Wert mit jQuery löscht. Wir haben gelernt, wie man mit den Methoden .replace() und $.trim() Leerzeichen aus Strings entfernt und mit der Methode .empty() Inhalte aus HTML-Elementen entfernt. Abschließend wenden wir die Löschaktion auf das Schaltflächenklickereignis an, um zu demonstrieren, wie diese Aktionen zusammenpassen. Hoffentlich hat Ihnen dieser Artikel dabei geholfen, besser zu verstehen, wie Sie einen empfangenen Wert mit jQuery löschen.

Das obige ist der detaillierte Inhalt vonJquery löscht den empfangenen Wert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn