Heim > Artikel > Web-Frontend > Der Unterschied zwischen .attr() und .data() in jQuery
$.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:
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!