.att() vs .data()

Diferenças entre o uso do método .attr() e o método .data()

by Salustiano Silva

HTML

<div id="myBanana"></div>

<div id="myMonkey" data-fail="banana"></div>

JavaScript

// Definir valor
$( "#myBanana" ).attr( "data-fail", "no banana" );
$( "#myBanana" ).data( "fail", "no monkey" );

// Recolher valor
console.log( $( "#myBanana" ).attr( "data-fail" ) );
console.log ( $( "#myBanana" ).data( "fail" ) );

// ------------------------------------ \\

// Recolher valor
console.log( $( "#myMonkey" ).attr( "data-fail" ) );
console.log ( $( "#myMonkey" ).data( "fail" ) );

// Definir novo valor
$( "#myMonkey" ).attr( "data-fail", "No banana" );
$( "#myMonkey" ).data( "fail", "More banana" );

// Recolher novamente o valor
console.log( $( "#myMonkey" ).attr( "data-fail" ) );
console.log ( $( "#myMonkey" ).data( "fail" ) );