30分钟学会jquery插件

jquery功能强大，基于此开发插件很方便。

1.核心方法：利用jquery内部方法进行功能的扩展。

$.extend(object) ：为JQuery 添加一个静态方法。

$.fn.extend(object) ：为JQuery实例添加一个方法。

实例：

//可以通过jquery直接点出来的。
$.extend({ fun1: function () { alert("执行方法一"); } });
$.fun1();
//依托实例调用的
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("执行方法三"); }
$(this).fun3();

为什么$.extend可以直接调出方法哪，因为js对象有一个prototype属性，什么是prototype？

从何而来：js类，与C#类似，他们都从object继承而来，而object默认有一个prototype属性，所以其他对象都集成了prototype属性。

有什么作用：

对象的继承：原型继承法。

//动物类
function Animal(){
    console.log('我能动');
}
//猫类
function Cat(){
   console.log('我能跳');  
}
//猫类要先能动，才能跳，继承动物类
Cat.prototype=new Animal();
//将构造函数重新指向自己
Cat.prototype.constructor=Cat;

js对象的继承方法通常是通过phototype来获取父类中的对象，就这样，最后的类拥有所有父类的属性和方法。

他们集合在一起组成作用域链，与它的作用域链和执行环境共同构成了闭包。

而创建闭包的一个途径就是匿名函数

请看一个自执行函数

(function($){

}(jQuery));
//其中传入jQuery对象

回到前面，$.extend()相当于给jquery类的prototype中添加一个方法。

而jQuery.fn.extend(object)就融入了执行环境的因素，比如

$.fn.extend({        
        
     alertWhileClick:function(){        
       
         $(this).click(function(){        
       
              alert($(this).val());        
          });        
        
      }        
        
});        
        
$(“#input1″).alertWhileClick(); 

当中必须有实例来调用。

关于$.extend()：

还有一个方法重载$.extend(数组a,数组b,数组c)，作用是将b的元素推入a中，然后将c的也推入其中，如果a和b有冲突，以b的为准，b和c冲突以c为准。越靠后，优先权越大。

插件开发：写一个可以判断元素中隐藏的a标签和链接的插件

1. 闭包函数营造一个单独的执行环静

(function($){

})(jQuery)

2.

使用$.fn.extend扩展jquery

(function($){
     $.fn.extend({
          "selectLink":function(options){
                  
            }
     });
})();

3.给插件添加默认参数

(function($){
     $.fn.extend({
          "selectLink":function(options){
                  var opts=$.extend({},defaults,options);
                  this.each(function(){
                          var $this=$(this);//this指的是jquery对象，这里一个是效率的需要，一个是准确性的需要，因为一个对象中this指代关系会变为指向当前对象
                          
                    });
            }
     });
     //如果用户不自定义我们就使用默认的
     var defaults={
           keyword:'http',
           base:'a'
     };
})();

4.返回遍历的每个对象，便于链式调用，同时定义公有方法

(function($){
     $.fn.extend({
          "selectLink":function(options){
                  var opts=$.extend({},defaults,options);
                  return   this.each(function(){//注意return
                          var $this=$(this);//this指的是jquery对象，这里一个是效率的需要，一个是准确性的需要，因为一个对象中this指代关系会变为指向当前对象
                          if($(this)[0].targetName="a"){
　　　　　　　　　　　　　　　　　　//执行公有方法
　　　　　　　　　　　　　　　　　　alertA($(this)[0].href);
　　　　　　　　　　　　　　　}

                    });
            }
     });
     //定义一个公共方法
     $.fn.selectLink.alertA=function(op){
         alert(op);
     };
     //如果用户不自定义我们就使用默认的
     var defaults={
           keyword:'http',
           base:'a'
     };
})();
    

5.定义私有方法

(function($){
     $.fn.extend({
          "selectLink":function(options){
                  var opts=$.extend({},defaults,options);
                  return   this.each(function(){//注意return
                          var $this=$(this);//this指的是jquery对象，这里一个是效率的需要，一个是准确性的需要，因为一个对象中this指代关系会变为指向当前对象
　　　　　　　　　　　　　　　//调用私有方法
　　　　　　　　　　　　　　　var is_a=isA(options,$this[0]);
                          if(is_a){
　　　　　　　　　　　　　　　　　　//执行公有方法
　　　　　　　　　　　　　　　　　　alertA($(this)[0].href);
　　　　　　　　　　　　　　　}

                    });
            }
     });
     //定义一个公共方法
     $.fn.selectLink.alertA=function(op){
         alert(op);
     };
　　　//私有方法
　　　function isA(options,obj){
　　　　if(obj.href.indexOf(options.keyword)>1){
　　　　　　return ture;
　　　　}else{
　　　　　　return false;
　　　　}
　　　}
     //如果用户不自定义我们就使用默认的
     var defaults={
           keyword:'http',
           base:'a'
     };
})();
    

6.重写和调用

//重写公共方法
$.fn.selectLink.alertA=function(op){
　　alert('this is '+op);
};
$("#p").selectLink({keyword:'www'});

插件可用性未经过验证，仅为了展示流程