深入理解jQuery插件开发-优快云博客

本文详细解析了jQuery插件的开发过程，包括插件内部this指针的作用、面向对象的插件案例以及如何实现插件功能。通过实例演示了如何创建、使用和优化插件。

2019独角兽企业重金招聘Python工程师标准>>>

http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
http://www.w2bc.com/Article/13951
http://www.w3cschool.cc/w3cnote/jquery-10-skill.html

this

在插件名字定义的函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。

我们已经知道this指代jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了，但此刻要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下。

$.fn.button = function(option)
    {
          //this指jquery传过来的对象
         return this.each(function()
        {
            var $this = $(this)//这里this只each获得的dom元素，所以需要用$封装一下
            var data = $this.data('zui.button')
            var options = typeof option == 'object' && option

            if (!data) $this.data('zui.button', (data = new Button(this, options)))

            if (option == 'toggle') data.toggle()
            else if (option) data.setState(option)
        })
    }

面向对象的插件案例

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

转载于:https://my.oschina.net/assange/blog/420366