jQuery data

HTML

<div data-company="Microsoft"></div>

JavaScript

// update both data and corresponding attribute 'data-x'
    $.fn.attrdata = function (a, b)
    {
        if (arguments.length > 1)
            this.attr('data-' + a, b);
        else if (typeof a === 'object')
            this.attr(Object.keys(a).reduce(function (obj, key)
            {
                obj['data-' + key] = a[key];
                return obj;
            }, {}));
        return this.data.apply(this, arguments);
    };
    
    // usage example:
    $("div").attrdata("company", "Apple");
    $("div").attrdata({company: "Apple"}); // also possible
    console.log($("div").data("company")); // Apple
    console.log($("div").attr("data-company")); // Apple
    console.log($("div[data-company='Apple']").length); // 1

    // selector :data(key=val)
    $.expr[':'].data = function(elem, index, match) {
      var split = match[3].split('=');
      return $(elem).data(split[0]) == split[1];
    };

    // usage example:
    $("div").attr("data-company", "Microsoft");
    $("div").data("company", "Apple");
    console.log($('div[data-company="Apple"]').length); // 0
    console.log($('div[data-company="Microsoft"]').length); // 1
    console.log($('div:data(company=Apple)').length); // 1