jQuery插件开发

Posted 2020-08-22 N神3

对象级别的插件开发

通过"$.fn.extend()"为原型动态挂载相关的属性。jQuery对象可以调用属性/方法。

(function($){
   
   $.fn.extend({
       
       mask:function(){
           console.log(‘mask......‘);
           this.css({background:‘#FF0000‘});
           this.attr(‘onclick‘,‘$(this).unmask()‘);
           return this;  //链式操作
       },
       
       unmask:function(){
           console.log(‘unmask......‘);
           this.css({background:‘#0000FF‘});
           this.attr(‘onclick‘,‘$(this).mask()‘);
           return this;  //链式操作
       }
       
   });
   
})(jQuery);


$(function(){
    
    $("<div style=‘width:100px;height:100px;text-align:center;display:table-cell; vertical-align:middle;‘>click me</div>").appendTo("body").mask();
    
});