技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

标签:class   style   log   it   la   sp   代码   html   c   

jQuery 有两种方式封装代码 $.extend 和 $.fn.extend,我们也称为封装插件

$.extend DEMO

// 封装
$.extend({
  say:function(options){ // options 也可以是多个参数 a, b, c
    var name= options.name|| ‘‘;
    var words = options.words || ‘‘;
    document.write(name + ‘ say: ‘ + words);
  }
})

// 调用
$.say({ // options 是多个参数时,$.say(a, b, c);
  name:‘Tom‘,
  words:‘hello‘
});
// 输出 Tom say: hello

$.fn.extend DEMO

<div id="man">man</div>
// 封装
$.fn.extend({
  talk:function(options){
    var defaults = {
        words:‘something‘
    }
    var opts = $.extend(defaults, options);
    var obj = $(this);
    obj.html(defaults.words);
  }
})

// 调用
$(‘#man‘).talk({ words:‘hi‘ });

由此可见,$.extend 可以直接调用,$.fn.extend 需要基于对象来调用

jQuery extend 实现代码封装

标签:class   style   log   it   la   sp   代码   html   c   

原文:http://www.cnblogs.com/murespace/p/5962812.html

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

广告推荐

讨论区