现在位置首页 / 项目实战 /正文

Jquery 自定义插件开发教程

作者: IT小兵 | 2014年3月8日| 热度:℃ | 评论: |参与:

一直用jQuery做一些js的操作和函数,但是一直没有真正写过一个插件。

从这篇开始学习和实际开发一些插件。

jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法;另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

1.对JQuery自身的扩展插件

这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.扩展函数名()的方式直接使用。

$.extend(target, [object1], [objectN])

该方法主要用于合并两个或更多对象的内容(属性)到第一个对象,并返回合并后的第一对象。如果该方法只有一个参数target,则该参数将扩展jQuery的命名空间,即作为静态方法挂在jQuery全局对象下,如jQuery里的$.ajax、$.getJSON全局函数等:

格式如下:

$.extend({
函数名:function(data){};

   })

调用方式
$.函数名();

$.extend({
    TestJs: function (table) {
        var tb = table;
        //背景图片
        $(tb).find("tr:lt(2)").css({ "color": "#055A78", 'background-image': 'url("bg.png")' });
        //文字居中
        $(tb).find("td,th").css({ "text-align": "center" });
        //奇偶变色
        $(tb).find("tr:gt(1):odd").css("backgroundColor", "white");
        $(tb).find("tr:gt(1):even").css("backgroundColor", "#E5F2F8");
        //tr事件
        $(tb).find("tr").mouseover(function () {
            $(this).css("cursor", "default");
        }).mouseout(function () {
            $(this).find("td:eq(1)").css("color", "black");
        }).click(function () {
            $(tb).find("tr:gt(1):odd").css("backgroundColor", "white");
            $(tb).find("tr:gt(1):even").css("backgroundColor", "#E5F2F8");
            $(this).css("backgroundColor", "#9AC2E5");
        })
        //车次所在列每个td的事件
        $(tb).find("tr td:eq(1)").wrapInner('<a style="color:black;text-decoration:none"></a>')
        .children()
        .mouseover(function () 
        {
            $(this).css("color", "red");
        }).mouseout(function () {
            $(this).css("color", "black");
        })
    }
});

调用方式:

<script type="text/javascript">
    $(function () {
         $("#setStyle").click(function () {  
         //extend 扩展插件
         $.TestJs("#tb1");
         
        })
    });
</script>

2.对HTML标记或页面元素进行扩展

这种方法需要引用经过JQuery包装的页面元素。如:$("#tb").Method();

$.fn.extend(target)

在jQuery中,$.fn本质上是等于jQuery的原型,即$.fn = $.prototype, 所以该方法实际上是为jQuery原型添加方法,即把target对象的方法添加到jQuery原型中去,这样jQuery对象实例就可以访问添加的方法了,这也是jQuery插件开发常用的方法,特别是添加多个接口时。

代码示例:

(function ($) {
    $.fn.HelpTest = function (options) {     
      //要改变的就是HelpTest,这是你的jquery函数的名称[在你的html中要调用这个函数的时候就得用到这个名称],
                                               //其他的就不需要进行改变了。
        var defaults = {                    
           //var defaults{ 这里面是你的这个函数的参数的默认值 }        
            helptext: "default help",
            tmpWidth:"200px"
        }
        var options = $.extend(defaults, options);  
        //这句话是死的,它的意思就是说,若你在html中调用这个插件的时候,若是没有传入参数的值得话,
                                                  
    //那么我就用defalut里面定义好的参数,否则就用你传入的参数的值,[注意]:下面若是要用到参数的话,
                                                  
          //就得使用[options.参数名]如:options.helpText  
        $(this).mouseover(function (e) {         
        //添加this的mousemove事件,就是说,哪个html元素调用了我的这个插件,那么我就给他添加mousemove事件
            alert("mouser over");
        })
    }
})(jQuery);

调用方式:

<script type="text/javascript">
    $(function () {
        $("#tb1").HelpTest();
    });
</script>

二、注意

jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JavaScript库插件混淆。


转发注明:IT分享

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询