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)
Nach dem Login kopieren
Zum Festlegen von Werten und Eigenschaften
$(selector).attr(attribute, value)
Nach dem Login kopieren
Legen Sie Werte und Eigenschaften mithilfe der unten gezeigten Funktionen fest -
$(selector).attr(attribute, function(index, currentvalue))
Nach dem Login kopieren
Um mehrere Werte und Eigenschaften festzulegen, verwenden Sie Folgendes:
$(selector).attr({attribute:value, attribute:value,…})
Nach dem Login kopieren
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>
Nach dem Login kopieren
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)
Nach dem Login kopieren
Zum Festlegen von Eigenschaften und Werten
$(selector).prop(property, value)
Nach dem Login kopieren
Legen Sie Eigenschaften und Werte mithilfe der unten gezeigten Funktionen fest -
$(selector).prop(property, function(index, currentvalue))
Nach dem Login kopieren
Legen Sie mehrere Eigenschaften und Werte wie folgt fest -
$(selector).prop(property:value, property:value,…))
Nach dem Login kopieren
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>
Nach dem Login kopieren
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!
