Heim > Artikel > Web-Frontend > Wie ändere ich die Element-ID mit jQuery?

Wie ändere ich die Element-ID mit jQuery?

WBOYnach vorne: 2023-08-24 09:49:421475Durchsuche

如何使用 jQuery 更改元素 id？

jQuery ist eine der JavaScript-Bibliotheken, die schnell, klein und funktionsreich ist. Es wird zur Ereignisbehandlung, Animation usw. verwendet. Es ist eine Kombination aus Vielseitigkeit und Skalierbarkeit. jQuery wird verwendet, um AJAX-Aufrufe und DOM-Manipulation zu vereinfachen.

Mit jQuery können wir Webseiten interaktiv gestalten, indem wir auf Mausklickereignisse reagieren. jQuery umfasst Funktionen wie Ereignisse, Effekte, Animationen, Ajax, JSON-Parsing, browserübergreifende Unterstützung und Erweiterbarkeit. Es wird als einzelne JavaScript-Datei verteilt, die alle Schnittstellen wie DOM, Ereignisse und Ajax-Funktionen definiert.

jQuery besteht aus zwei Funktionen, eine ist eine statische Dienstprogrammfunktion und die andere ist eine Objektmethode.

Wir können die Funktion attr() in jQuery verwenden, um den Wert der Element-ID zu ändern. Sie können auch die Funktion prop() verwenden.

Lassen Sie uns diese beiden Methoden von jQuery im Detail besprechen.

Methode 1: Verwenden Sie die jQuery-Methode attr()

Dies ist eine der Möglichkeiten, die ID eines Elements zu ändern. Mit der Methode attr() können Sie die Attribute und Werte des ausgewählten Elements festlegen oder zurückgeben. Wenn jQuery attr() dieses Attribut zurückgibt, gibt es den ersten Wert des passenden HTML-Elements zurück. Wenn jQuery attr() einen Attributwert festlegt, legt es ein oder mehrere Attribute oder Wertepaare für einen Satz übereinstimmender HTML-Elemente fest.

Grammatik

Das Folgende ist die Syntax der attr()-Methode -

Um den Wert des Attributs zurückzugeben, sieht es so aus -

$(selector).attr(attribute)

Zum Festlegen von Werten und Eigenschaften

$(selector).attr(attribute, value)

Legen Sie Werte und Eigenschaften mithilfe der unten gezeigten Funktionen fest -

$(selector).attr(attribute, function(index, currentvalue))

Um mehrere Werte und Eigenschaften festzulegen, verwenden Sie Folgendes:

$(selector).attr({attribute:value, attribute:value,…})

Parameter

Eigenschaft – Geben Sie den Eigenschaftsnamen an.
Wert – der angegebene Wert des Attributs.
function(index,currentvalue) – Geben Sie eine Funktion an, die den festzulegenden Eigenschaftswert zurückgibt. Hier erhält index die Position des Index innerhalb des Elements innerhalb der Sammlung. currentvalue empfängt den aktuellen Attributwert des ausgewählten Elements.

Beispiel

In diesen Beispielen verwenden wir die attr()-Methode von jQuery, um die Element-ID zu ändern.

<html>
<head>
   <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <style>
      #myColor {color: white; background: black; padding:30px; height: 90px; width: 400px;
      }
      #newColor {background: pink; width: 650px; color: white; padding:30px; height: 90px;
      }
   </style>
</head>
<body>
   <div id="myColor"><p style="text-align:center;">Changing the Element ID</p> </div><br>
   <button onclick = "myFuntion()"> Click here </button>
   <script>
      function myFuntion() {
         $("div").attr('id', 'newColor');
      }
   </script>
   </center>
</body>
</html>

Wie wir im Beispiel gesehen haben, haben wir hier die Methode attr() verwendet, die zum Ändern der Element-ID eines HTML-Elements verwendet wird. Es handelt sich um eine jQuery-Attributmethode. Wir müssen die jQuery-Bibliothek importieren, um jQuery-bezogene Funktionen auszuführen.

Mit der Methode attr() können Sie die Attribute und Werte des ausgewählten Elements festlegen oder zurückgeben. Wenn Sie jQuery attr() verwenden, um ein Attribut zurückzugeben, wird der Wert des ersten passenden Elements zurückgegeben. Diese Attributmethoden ändern die Element-ID des Elements.

Bevor wir auf die Schaltfläche klicken, erscheint die Hintergrundfarbe schwarz und sobald wir auf die Schaltfläche klicken, wird die Hintergrundfarbe rosa.

Methode 2: Verwenden Sie die prop()-Methode

Wir können die Element-ID eines HTML-Elements mit der prop()-Methode ändern. Es wird verwendet, um die Attribute und Werte des ausgewählten HTML-Elements festzulegen oder zurückzugeben. Wenn Sie jQuery prop() verwenden, um einen Eigenschaftswert zurückzugeben, wird der Wert des ersten übereinstimmenden Elements zurückgegeben. Wenn Sie die jQuery-Methode prop() verwenden, um den Wert einer Eigenschaft festzulegen, werden eine oder mehrere Eigenschaften einer Reihe von Wertepaaren festgelegt, die mit Elementen übereinstimmen, die eine Sammlung darstellen.

Das Folgende ist die Syntax der prop()-Methode -

wird verwendet, um den Wert des Attributs wie folgt zurückzugeben: -

$(selector).prop(property)

Zum Festlegen von Eigenschaften und Werten

$(selector).prop(property, value)

Legen Sie Eigenschaften und Werte mithilfe der unten gezeigten Funktionen fest -

$(selector).prop(property, function(index, currentvalue))

Legen Sie mehrere Eigenschaften und Werte wie folgt fest -

$(selector).prop(property:value, property:value,…))

Parameter

Attribut – Geben Sie den Attributnamen an
Wert – Geben Sie den Attributwert
function(index,currentvalue) – Geben Sie eine Funktion an, die den festzulegenden Attributwert zurückgibt. Hier erhält index die Indexposition des HTML-Elements in der Sammlung. currentvalue erhält den Attributwert des aktuell ausgewählten Elements.

Beispiel

Nehmen wir ein weiteres Beispiel und sehen, wie man die Element-ID mit der prop()-Methode ändert.

<html>
<head>
   <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <style>
      #myColor {color: white; background: black; padding:30px; height: 90px; width: 550px;
      }
      #newColor {background: green; width: 550px; color: white; padding:30px; height: 90px;
      }
   </style>
</head>
<body>
   <div id="myColor"><p style="text-align:center;">Changing the Element ID</p> </div><br>
   <button onclick = "myFuntion()"> Click here </button>
   <script>
      function myFuntion() {
         $("div").prop('id', 'newColor');
      }
   </script>
   </center>
</body>
</html>

Wie wir im Beispiel gesehen haben, verwenden wir hier die Methode prop(), um die Element-ID des HTML-Elements zu ändern, bei der es sich um eine jQuery-Attributmethode handelt.

Bevor wir auf die Schaltfläche klicken, erscheint die Hintergrundfarbe schwarz und sobald wir auf die Schaltfläche klicken, wird die Hintergrundfarbe grün.

Fazit

In diesem Artikel zeigen wir anhand eines Beispiels, wie Sie die Element-ID ändern. Wir sehen hier zwei verschiedene Beispiele. Im ersten Beispiel verwenden wir die Methode attr() und das Ereignis onclick, um die Element-ID nach dem Klicken auf die Schaltfläche zu ändern. Im zweiten Beispiel verwenden wir die Methode prop() und das Ereignis onClick, um die Element-ID nach dem Klicken auf die Schaltfläche zu ändern.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Element-ID mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie stelle ich den horizontalen Skalierungsfaktor eines Kreises mit FabricJS ein?Nächster Artikel：Wie stelle ich den horizontalen Skalierungsfaktor eines Kreises mit FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen