30分钟学会jquery插件

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

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

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

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

实例:

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

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

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

有什么作用:

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

30分钟学会jquery插件
//动物类
function Animal(){
    console.log(‘我能动‘);
}
//猫类
function Cat(){
   console.log(‘我能跳‘);  
}
//猫类要先能动,才能跳,继承动物类
Cat.prototype=new Animal();
//将构造函数重新指向自己
Cat.prototype.constructor=Cat;
30分钟学会jquery插件

 

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

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

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

请看一个自执行函数

30分钟学会jquery插件
(function($){

}(jQuery));
//其中传入jQuery对象
30分钟学会jquery插件

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

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

30分钟学会jquery插件
$.fn.extend({        
        
     alertWhileClick:function(){        
       
         $(this).click(function(){        
       
              alert($(this).val());        
          });        
        
      }        
        
});        
        
$(“#input1″).alertWhileClick(); 
30分钟学会jquery插件

当中必须有实例来调用。

关于$.extend():

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

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

  1. 闭包函数营造一个单独的执行环静
30分钟学会jquery插件
(function($){

})(jQuery)
30分钟学会jquery插件

2.

使用$.fn.extend扩展jquery

30分钟学会jquery插件
(function($){
     $.fn.extend({
          "selectLink":function(options){
                  
            }
     });
})();
30分钟学会jquery插件

3.给插件添加默认参数

30分钟学会jquery插件
(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‘
     };
})();
30分钟学会jquery插件

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

30分钟学会jquery插件
(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‘ }; })();
30分钟学会jquery插件

5.定义私有方法

30分钟学会jquery插件
(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‘ }; })();
30分钟学会jquery插件

6.重写和调用

30分钟学会jquery插件
//重写公共方法
$.fn.selectLink.alertA=function(op){
  alert(‘this is ‘+op);
};
$("#p").selectLink({keyword:‘www‘});
30分钟学会jquery插件

 

插件可用性未经过验证,仅为了展示流程<!--[endif]-->

30分钟学会jquery插件

上一篇:点击button先执行js在执行后台代码


下一篇:AUTOCAD——门的两种画法