jQuery datarole是一种非常常见的HTML5 data属性的使用方式，而jQuery是其最常见的JavaScript库。当开发使用jQuery的网站时，可以使用datarole来绑定事件、样式和数据，达到快速、简单、易于维护的效果。

<div data-role="hello">Hello World!</div>
<script>
$(document).ready(function(){
$('div[data-role="hello"]').addClass('text-center');
});
</script>

在上面的代码中，<div>元素使用了data-role属性，并将其设置为“hello”值。在jQuery中，可以使用选择器来选中这个<div>元素，并对其进行样式修改。在这个例子中，给它添加了text-center样式。

除了可以通过data-role属性来绑定数据和样式，还可以使用JavaScript的$().data('key', value)方法来存储和获取数据。例如：

<div id="myDiv">Hello World!</div>
<script>
$(document).ready(function(){
$('#myDiv').data('name', 'John');
var name = $('#myDiv').data('name');
alert('My name is ' + name);
});
</script>

在上面的代码中，使用$().data()方法将一个名为“name”的数据存储到<div>元素中，并通过$().data('name')方法来获取这个值，并用alert()方法弹出对话框显示这个值。

总之，jQuery datarole是一个非常方便的特性，可以大大简化代码，提高代码可读性和可维护性。