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 条评论
登录 后参与评论

相关文章

  • ASP.MVC时间类型json数据处理

          服务端返回DateTime属性如果用自带的json方法返回的数据如下: ? 有2种办法解决一种是采用服务端解决方案,一种是使用前端解决方案 1.前端...

    用户1055830
  • 在ASP.MVC中使用Ajax

          Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近。可以更自由、更灵活的去控制HT...

    用户1055830
  • Asp.Mvc中的text实现 辅助用户输入 灰色字体

          在开发Web应用程序中经常需要用户在文本框输入信息,为了提高程序人性化设置以及用户体验效果常常需要在文本框中显示灰色字体辅助用户输入 如: ? "文...

    用户1055830
  • jquery获取父级一级节点的序号

    结构为:          <ul id="zdcd" style="display:none">             <li>              ...

    用户1075292
  • 界面组件之导航菜单备案

    <li><a href="#" rel="prev">prev</a></li>

    小蔚
  • 第21天:京东页面轮播图

    半指温柔乐
  • 如何将文章列表用<li>分两列显示

      我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们?   其实相对比较简单,用几行css样...

    ytkah
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠
  • 算法基础

    人生不如戏
  • Pug迭代

    听着music睡

扫码关注云+社区

领取腾讯云代金券