开发jQuery插件

最新推荐文章于 2024-09-05 09:52:23 发布

原创最新推荐文章于 2024-09-05 09:52:23 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #插件开发

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种常见的开发jQuery插件的方法：一是使用$.extend()扩展jQuery的功能；二是通过$.fn为jQuery添加新方法。同时，文章还提供了一个具体的案例，演示如何通过这两种方式实现一个简单的插件。

开发jQuery插件一般有以下两种方式:

1.通过$.extend()来扩展jQuery
2.通过$.fn 向jQuery添加新的方法

1.$.extend()
注意:这种方式无法利用jQuery强大的选择器带来的便利

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用

2.$.fn

;(function($, window, document,undefined) {
    //定义cssTree的构造函数
    var cssTree = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义cssTree的方法
    cssTree.prototype = {
        cssTreeInit: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在插件中使用cssTree对象
    $.fn.cssTreeInit = function(options) {
        //创建cssTree的实体
        var csstree = new cssTree(this, options);
        //调用其方法
        return csstree.cssTreeInit();
    }
})(jQuery, window, document);

使用方法:

 $("#box").cssTreeInit({
         "width":'100%',       //宽高不指定的话,宽度默认是父元素的100%,高度自动
         "height":"500px"                       
     });