首页 > Web开发 > 详细

30分钟学会jquery插件

时间:2014-02-19 03:49:13      阅读:423      评论:0      收藏:0      [点我收藏+]

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

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

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

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

实例:

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

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

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

有什么作用:

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

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

 

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

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

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

请看一个自执行函数

bubuko.com,布布扣
(function($){

}(jQuery));
//其中传入jQuery对象
bubuko.com,布布扣

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

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

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

当中必须有实例来调用。

关于$.extend():

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

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

  1. 闭包函数营造一个单独的执行环静
bubuko.com,布布扣
(function($){

})(jQuery)
bubuko.com,布布扣

2.

使用$.fn.extend扩展jquery

bubuko.com,布布扣
(function($){
     $.fn.extend({
          "selectLink":function(options){
                  
            }
     });
})();
bubuko.com,布布扣

3.给插件添加默认参数

bubuko.com,布布扣
(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‘
     };
})();
bubuko.com,布布扣

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

bubuko.com,布布扣
(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‘ }; })();
bubuko.com,布布扣

5.定义私有方法

bubuko.com,布布扣
(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‘ }; })();
bubuko.com,布布扣

6.重写和调用

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

 

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

30分钟学会jquery插件

原文:http://www.cnblogs.com/wanglao/p/3554293.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!