脚本宝典收集整理的这篇文章主要介绍了HTML中data自定义属性的使用和插件应用介绍，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
大家可能会经常看到一些HT
ML里都带有data属性，这些都是HTML5的自定义属性，可以做很多事情，直接调用JS十分方便，虽然是HTML5的属性，但好在
jquery通用的，所以基本在所有浏览器里都是可以
正常使用的，包括低版本的IE。下面为大家
简单介绍一下使用方法：
1、简单使用
<div id="widget" data
-text="123456"></div>
$(function(){
VAR _widget= $("
#widget").attr("data-text"); alert(_widget);//因为data-text="123456"，所以打印出123456
})
2、配合$.fn.extend使用，编写插件
<div id="widget" data-widget-
config="{effect:'click'}">这里是测试区域</div>
//插件扩展部分
;(function($){
$.fn.extend({
test:function(config){
/**
* @par
am effect 效果
* config||{} 当有自定义属性传进来时不执行默认值
*/
// 设置默认值
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)
//调用部分，HTML中的data属性依赖于此
$(function(){
var _widget= $("#widget").attr("data-widget-config");
// 将string转换成json对象的方法，有两种
var widgetConfigJSON=eval("("+_widget+")");
// var widgetConfig
JSON = (new Function("return " + _widget))();
$("#widget").Test(widgetConfigJSON);
//因为HTML中data属性是data-widget-config="{effect:'click'}"，所以这里会调用
点击事件，
如果是data-widget-config="{effect:'mouseover'}",则调用鼠标移上去的事件})
脚本宝典总结
以上是脚本宝典为你收集整理的HTML中data自定义属性的使用和插件应用介绍全部内容，希望文章能够帮你解决HTML中data自定义属性的使用和插件应用介绍所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。