suchen

Heim  >  Artikel  >  Web-Frontend  >  Der Unterschied zwischen .attr() und .data() in jQuery

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

小云云
小云云Original
2017-12-29 11:20:351344Durchsuche

$.attr() und $.data() sind im Wesentlichen der Unterschied zwischen DOM-Attributen und Jquery-Objektattributen. Lassen Sie uns anhand eines Beispiels den Unterschied zwischen .attr() und .data() in jQuery vorstellen. Schauen wir uns an, dass $.attr() und $.data() im Wesentlichen zu DOM-Attributen gehören und JQuery-Attributunterschiede.

Jquery-Objektattribute und DOM-Attribute

Ein einfaches Beispiel

• $.attr() übernimmt jedes Mal den Wert des Attributs aus dem DOM-Element ist mit dem Attributwert in der Beschriftung in der Ansicht konsistent. •$.attr('data-foo') erhält den data-foo-Attributwert vom Tag 
<!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">
    var getAttr1 = $('#app').attr('data-foo');
    var getData1 = $('#app').data('foo');
    console.log('getAttr1: ' + getAttr1); //hello
    console.log('getData1: ' + getData1); //hello
    $('#app').attr('data-foo', 'world'); //$.attr 设置DOM元素属性值
    var getAttr2 = $('#app').attr('data-foo');
    var getData2 = $('#app').data('foo');
    console.log('getAttr2: ' + getAttr2); //world
    console.log('getData2: ' + getData2); //*** hello ***
    $('#app').data('foo', 'WORLD'); //$.data 设置DOM node属性值
    var getAttr3 = $('#app').attr('data-foo');
    var getData3 = $('#app').data('foo');
    console.log('getAttr3: ' + getAttr3); //world
    console.log('getData3: ' + getData3); //*** WORLD ***
  </script>
</html>


•$.attr('data-foo', 'world') erhält den Die Zeichenfolge „world“ wird in das Attribut „data-foo“ des Tags eingefügt.

•$.data() übernimmt den Wert vom Jquery-Objekt vom Wert in der Ansicht abweichen. •$.data('foo') erhält den Attributwert von foo vom Jquery-Objekt, nicht den data-foo-Attributwert vom Tag


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

Durch die Kombination des obigen Codes und der Erklärung sollte jeder in der Lage sein, den Unterschied zwischen den beiden zu verstehen.

Zusammenfassung

Daher sollten $.attr() und $.data() eine gemischte Verwendung vermeiden, das heißt, 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() Attributwert abrufen.

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-Vorgänge verursacht werden .


Verwandte Empfehlungen:

Der Unterschied zwischen attr() und prop() von jQuery

CSS-Attribut attr()

jQuery: Der Unterschied zwischen attr() und prop()

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

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：Ausführliche Erläuterung von Beispielen für die Implementierung der Dropdown-Listenfunktion durch jquery+cssNächster Artikel：Ausführliche Erläuterung von Beispielen für die Implementierung der Dropdown-Listenfunktion durch jquery+css

In Verbindung stehende Artikel

Mehr sehen