Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Attributzuweisung und der Attributerfassung der Jquery-Methode attr() von Jquery

Detaillierte Erläuterung der Attributzuweisung und der Attributerfassung der Jquery-Methode attr() von Jquery

WBOYOriginal: 2016-05-16 15:05:192611Durchsuche

Die Methode attr() wird in jQuery verwendet, um Elementattribute abzurufen und festzulegen. Attr() ist die Abkürzung für Attribut, das häufig in jQuery-DOM-Operationen verwendet wird.

1. attr(attribute name) //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 für alle übereinstimmenden Elemente 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>

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>

Ergebnisse: Orangensaft anzeigen

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

<script>

alert($("ul li:eq(1)").attr("alt"));

</script>

Ergebnis:

Anzeige 123

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>

Ergebnis:

Zeigen Sie, keine Orangen zu essen

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>

Ergebnis:

Anzeige 123

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 25edfb22a4f469ecb59f1190150159c6 in ff6d136ddc5fdfeffaf53ff6ee95f185 und legen Sie die Attribute title und alt fest.

<script>

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

alert($("ul li:eq(1)").attr("title"));

alert($("ul li:eq(1)").attr("alt"));

</script>

Ergebnis:

Anzeige 2, keinen Orangensaft trinken, nicht 123

4.2 Holen Sie sich die zweite 25edfb22a4f469ecb59f1190150159c6-Einstellungsklasse in ff6d136ddc5fdfeffaf53ff6ee95f185.

<script>

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

</script>

Ergebnis:

052554c7cda34bca6781aa366618298bApfelbed06894275b65c1ab86501b08a632eb

a8de76896f181a98a3303bc5a54e5267Orangebed06894275b65c1ab86501b08a632eb

c74bf024f4128f185a92c2e08d922a22Ananasbed06894275b65c1ab86501b08a632eb

4.3 Rufen Sie die Einstellungs-ID des zweiten 25edfb22a4f469ecb59f1190150159c6 in ff6d136ddc5fdfeffaf53ff6ee95f185 ab.

<script>

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

</script>

Ergebnis:

052554c7cda34bca6781aa366618298bApfelbed06894275b65c1ab86501b08a632eb

a8de76896f181a98a3303bc5a54e5267Orangebed06894275b65c1ab86501b08a632eb

c74bf024f4128f185a92c2e08d922a22Ananasbed06894275b65c1ab86501b08a632eb

4.4 Holen Sie sich das zweite 25edfb22a4f469ecb59f1190150159c6 und legen Sie den Stil fest.

<script>

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

</script>

Ergebnis:

052554c7cda34bca6781aa366618298bApfelbed06894275b65c1ab86501b08a632eb

a0b96ea48419e2bd58e6c19365092fb4Orangebed06894275b65c1ab86501b08a632eb

c74bf024f4128f185a92c2e08d922a22Ananasbed06894275b65c1ab86501b08a632eb

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 Grafiken 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:

Derselbe HTML-Code in Verwendung eins, ich möchte das Titelattribut von li löschen, dann ist es das:

<script>

$("ul li:eq(1)").removeAttr("title");

</script>

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 ist ähnlich,

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

$(this).val(value); Setzt den Wert eines Elementknotens, äquivalent zu $(this).attr("value",value);

Die obige detaillierte Erläuterung der Attributzuweisung und Attributerfassung der Jquery attr()-Methode ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie Script Home unterstützen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Window.Open öffnet das Formular und wenn es verschachtelte Code_Javascript-Fähigkeiten enthältNächster Artikel：Window.Open öffnet das Formular und wenn es verschachtelte Code_Javascript-Fähigkeiten enthält

In Verbindung stehende Artikel

Mehr sehen