Heim >Web-Frontend >js-Tutorial >Der Unterschied zwischen .attr() und .data()

Der Unterschied zwischen .attr() und .data()

php中世界最好的语言Original: 2018-04-19 15:39:301704Durchsuche

Dieses Mal werde ich Ihnen den Unterschied zwischen .attr() und .data() vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von .attr() und .data() . Werfen wir einen Blick darauf.

Jquery ObjektEigenschaften und DOM-Eigenschaften

Ein einfaches Beispiel

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jquery中.attr和.data的区别</title>
  </head>
  <body>
    <p id="app"data-foo="hello"></p>
  </body>
  <script type="text/javascript"src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    vargetAttr1 = $('#app').attr('data-foo');
    vargetData1 = $('#app').data('foo');
    console.log('getAttr1: '+ getAttr1);//hello
    console.log('getData1: '+ getData1);//hello
    $('#app').attr('data-foo','world');//$.attr 设置DOM元素属性值
    vargetAttr2 = $('#app').attr('data-foo');
    vargetData2 = $('#app').data('foo');
    console.log('getAttr2: '+ getAttr2);//world
    console.log('getData2: '+ getData2);//*** hello ***
    $('#app').data('foo','WORLD');//$.data 设置DOM node属性值
    vargetAttr3 = $('#app').attr('data-foo');
    vargetData3 = $('#app').data('foo');
    console.log('getAttr3: '+ getAttr3);//world
    console.log('getData3: '+ getData3);//*** WORLD ***
  </script>
</html>

• $.attr() übernimmt jedes Mal den Attributwert vom DOM-Element, das heißt, er stimmt mit dem Attributwert im Tag in der Ansicht überein. •$.attr('data-foo') erhält den data-foo-Attributwert vom Tag

•$.attr('data-foo', 'world') fügt die -Zeichenfolge 'world' in das 'data-foo'-Attribut des Tags ein; •$.data() übernimmt den Wert vom Jquery-Objekt. Da der Objektattributwert im Speicher gespeichert ist, stimmt er möglicherweise nicht mit dem Attributwert in der Ansicht überein. •$.data('foo') erhält den Attributwert von foo vom Jquery-Objekt, nicht den data-foo-Attributwert vom Tag

•$.data('foo', 'world') fügt die Zeichenfolge 'world' in das 'foo'-Attribut des Jquery-Objekts anstelle des data-foo-Attributs des View-Tags ein.

Durch die Kombination des obigen Codes und der Erklärung sollte jeder den Unterschied zwischen den beiden verstehen können.

Zusammenfassung

Daher sollten $.attr() und $.data() eine gemischte Verwendung vermeiden, dh die folgenden zwei Situationen sollten so weit wie möglich vermieden werden:

1. Verwenden Sie $.attr(), um das Attribut festzulegen, und verwenden Sie dann $.data(), um den Attributwert abzurufen 2. Verwenden Sie $.data(), um das Attribut festzulegen, und verwenden Sie dann $.attr(), um den Attributwert abzurufen.

Gleichzeitig wird aus Leistungssicht empfohlen, $.data() für Set- und Get-Vorgänge zu verwenden, da dadurch nur der Attributwert des Jquey-Objekts geändert wird und keine zusätzlichen DOM-Operationen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

jQuery ermöglicht das Zoomen von Bildern durch Mausradbedienung

jQuery implementiert die Funktion „Zurück zum Anfang“

jQuery bestimmt, ob zum Ende der Webseite navigiert werden soll

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen .attr() und .data(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery 字符串对象 dom

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：Jquery+HTML+CSS implementiert die Dropdown-ListenfunktionNächster Artikel：Jquery+HTML+CSS implementiert die Dropdown-Listenfunktion

In Verbindung stehende Artikel

Mehr sehen