Jquery Data VS Attr

jquery data vs attr

I think you are confused about what .data() does:

.data(name,value) stores the information in an internal jQuery cache - you cannot see it in the DOM structure.

.attr(name,value) changes the DOM attribute of that element. So this you will be able to see in the HTML code if you inspect it.

using $.data(value) versus $.attr(data-value)

The data function manages a cache of data for an element that jQuery provides, not data-* attributes. The only interconnection between the data function and data-* attributes is that data will initialize its cache of information from data-* attributes if you request a key that matches a data-* attribute.

Using data to set data will never update a data-* attribute.

It's fine to use attr to update the attribute, you just need to be consistent: Either use the attribute (via attr) for both getting and setting, or use data for both getting and setting, as they manage different things.

Using attr means you're really updating the attribute on the element, which means you can use the values you set in selectors and such (both CSS and jQuery), but also means you are limited to getting and setting only string values.

Using data means you're only updating the data cache, not the element, which means you can't use those values in selectors and such (because they're not stored anywhere in the DOM), but means you can get and set the full range of JavaScript data types.

jQuery data() vs attr(data)

The $.data is used for storing information with respect to an element:

Docs:

Store arbitrary data associated with the specified element. Returns
the value that was set.

On the other hand, attr is used to manipulate attributes of an element.

From your question, you seem to store the data, you should use $.data in that case.

data-* attributes are a feature of HTML5

Performance

.data() seems to be much more performance friendly according to this

I also find it cleaner since it's not visible for everyone in page source.

jquery: .data('x', 'y') vs .attr('data-x', 'y')

It will work correctly, however you should be using data() as a getter and a setter.

The reason for this is because jQuery stores all data-* attributes in an object which it maintains in memory. This means it is much faster than accessing the DOM each time to read/write an attribute.

If you need to select an element by a data attribute, use filter() - it will most likely still be faster than an attribute selector, although I've not tested.

var $filteredElements = $('.lots-of-elements').filter(function() {
    return $(this).data('foo') == 'bar';
});

Difference between jQuery .data() and setAttribute

jQuery doesn't attach a physical attribute to the element. It keeps an internal object (called cache) where it keeps the data, with a reference to the element that it corresponds to - it isn't stored in the DOM or an attribute.

jQuery data() and attr() methods, and JavaScript dataset property return undefined

If you know that the attribute you are looking for is content, it is possible to use a jQuery has attribute selector:

For example:

// will select ALL items with content attribute:  
$('[content]').attr('content');

If you know you want ONLY items with a certain class on it, you can combine the class and attribute selectors like so:

// will select items with content attribute that have the price class:
$('.price[content]').attr('content');

As others have mentioned, using $('.price').data('content') requires that the attribute is prefixed with data- (such as data-content="66.00"), and can't be used in this situation.

What's the difference between jquery's data(key,val) and attr(data-key,data-val)

.data() is used to store data in an object, but as of the "release" of HTML5, it can also access data-* attributes on elements.

However, it can not change these, as it is primarily used for storing data in objects etc, not physically on elements.

Therefore attr() is the only way to change a value of an attribute on an element, such as data-* attributes.

See:

jQuery Data vs Attr?
http://api.jquery.com/jQuery.data/
http://api.jquery.com/attr/

Get data-attribute jquery vs javascript

.data() doesn't operate on data attributes but in internal jQuery cache. Initially if no cache record is found, the data is read from a corresponding data- attribute if one exists, but that is the end of their co-operation.

If it operated on attributes, it would be useless for its purpose because attribute values must be strings.

jQuery $(this).data() is returning old values

jQuery only reads-through to data attributes with .data - that is, the data attribute will only be inspected the first time it is accessed (and never if the first access is an assignment).

Internally, jQuery it maintains it's own 'data cache' which otherwise has no relation to data attributes. This internal cache is primed through from the DOM data attributes on the first access of a given key.

If the goal is to always read and/or mutate the DOM attributes, use the .attr method instead.

The relevant parts from https://github.com/jquery/jquery/blob/master/src/data.js are shown below.

// Attempt read from the cache - if found, there is NO reading from DOM/data-*
// The key will always be camelCased in Data
data = dataUser.get( elem, key );
if ( data !== undefined ) {
   return data;
}

// Attempt to "discover" the data in
// HTML5 custom data-* attrs
data = dataAttr( elem, key );

// ..

function dataAttr( elem, key, data ) {
    var name;

    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    if ( data === undefined && elem.nodeType === 1 ) {
        // ..

        // Make sure we set the data so it isn't changed later
        // (NOTE: This operation adds the data to the cache
        //  and prevents reading any updated data-* attribute values.)
        dataUser.set( elem, key, data );