JQuery插件

1.页面

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<ul id="ul">
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
    <li>第五行</li>
    <li>第六行</li>
</ul>


<ul id="ul2">
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
    <li>第五行</li>
    <li>第六行</li>
</ul>
<script>
    $(function ()
    {
        $.hello("CallmeYhz");
        $.log("你进入了页面");


        $("#ul li").click(function ()
        {
            $(this).Color();
        })

        $("#ul2 li").click(function () {
            $(this).Color2({
                color: "blue",
                append:"自定义插入内容成功"
            });
        })

    })
</script>

<!--引用自己的插件库><!-->
<script src="~/Scripts/jquery_plug_custom.js"></script>

2.脚本

;
(function ($) {
    
    $.extend({
        //问好
        hello: function (name) {
            alert("你好啊!---" + name);
        },
        //测试日志打印
        log: function (message) {
            var now = new Date(),
                y = now.getFullYear(),
                m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
                d = now.getDate(),
                h = now.getHours(),
                min = now.getMinutes(),
                s = now.getSeconds(),
                time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
            console.log(time + ' My App: ' + message);
        }
    });


    //拓展jquery对象的方法（无参数）
    $.fn.Color = function ()
    {
        this.each(function (index, ele) {
            $(this)
                .css("color", "red")
                .append("我居然被点击了")
            
        });      
    }

    //拓展jquery对象的方法（有参数）
    $.fn.Color2 = function (options) {
        var defaultStyle={
            color: "red",
            append: "我居然被点击了"
        }
        var setting = $.extend({}, defaultStyle, options);

       
        this.each(function (index, ele) {
            $(ele).css("color", setting.color);
            $(ele).append(setting.append);
        });
    };   
   
})(jQuery);