我的Jquery笔记：插件制作与回调函数(一)

做了一个简单的插件例子，主要来学习以下功能：

1、如何建立一个jQuery插件

2、如何初始化插件，对插件中的变量进行赋值

3、如何使用回调函数返回插件执行过程中的变量

index.html

    
    
    


    我是红色

    我是绿色

    我是蓝色

    ！看我什么颜色！
    
    function alertRand(data) {
        alert(data);
    }
    $('.testBtn').click(function(event) {
        $('.pp1').myplugin();//对于pp1使用的是默认的颜色，不对colour进行赋值
        $('.pp2').myplugin({//对于pp2对clour赋值green，并使用回调函数
                'colour': 'green'
            },
            function(data) {//将回调函数作为一个参数，data为myplugin插件返回的randID值，并通过调用
                alertRand(data);//通过调用alertRand函数显示randID
            }
        );
        $('.pp3').myplugin({
            'colour': 'blue'
        });
    });
    

myplugin.js

(function($) {
    $.fn.myplugin = function(options, callback) {
        var colour = null;
        var obj = this;
        var randID = _getRandomString(5);//获取长度为5的随机字符串
        return this.each(function(index, el) {
            var settings = $.extend({
                colour: 'red'//默认为红色
            }, options);
            colour = settings.colour;//根据传入的颜色赋值给colour
            obj.css('color', colour);
            obj.after(//新建一个
来显示randID，并根据不同的颜色显示
                $('
')
                .attr('id', randID)
                .html(randID)
                .css('color', colour)
            );
            $('#' + randID).click(function(event) {//点击新创建的
然后弹出对话框显示randID
                alert('当前id:'+$(event.target).html()+'  randID:'+randID);
            });
            if (typeof callback === 'function'){//判断传入的参数是否为函数，如果为函数将randID返回
                callback(randID);
            }
        });
        /*
        *随机字符串函数
        *return String
        */
        function _getRandomString(len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
            var maxPos = $chars.length;
            var pwd = '';
            var i;
            for (i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        }
    }

})(jQuery);

网页完整效果