亚洲免费乱码视频,日韩 欧美 国产 动漫 一区,97在线观看免费视频播国产,中文字幕亚洲图片

      1. <legend id="ppnor"></legend>

      2. 
        
        <sup id="ppnor"><input id="ppnor"></input></sup>
        <s id="ppnor"></s>

        HTML中data自定義屬性的使用和插件應(yīng)用介紹

        字號:


            大家可能會經(jīng)??吹揭恍〩TML里都帶有data屬性,這些都是HTML5的自定義屬性,下面為大家簡單介紹一下使用方法,希望對你有所幫助
            大家可能會經(jīng)??吹揭恍〩TML里都帶有data屬性,這些都是HTML5的自定義屬性,可以做很多事情,直接調(diào)用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'}">這里是測試區(qū)域</div>
            代碼如下:
            //插件擴(kuò)展部分
            ;(function($){
            $.fn.extend({
            Test:function(config){
            /**
            * @param effect 效果
            * config||{} 當(dāng)有自定義屬性傳進(jìn)來時不執(zhí)行默認(rèn)值
            */
            // 設(shè)置默認(rèn)值
            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)
            代碼如下:
            //調(diào)用部分,HTML中的data屬性依賴于此
            $(function(){
            var _widget= $("#widget").attr("data-widget-config");
            // 將string轉(zhuǎn)換成json對象的方法,有兩種
            var widgetConfigJSON=eval("("+_widget+")");
            // var widgetConfigJSON = (new Function("return " + _widget))();
            $("#widget").Test(widgetConfigJSON);
            //因為HTML中data屬性是data-widget-config="{effect:'click'}",所以這里會調(diào)用點擊事件,
            如果是data-widget-config="{effect:'mouseover'}",則調(diào)用鼠標(biāo)移上去的事件})