So erhalten Sie das aktuelle Tag mit jquery

In der Front-End-Entwicklung ist das dynamische Abrufen des aktuellen Tags ein sehr häufiger Vorgang. Als Mitglied des Front-End-Frameworks bietet jQuery mehrere Möglichkeiten, das aktuelle Tag abzurufen. In diesem Artikel werden wir detailliert beschreiben, wie jQuery das aktuelle Tag erhält.

I. Holen Sie sich die ID des aktuellen Elements

Sie können die ID des aktuellen Elements über den folgenden Code abrufen:

$(this).attr("id");

Zum Beispiel definieren wir ein Element mit der ID „my-id“ in der HTML-Datei:

<div id="my-id">这是一个文本框</div>

Wir können den folgenden jQuery-Code verwenden, um die ID des Elements abzurufen:

$("#my-id").click(function(){
    console.log($(this).attr("id"));
});

Wenn der Benutzer auf das Element klickt, ruft jQuery die ID des aktuellen Elements ab und gibt sie im Konsolenfenster aus.

II. Holen Sie sich die Klasse des aktuellen Elements

Sie können die Klasse des aktuellen Elements über den folgenden Code abrufen:

$(this).attr("class");

Zum Beispiel definieren wir ein Element mit der Klasse „my-class“ in der HTML-Datei:

<div class="my-class">这是一个文本框</div>

Wir können den folgenden jQuery-Code verwenden, um die Klasse des Elements abzurufen:

$(".my-class").click(function(){
    console.log($(this).attr("class"));
});

Wenn der Benutzer auf das Element klickt, ruft jQuery die Klasse des aktuellen Elements ab und gibt sie im Konsolenfenster aus.

III. Rufen Sie die benutzerdefinierten Attribute des aktuellen Elements ab.

Sie können die benutzerdefinierten Attribute des aktuellen Elements über den folgenden Code abrufen:

$(this).attr("data-*");

Unter diesen steht „*“ für den Attributnamen, den wir selbst definiert haben. Beispielsweise definieren wir ein Element mit dem benutzerdefinierten Attribut „data-color“ in der HTML-Datei:

<div data-color="red">这是一个文本框</div>

Wir können den folgenden jQuery-Code verwenden, um das benutzerdefinierte Attribut des Elements abzurufen:

$("div").click(function(){
    console.log($(this).attr("data-color"));
});

Wenn der Benutzer auf klickt Element, jQuery Ruft die benutzerdefinierten Eigenschaften des aktuellen Elements ab und gibt sie an das Konsolenfenster aus.

IV. Den Tag-Namen des aktuellen Elements abrufen

Sie können den Tag-Namen des aktuellen Elements über den folgenden Code abrufen:

$(this).prop("tagName");

Zum Beispiel definieren wir ein Element mit dem Tag-Namen „div“ in der HTML-Datei :

<div>这是一个文本框</div>

Wir können den folgenden jQuery-Code verwenden, um den Tag-Namen des Elements abzurufen:

$("div").click(function(){
    console.log($(this).prop("tagName"));
});

Wenn der Benutzer auf das Element klickt, ruft jQuery den Tag-Namen des aktuellen Elements ab und gibt ihn im Konsolenfenster aus.

V. Holen Sie sich den Wert des aktuellen Elements

Sie können den Wert des aktuellen Elements über den folgenden Code abrufen:

$(this).val();

Zum Beispiel definieren wir ein Eingabefeld in der HTML-Datei:

<input type="text" value="这是一个文本框" />

Wir können das verwenden Befolgen Sie den jQuery-Code, um das Eingabefeld abzurufen. Der Wert von:

$("input").keyup(function(){
    console.log($(this).val());
});

Wenn der Benutzer Inhalte in das Eingabefeld eingibt, ruft jQuery den Wert des aktuellen Elements ab und gibt ihn im Konsolenfenster aus.

VI. Ermitteln Sie die Position des aktuellen Elements im Dokument

Sie können die Position des aktuellen Elements im Dokument über den folgenden Code ermitteln:

$(this).offset().top;
$(this).offset().left;

Zum Beispiel definieren wir ein Element in der HTML-Datei:

<div>这是一个文本框</div>

Wir können den folgenden jQuery-Code verwenden, um die Position des Elements im Dokument abzurufen:

$("div").click(function(){
    console.log($(this).offset().top);
    console.log($(this).offset().left);
});

Wenn der Benutzer auf das Element klickt, ruft jQuery die Position des aktuellen Elements im Dokument ab und gibt sie im Konsolenfenster aus.

In diesem Artikel stellen wir detailliert vor, wie jQuery das aktuelle Tag aus den Aspekten des Abrufens der ID, der Klasse, der benutzerdefinierten Attribute, des Tag-Namens, des Werts und der Position des aktuellen Elements im Dokument erhält. Durch das Studium dieses Artikels können wir ein tieferes Verständnis des jQuery-bezogenen Wissens erlangen, die Front-End-Entwicklungsfähigkeiten stärken und mehr Möglichkeiten für unsere Arbeit und Projektpraxis bieten.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie das aktuelle Tag mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!