jQuery - Attribute

Einige der grundlegendsten Komponenten, die wir bei DOM-Elementen bearbeiten können, sind die Eigenschaften und Attribute, die diesen Elementen zugewiesen sind.

Die meisten dieser Attribute sind über JavaScript als DOM-Knoteneigenschaften verfügbar. Einige der häufigsten Eigenschaften sind -

className
tagName
id
href
title
rel
src

Betrachten Sie das folgende HTML-Markup für ein Bildelement:

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

Im Markup dieses Elements lautet der Tag-Name img, und das Markup für id, src, alt, class und title repräsentiert die Attribute des Elements, die jeweils aus einem Namen und einem Wert bestehen.

Mit jQuery können wir die Attribute eines Elements einfach bearbeiten und auf das Element zugreifen, sodass wir auch seine Eigenschaften ändern können.

Attributwert abrufen

Das attr() Die Methode kann verwendet werden, um entweder den Wert eines Attributs aus dem ersten Element in der übereinstimmenden Menge abzurufen oder Attributwerte auf alle übereinstimmenden Elemente zu setzen.

Beispiel

Es folgt ein einfaches Beispiel, in dem das Titelattribut des <em> -Tags abgerufen und der Wert <div id = "divid"> mit demselben Wert festgelegt wird:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Attributwert festlegen

Das attr(name, value) Mit dieser Methode kann das benannte Attribut unter Verwendung des übergebenen Werts für alle Elemente in der umschlossenen Menge festgelegt werden.

Beispiel

Es folgt ein einfaches Beispiel für die Einstellung src Attribut eines Bild-Tags an einem korrekten Ort -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Stile anwenden

Das addClass( classes )Mit dieser Methode können definierte Stylesheets auf alle übereinstimmenden Elemente angewendet werden. Sie können mehrere durch Leerzeichen getrennte Klassen angeben.

Beispiel

Das Folgende ist ein einfaches Beispiel, das setzt class Attribut eines para <p> -Tags -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Attributmethoden

In der folgenden Tabelle sind einige nützliche Methoden aufgeführt, mit denen Sie Attribute und Eigenschaften bearbeiten können.

Sr.Nr.	Methoden & Beschreibung
1	attr (Eigenschaften) Legen Sie ein Schlüssel- / Wertobjekt als Eigenschaften für alle übereinstimmenden Elemente fest.
2	attr (Schlüssel, fn) Setzen Sie eine einzelne Eigenschaft für alle übereinstimmenden Elemente auf einen berechneten Wert.
3	removeAttr (Name) Entfernen Sie ein Attribut aus jedem der übereinstimmenden Elemente.
4	hasClass (Klasse) Gibt true zurück, wenn die angegebene Klasse in mindestens einem der übereinstimmenden Elemente vorhanden ist.
5	removeClass (Klasse) Entfernt alle oder die angegebenen Klassen aus dem Satz übereinstimmender Elemente.
6	toggleClass (Klasse) Fügt die angegebene Klasse hinzu, wenn sie nicht vorhanden ist, entfernt die angegebene Klasse, wenn sie vorhanden ist.
7	html () Ruft den HTML-Inhalt (innerHTML) des ersten übereinstimmenden Elements ab.
8	html (val) Legen Sie den HTML-Inhalt jedes übereinstimmenden Elements fest.
9	text () Ruft den kombinierten Textinhalt aller übereinstimmenden Elemente ab.
10	Text (val) Legen Sie den Textinhalt aller übereinstimmenden Elemente fest.
11	val () Ruft den Eingabewert des ersten übereinstimmenden Elements ab.
12	val (val) Legen Sie das Wertattribut jedes übereinstimmenden Elements fest, wenn es bei <Eingabe> aufgerufen wird. Wenn es jedoch bei <Auswahl> mit dem übergebenen Wert <Option> aufgerufen wird, wird die Option Übergeben ausgewählt, wenn es bei Kontrollkästchen oder Optionsfeld aufgerufen wird Alle passenden Kontrollkästchen und Radioboxen werden aktiviert.

Beispiele

Ähnlich wie in der obigen Syntax und den obigen Beispielen erhalten Sie anhand der folgenden Beispiele Verständnis für die Verwendung verschiedener Attributmethoden in unterschiedlichen Situationen.

Hier ist eine vollständige Liste der Attributmethoden in verschiedenen Situationen -

Sr.Nr.	Auswahl & Beschreibung
1	$("#myID").attr("custom") Dies würde den Wert des Attributs custom für das erste Element zurückgeben, das mit der ID myID übereinstimmt.
2	$("img").attr("alt", "Sample Image") Dies setzt die alt Attribut aller Bilder auf einen neuen Wert "Beispielbild".
3	$("input").attr({ value: "", title: "Please enter a value" }); Setzt den Wert aller <input> -Elemente auf die leere Zeichenfolge und setzt das jQuery-Beispiel auf die Zeichenfolge. Bitte geben Sie einen Wert ein .
4	$("a[href^=https://]").attr("target","_blank") Wählt alle Links mit einem href-Attribut aus, das mit https: // beginnt, und setzt sein Zielattribut auf _blank .
5	$("a").removeAttr("target") Dies würde entfernen Zielattribut aller Verbindungen.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Dies würde das Attribut disabled auf den Wert "disabled" ändern, während Sie auf die Schaltfläche "Senden" klicken.
7	$("p:last").hasClass("selected") Dies gibt true zurück, wenn für das letzte <p> -Tag die zugeordnete Klasse ausgewählt wurde .
8	$("p").text() Gibt eine Zeichenfolge zurück, die den kombinierten Textinhalt aller übereinstimmenden <p> -Elemente enthält.
9	$("p").text("<i>Hello World</i>") Dies würde "<I> Hallo Welt </ I>" als Textinhalt der übereinstimmenden <p> -Elemente festlegen.
10	$("p").html() Dies gibt den HTML-Inhalt aller übereinstimmenden Absätze zurück.
11	$("div").html("Hello World") Dies würde den HTML-Inhalt aller übereinstimmenden <div> auf Hello World setzen .
12	$("input:checkbox:checked").val() Rufen Sie den ersten Wert aus einem aktivierten Kontrollkästchen ab.
13	$("input:radio[name=bar]:checked").val() Rufen Sie den ersten Wert aus einer Reihe von Optionsfeldern ab.
14	$("button").val("Hello") Legt das Wertattribut jedes übereinstimmenden Elements <Button> fest.
15	$("input").val("on") Dies würde alle Radio- oder Kontrollkästchen aktivieren, deren Wert "Ein" ist.
16	$("select").val("Orange") Dies würde die Option Orange in einem Dropdown-Feld mit den Optionen Orange, Mango und Banane auswählen.
17	$("select").val("Orange", "Mango") Dies würde Orange- und Mango-Optionen in einem Dropdown-Feld mit den Optionen Orange, Mango und Banane auswählen.