Why does jQuery Mobile use data-role attributes instead of classes?

Why data

They could simply use role as an attribute (like other frameworks do), but this would make the resulting HTML invalid. Therefore a data- is added to every attribute name.

Why not classes

I think the main reason for that is to separate view from logic as far as it is possible. In larger projects, CSS and JavaScript are not written by the same person.