有乎-价值、共享、信任

What you care about-value, sharing, trust

如何来写jQuery插件

| 阅读:1248 发表时间:2020-02-14 10:49:56 HTML5+CSS3

先来了解2个简单函数:

$.fn   用来给$对象扩展方法, 相当于JS原生的prototype 

如:$.fn.plugin_name 相当于  jQuery.prototype.plugin_name

        调用: $("#id").plugin_name() 

$.extend    而是对$类扩展方法,   相当于为$类添加“成员函数”

如:$.extend({
      add:function(x, y){ return x+y},
   }) 

调用:$.add(3, 5);

格式:

(function($){
    $.fn.plugin_name = function(options){
              $.extend(default, options);
    };
   var default ={
        param1:1,
        param2:2
   }
})(jQuery);
$("#ID").plugin_name();

实例测试:

(function($){
    $.fn.high_light = function(options){
              var options = $.extend(defaults, options);
              this.each(function(){
                         $(this).css({'color':options.color, 'cursor':options.cursor});
              })
     }
    
    var defaults = {
           color:'red',
           cursor:'pointer'
    }
})(jQuery);

测试:

$(function(){
   $("a").high_light({
        color:'blue',
        cursor:'help'
   });
})
*文章为作者独立观点,不代表【uuuho有乎】的立场
本文由【uuuho有乎】发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。