Detaillierte Erläuterung der Anwendungsbeispiele der Funktionen attr() und prop() in jQuery (mit Nutzungsunterschieden)

Das Beispiel in diesem Artikel beschreibt die Verwendung der Funktionen attr() und prop() in jQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Die attr()-Methode von jQuery

Die attr()-Methode wird in jQuery verwendet, um Elementattribute abzurufen und festzulegen. Attr() wird häufig in jQuery-DOM-Operationen verwendet.

1. attr (Attributname) // Den Wert des Attributs abrufen (den Attributwert des ersten übereinstimmenden Elements abrufen. Mit dieser Methode kann der Wert eines Attributs problemlos vom ersten übereinstimmenden Element abgerufen werden. Wenn dies bei dem Element nicht der Fall ist ein entsprechendes Attribut haben, gibt undefiniert zurück)

2. attr(Attributname, Attributwert) //Legen Sie den Wert des Attributs fest (Legen Sie einen Attributwert für alle übereinstimmenden Elemente fest.)

3. attr (Attributname, Funktionswert) //Legen Sie den Funktionswert des Attributs fest (Legen Sie einen berechneten Attributwert für alle übereinstimmenden Elemente fest. Geben Sie keinen Wert an, sondern eine Funktion und den dadurch berechneten Wert Funktion ist Attributwert )

4.attr(properties) //Mehrere Attributwerte für das angegebene Element festlegen, nämlich: {Attributname eins: „Attributwert eins“, Attributname zwei: „Attributwert zwei“, … … }. (Dies ist die beste Möglichkeit, viele Attribute stapelweise über alle übereinstimmenden Elemente hinweg festzulegen. Beachten Sie, dass Sie „className“ als Attributnamen verwenden müssen, wenn Sie das Klassenattribut eines Objekts festlegen möchten. Alternativ können Sie „class“ direkt verwenden. oder 'id'. )

Beispielcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

Nach dem Login kopieren

1.attr(name)//Den Wert des Attributs abrufen

1.1 Verwenden Sie attr(name), um den Titelwert zu erhalten:

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

Nach dem Login kopieren

Ergebnis:

1.2 Verwenden Sie attr(name), um den Alt-Wert zu erhalten:

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

Nach dem Login kopieren

Ergebnis:

2. attr(name,value) //Legen Sie den Wert des Attributs fest

2.1 Verwenden Sie attr(name,value), um den Titelwert wie folgt zu ändern: Essen Sie keine Orangen

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

Nach dem Login kopieren

Ergebnis:

3. attr(name,fn) //Legen Sie den Funktionswert des Attributs fest

3.1 Setzen Sie den Wert des alt-Attributs auf den Wert des title-Attributs.

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

Nach dem Login kopieren

Ergebnis:

4.attr(properties) //Legen Sie ein Objekt in der Form „Name/Wert“ als Attribute aller übereinstimmenden Elemente fest

4.1 Holen Sie sich das zweite

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

Nach dem Login kopieren

Ergebnis:

4.2 Holen Sie sich die zweite

-Einstellungsklasse in

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

Nach dem Login kopieren

Ergebnis:

4.3 Rufen Sie die Einstellungs-ID des zweiten

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

Nach dem Login kopieren

Ergebnis:

4.4 Holen Sie sich das zweite

und legen Sie den Stil fest.

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

Nach dem Login kopieren

Ergebnis:

Es ist falsch, alt in li hinzuzufügen. Es kann nur in IMG-, Area- und Eingabeelementen (einschließlich Applet-Elementen) verwendet werden. Bei Eingabeelementen soll das Alt-Attribut das Bild der Schaltfläche „Senden“ ersetzen. Um die attr()-Methode hier im Detail zu erklären, gibt es kein geeignetes Attribut, daher wird alt als Beispiel verwendet. Es dient nur zum Erlernen und Nachschlagen der Verwendung der attr()-Methode.

Hier ist der Unterschied zwischen alt und tite.

alt: Dies ist der Text, der zur Beschreibung der Grafik verwendet wird. Wenn das Bild nicht angezeigt werden kann, werden diese Texte anstelle des Bildes angezeigt. Der Text wird auch angezeigt, wenn die Maus über das Bild bewegt wird.
Titel: Dies ist der Text, der angezeigt wird, nachdem die Maus darauf platziert wird.

Wie lösche ich also Attribute?

Das Schlüsselwort zum Löschen von Attributen in jquery lautet: RemoveAttr. Beachten Sie, dass A groß geschrieben wird:
Es ist derselbe HTML-Code in Verwendung eins. Ich möchte das Titelattribut von li löschen, also ist es das:

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

Nach dem Login kopieren

So einfach ist das: Attr ist eigentlich eine vereinfachte Implementierung von getAttribute in nativem JS und RemoveAttr ist die Abkürzung für RemoveAttribute.

Gibt es also ein ähnliches Attribut wie attr()?

val() in jquery ähnelt ,
$(this).val(); Ruft den Wert eines Elementknotens ab, äquivalent zu $(this).attr("value");
$(this).val(value); Legt den Wert eines Elementknotens fest, äquivalent zu $(this).attr("value",value);

2. jQuerys prop()-Methode:

Die Funktion

prop() wird verwendet, um den Attributwert des Elements festzulegen oder zurückzugeben, das mit dem aktuellen jQuery-Objekt übereinstimmt.

Diese Funktion gehört zum jQuery-Objekt (Instanz). Wenn Sie eine Eigenschaft eines DOM-Elements entfernen müssen, verwenden Sie die Funktion „removeProp()“.

Grammatik

Diese Funktion wurde in jQuery 1.6 hinzugefügt. Die Funktion prop() hat die folgenden zwei Verwendungszwecke:

Verwendung 1:

jQueryObject.prop( propertyName [, value ] )
Legen Sie den Wert der angegebenen Eigenschaft propertyName fest oder geben Sie ihn zurück. Wenn der Wertparameter angegeben ist, bedeutet dies, dass der Wert der Eigenschaft propertyName auf value gesetzt wird. Wenn der Wertparameter nicht angegeben ist, bedeutet dies, dass der Wert der Eigenschaft propertyName zurückgegeben wird.

Der Parameterwert kann auch eine Funktion sein, die die Funktion basierend auf allen übereinstimmenden Elementen durchläuft und ausführt. Der Zeiger in der Funktion zeigt auf das entsprechende DOM-Element. prop() übergibt außerdem zwei Parameter an die Funktion: Der erste Parameter ist der Index des Elements im passenden Element und der zweite Parameter ist der aktuelle Wert des propertyName-Attributs des Elements. Der Rückgabewert der Funktion ist der für das propertyName-Attribut des Elements festgelegte Wert.

Verwendung 2:

jQueryObject.prop( object )
Legen Sie den Wert einer beliebigen Anzahl von Eigenschaften gleichzeitig als Objekt fest. Jedes Attribut des Objektobjekts entspricht propertyName, und der Wert des Attributs entspricht value.

Hinweis: Alle Operationen zum „Setzen von Attributen“ der Funktion prop() gelten für jedes Element, das mit dem aktuellen jQuery-Objekt übereinstimmt. Alle Operationen zum „Lesen von Attributen“ gelten nur für das erste übereinstimmende Element.
Parameter

Bitte finden Sie die entsprechenden Parameter anhand der im vorherigen Syntaxabschnitt definierten Parameternamen.

Parameter	Beschreibung
Eigenschaftsname	String-Typ gibt den Attributnamen an.
Wert	Optional/Objekt/Funktionstyp gibt den Attributwert an, oder die Funktion , die den Attributwert zurückgibt.
Objekt	Objekt, das durch den Typ angegeben wird und zum Kapseln mehrerer Schlüssel-Wert-Paare und zum gleichzeitigen Festlegen mehrerer Eigenschaften verwendet wird.