jQuery-Attribute hinzufügen

Verwenden Sie die jQuery-Methode attr(), um bei den Elementen, die ein Selektor erfasst, ein HTML-Attribut hinzuzufügen oder zu ändern. Laden Sie jQuery auf der Seite, bevor Sie diese Beispiele ausführen. Mit .prop() ändern Sie den aktuellen booleschen Zustand eines Formularelements. Mit .data() speichern Sie von jQuery verwaltete Daten statt eines HTML-Attributs.

Ein einzelnes HTML-Attribut mit .attr() setzen

Rufen Sie .attr(name, value) für eine jQuery-Sammlung auf. Als Name geben Sie das zu setzende HTML-Attribut an, als Wert den zuzuweisenden Inhalt. Jedes gefundene Element erhält das Attribut. Findet der Selektor keine Elemente, bleibt der Aufruf ohne Wirkung.

Die folgende ausführbare Node.js-Demonstration verwendet eine kleine Ersatzsammlung, damit sich die Aufrufe und ihre Ergebnisse ohne Browser zeigen lassen. Auf einer Webseite verwenden Sie nach dem Laden von jQuery dieselben jQuery-Aufrufe. Die Ersatzsammlung dient nur dieser eigenständigen Demonstration.

Führen Sie dieses Beispiel aus:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const elements = {
  saveButton: { attributes: {}, properties: {}, data: {} },
  reportLink: { attributes: {}, properties: {}, data: {} },
  emailUpdates: { attributes: {}, properties: { checked: false }, data: {} }
};

function $(selector) {
  const element = elements[selector.slice(1)];
  return {
    attr(name, value) {
      if (typeof name === "object") Object.assign(element.attributes, name);
      else element.attributes[name] = value;
      return this;
    },
    prop(name, value) {
      element.properties[name] = value;
      return this;
    },
    data(name, value) {
      element.data[name] = value;
      return this;
    }
  };
}

$("#saveButton").attr("title", "Save your changes");
$("#reportLink").attr({
  href: "/reports/current",
  target: "_blank",
  rel: "noopener"
});
$("#emailUpdates").prop("checked", true);
$("#saveButton").attr("data-category", "books");
$("#saveButton").data("category", "featured");

console.log(JSON.stringify({
  title: elements.saveButton.attributes.title,
  link: elements.reportLink.attributes,
  checked: elements.emailUpdates.properties.checked,
  htmlData: elements.saveButton.attributes["data-category"],
  jqueryData: elements.saveButton.data.category
}, null, 2));

{
  "title": "Save your changes",
  "link": {
    "href": "/reports/current",
    "target": "_blank",
    "rel": "noopener"
  },
  "checked": true,
  "htmlData": "books",
  "jqueryData": "featured"
}

Rufen Sie auf einer echten Webseite .attr("title", "Save your changes") für die jQuery-Sammlung auf, die Sie mit $("#saveButton") auswählen. Der Attributname lautet title; das zweite Argument ist sein Wert. Jedes passende Element erhält diesen Wert. Häufige Attribute mit Zeichenfolgen als Wert sind title, href, src und aria-label.

Mehrere Attribute mit .attr() setzen

Um mehrere Attribute in einem Aufruf zu setzen, übergeben Sie ein Objekt. Seine Schlüssel sind die Attributnamen, seine Werte die jeweils zuzuweisenden Inhalte. Das Beispiel oben richtet einen Link ein und setzt beim Öffnen eines neuen Tabs auch rel="noopener". Verwenden Sie diese Objektform, wenn die Attribute zusammengehören; jeder Wert wird allen passenden Links zugewiesen. Wählen Sie ein Ziel und einen Linktext, die zu Ihrer Seite passen. Der Wert rel ist zusammen mit target="_blank" nützlich, weil er verhindert, dass die geöffnete Seite eine Referenz auf die öffnende Seite erhält.

Mit .prop() den aktuellen booleschen Zustand ändern

Boolesche HTML-Attribute wie checked und disabled beschreiben den anfänglichen oder Standardzustand eines Elements. Der aktuelle Zustand kann sich ändern, wenn jemand mit der Seite interagiert. Verwenden Sie .prop(), um die aktuelle DOM-Eigenschaft zu ändern oder auszulesen. Ein Attribut mit .attr() zu setzen, ist keine zuverlässige Methode, um den aktuellen Auswahlzustand eines Kontrollkästchens zu ändern.

Im Beispiel setzt .prop("checked", true) das Kontrollkästchen emailUpdates auf ausgewählt. Entsprechend deaktiviert .prop("disabled", true) ein Steuerelement jetzt; mit false aktivieren Sie es wieder. Verwenden Sie .attr(), wenn Sie gezielt ein HTML-Attribut wie title oder href setzen möchten. Für den aktuellen Wert boolescher Eigenschaften wie checked und disabled verwenden Sie .prop().

HTML-data-*-Attribute und jQuery-.data() unterscheiden

Verwenden Sie .attr("data-name", value), wenn der Wert als HTML-data-*-Attribut geschrieben werden und Teil des Markups bleiben soll. Im Beispiel setzt .attr("data-category", "books") dieses HTML-Attribut.

.data("category", "featured") speichert dagegen einen Wert im Datencache von jQuery. Das eignet sich für einen von Skripten verwalteten Zustand, bedeutet aber nicht, dass das entsprechende HTML-Attribut geschrieben wurde. Wenn das Markup oder ein anderes Skript das aktualisierte data-*-Attribut lesen muss, verwenden Sie .attr(). Ist der Wert nur für von jQuery verwaltete Daten bestimmt, verwenden Sie .data(). So wählen Sie die API danach aus, wo der Wert verfügbar sein muss.