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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SpringBoot

Jquery入门

jquery [] jquery概念 jquery是JS的框架。 JS的函数库。 【】BOM BOM:Br...

1492
来自专栏听雨堂

Android新手之旅(9) 自定义的折线图

  希望实现一个折线图,但没有找到合适的控件或者代码,只有一个基本样子的,在它的基础上,进行了一些改进,改得比较灵活,可以传递参数,可以设置位置,坐标轴长度,刻...

2497
来自专栏专业duilib使用+业余界面开发

duilib自绘

1813
来自专栏Coco的专栏

innerHTML与innerText的异同

1713
来自专栏Java技术分享圈

杨老师课堂之JavaScript右下角广告弹框

953
来自专栏一“技”之长

Java开发GUI之可编辑区域 原

    Java的awt包中提供了单行的文本编辑组件TextField与多行的文本编辑区TextArea,这两个组件都是继承自TextComponent类。

842
来自专栏一枝花算不算浪漫

[jQuery学习系列四 ]4-Jquery学习四-事件操作

3839
来自专栏前端杂货铺

IE滤镜及其使用技巧

Gradient Filter和AlphaImageLoader Filter   这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜,我们...

48610
来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之列表选择控件

本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件。 在Windows Phone 8 时代,大家都会使用 LongListSelecto...

3449
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

2.1K7

扫码关注云+社区

领取腾讯云代金券