Der Unterschied zwischen .attr() und .data()-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-04-19 15:39:30

Original

1675 Leute haben es durchsucht

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>

Nach dem Login kopieren

• $.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!