[前端] $.fn.extend() 与 $.extend 示例

jQuery开发插件的两种方法：

$.fn.extend(object); 为扩展jQuery类本身，为类添加新的方法
$.extend(obj); 给jQuery对象添加方法

 

测试$.extend()

// $.extend() 示例一
            $.extend({
                e: 14,
                f: 15,
                add: function(a, b) {
                    return a + b;
                },
                minus: function(c, d) {
                    // alert(c - d);
                    alert(this.f - this.e);   // this指对象本身
                }
            });
            alert($.add(3, 4));
            // $.minus(12, 50);
            $.minus();

 

 

 

测试$.fn.extend()

 

// $.fn.extend() 示例
            $.fn.extend({
                popText: function() {
                    alert($(this).text());
                }
            });
            $('p').popText();

 

 

在$.fn.extend() 内加入$.extent() 来合并配置，在做jquery插件的时候，使用的比较多

 

// 综合示例
            $.fn.extend({
                popHtml: function(options) {
                    var defaults = {
                        name: '张三',
                        say: function() {
                            alert(this.name);
                        }
                    }
                    var opts = $.extend({}, defaults, options);  // 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。$.extend(deep, target, obj1, obj2, objn); deep为true表示递归合并
                    opts.say();
                }
            });
            // $('p').popHtml();   打印出 张三
            /*$('p').popHtml({     打印出 李四
                name: '李四'
            });*/

            $('p').popHtml({       // 打印出 hello 张三
                say: function() {
                    alert('hello ' + this.name);
                }
            });

 

欢迎关注技术开发分享录：http://fenxianglu.cn/