Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:05:19
Original
2585 Leute haben es durchsucht

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

Ergebnisse: Orangensaft anzeigen

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:

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

  • in
      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>
      
      Nach dem Login kopieren

      Ergebnis:

      Anzeige 2, keinen Orangensaft trinken, nicht 123

      4.2 Holen Sie sich die zweite

    • -Einstellungsklasse in
        .

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

        Ergebnis:

      • Apfel
      • Orange
      • Ananas
      • 4.3 Rufen Sie die Einstellungs-ID des zweiten

      • in
          ab.

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

          Ergebnis:

        • Apfel
        • Orange
        • Ananas
        • 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:

        • Apfel
        • Orange
        • Ananas
        • 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>
          
          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 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.

  • Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage