前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JQuery插件

JQuery插件

作者头像
用户1055830
发布2018-01-18 15:51:39
3.9K0
发布2018-01-18 15:51:39
举报
文章被收录于专栏:飞扬的花生飞扬的花生

1.页面

代码语言:javascript
复制
@{
    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.脚本

代码语言:javascript
复制
;
(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);
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-03-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档