Introduction to the use of data custom attributes in HTML and plug-in applications

<div id="widget" data-text="123456"></div>

$(function(){
var _widget = $("#widget").attr("data-text"); alert(_widget); //Because data-text="123456", it prints out 123456
})

<div id="widget" data-widget-config="{effect:'click'}">This is the test area</div>

//Plugin extension part
;(function($){
$.fn.extend({
Test:function(config){
/**
* @param effect effect
* config||{} When custom properties are passed in, the default value is not executed
*/
// Set default values
config=$.extend({
effect:'click',
},config||{});
var effect = config.effect;
var _text=config._text;
if(effect=='click'){
$(this).click(function(){
alert('this click');
})
}else if(effect=='mouseover'){
$(this).mouseover(function(){
alert("this is mouseover");
})
}
}
})
})(jQuery)

//Calling part, the data attribute in HTML depends on this
$(function(){
var _widget = $("#widget").attr("data-widget-config");
// There are two ways to convert a string into a json object
var widgetConfigJSON = eval("("+_widget+")");
// var widgetConfigJSON = (new Function("return " + _widget))();
$("#widget").Test(widgetConfigJSON);
//Because the data attribute in HTML is data-widget-config="{effect:'click'}", the click event will be called here.
If data-widget-config="{effect:'mouseover'}", the event of mouse moving over is called})