Heim > Artikel > Web-Frontend > Der Unterschied zwischen .attr() und .data()
Der Unterschied zwischen .attr() und .data()
- php中世界最好的语言Original
- 2018-04-19 15:39:301623Durchsuche
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.
JqueryObjektEigenschaften 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.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!