创建JQuery插件

Question

我已经按照教程创建了一个网站菜单，这涉及到JQuery提供一些转换。

我已经按预期工作了，但为了证明我理解这个新的代码和框架，并且为了遵循开发指南，我想将菜单代码移到插件中。

工作（非插件）版本 它出现在.ascx中，以及UL标记ID = MainMenu

<script type="text/javascript">
    NavBarMenu();
</script>

在另一个文件NavBar.js中，以下代码用于关联一些JQuery事件：

function NavBarMenu() {

    $(function() {
        var $menu = $('#MainMenu');
        var $menu_items = $menu.children('li');
        ...

版本不正常

现在创建了插件代码，从.ascx中调用NavBarMenu函数：

<script type="text/javascript">
    $("#MainMenu").NavBarMenu();
</script>

在NavBar.js中我现在有：

(function($) {

    $.fn.NavBarMenu = function() {
        var $menu_items = this.children('li');

然而， $ menu_items 变量是未填充的？

不应该这个（第二个例子）相当于 $（'＃MainMenu'）（第一个例子）

我按照这个例子，为这个指针切换了一个JQuery选择器。 http://learn.jquery.com/plugins/basic-plugin-creation/

提前致谢：D

Answer 1

必须有影响我实施的其他因素，我会重新审视它。

我已经创建了两个JSFiddle页面，作为我调查的一部分，它已经证明JQuery Selector可以在插件中交换为this指针。

小提琴细节第一个例子：http://jsfiddle.net/rL7zpr15/1/

$('input[type=button]').click( function() {
    $( "div" ).css( "background", "green" );
});

相当于

小提琴细节第二个例子：http://jsfiddle.net/hds7advx/

$.fn.greenify = function() {
    this.css( "background", "green" );
};

$('input[type=button]').click( function() {
    $( "div" ).greenify();
});