如何编写 jQuery 小部件以将 'Hello world' 添加到选定的 div

Question

我需要一些帮助来编写 jQuery 小部件。

作为练习，我正在尝试创建一个小部件，它会在加载页面时向所选元素添加 'Hello World' 消息。

下面的代码应该将 "Hello World" 附加到 div 和 class “123”，但没有任何反应。谁能看出我做错了什么？

jQuery/javascript:

$.widget("custom.hwLoader",{

    options: { 
    clear:null
    },

    _create: function() {
        this.element;
        this.name; 
        this.namespace; 
        this.element.on("load"+this.eventNamespace,
            function(){
                $("<h1>Hello World</h1>").appendTo(this.element);
            }
        )
    },

    _setOption: function( key, value ) {

        this._super("_setOption", key, value );
    },

    _destroy: function() {
        this.element.unbind('.'+this.eventNamespace);
    }

});

HTML:

$("<div  class='addHere'></div>").appendTo("body");
$(".addHere").hwLoader();

Answer 1

可以使用jQuery文本方式：http://api.jquery.com/text/

$(document).ready(function(){
    $('#selected_element').text('Hello World');
});

这里是 fiddle：http://jsfiddle.net/7zq2kvw0/1/

并且 class 或 id 名称以字母开头更安全（请参阅此问题：What are valid values for the id attribute in HTML?）

使用小部件：

小部件工厂是一项 jQuery UI 功能。一个简单的函数会更适合这种用法。如果您真的想使用小部件，请确保您的页面上 link 同时 jQuery 和 jQuery UI 脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

在这种情况下，下面的简单代码效果很好：

$.widget("custom.HW_Loader",{
    _create: function() {
        this.element.text('Hello World');
    }
});

您可以使用 $('#element').HW_Loader();

调用小部件

实际操作如下：http://jsfiddle.net/7zq2kvw0/3/

如何编写 jQuery 小部件以将 'Hello world' 添加到选定的 div

How to write a jQuery widget to add 'Hello world' to the selected div

jquery

jquery-widgets

使用小部件：