HTML中data自定义属性的使用和插件应用介绍
导读：收集整理的这篇文章主要介绍了HTML中data自定义属性的使用和插件应用介绍，觉得挺不错的，现在分享给大家，也给大家做个参考。 大家可能会经常看到一些HTML里都带有data属性，这些都是HTML5的自定义属性，可以做很多事情，直...
收集整理的这篇文章主要介绍了HTML中data自定义属性的使用和插件应用介绍，觉得挺不错的，现在分享给大家，也给大家做个参考。 大家可能会经常看到一些HTML里都带有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){
/**
* @param 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 widgetConfigJSON = (new Function("return " + _widget))();
$("#widget").Test(widgetConfigJSON);
//因为HTML中data属性是data-widget-config="{ effect:'click'} "，所以这里会调用点击事件，
如果是data-widget-config="{ effect:'mouseover'} ",则调用鼠标移上去的事件} )
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML中data自定义属性的使用和插件应用介绍
本文地址： https://pptw.com/jishu/587863.html