简单的jquery小部件

时间:2012-06-22 15:12:19

标签: javascript jquery jquery-widgets

jQuery.widget("ui.test", {
    _init: function(){
        alert(this.element.innerHTML);
    }

});

当我将它附加到HTML元素时,我该怎么做呢 它会提醒innerHTML(我知道它什么都不做,只是为了理解基础知识)。

<div id="baba">ja jaj</div>
<script>
$('#baba').test();//will alert "ja jaj"
</script>

我在这里缺少什么?

我错过了什么:

我的代码实际上非常好,除了我认为this.element是一个HTML元素,而实际上它是一个jQuery对象。因此innerHTML没有做任何事情,html()在下面的答案中有效。

1 个答案:

答案 0 :(得分:0)

你错过了jQuery UI库。只需附上它,你就可以了 - http://jsfiddle.net/jUm5H/

(function($) {
    $.widget("ui.test", {
        _init: function() {
            alert( this.element.html() );
        }
    });
}(jQuery));

$('#baba').test();

更新

“为了确保您的插件不会与可能使用美元符号的其他库发生冲突,最好将jQuery传递给IIFE(立即调用的函数表达式),将其映射到美元符号所以它不能被执行范围内的另一个库覆盖。“ - source

所以这基本上只是一个很好的做法。你可以忽略它,它会起作用 - http://jsfiddle.net/jUm5H/1/但最好从一开始就以正确的方式做到这一点。它可能会在未来的项目中节省大量的调试时间和挫败感:)