zoukankan      html  css  js  c++  java
  • jQuery自定义插件

    jQuery编写插件的两种方法

    1.添加jQuery对象级的插件,是给jQuery类添加方法

    写法:

    ;(function($){
    	$.fn.extend({
    		"函数名":function(自定义参数){
    			//这里写插件代码
    		}
    	});
    })(jQuery);
    
    或者
    
    ;(function($){
    	$.fn.函数名=function(自定义参数){
    		//这里写插件代码
    	}
    })(jQuery);
    

      

    调用方法:$("#id").函数名(参数);
    

    jquery插件的种类:

     1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent()、appendTo()
    
     2.一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,jQuery的全局函数就是属于jQuery命        名空间的函数,封装全局函数的插件
    
     3.选择器插件
    

      

    jQuery插件机制

      jQuery为开发插件提拱了两个方法,分别是:

      jQuery.fn.extend(object); 给jQuery对象添加方法。

      jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法,可以理解为添加静态方法。

      这两个方法都接受一个参数,类型为Object,Object对应的"名/值对"分别代表"函数或方法体/函数主体"。

     fn 是什么东西呢?

    查看jQuery代码,就不难发现:

    jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....  //...... }; 
    

     原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然javascript没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如  我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

     jQuery.fn.extend(object), 对jQuery.prototype进行扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。即:$("#id").object();

     jQuery.extend()方法除了可以扩展jQuery对象外,还可以扩展已有的Object对象,经常被用于设置插件方法的一系列默认参数,可以很方便的用传入的参数来覆盖默认值

     jQuery.extend(object1,object2)object1默认参数值,object2传入的参数值;详细说明,请点击这里

    var settions ={validate:false,limit:5,name="foo"};
    var options ={validate:true,name="bar"};
    var newOptions=jQuery.extend(settings,options);
    

      结果为:

    newOptions = {validate:true,limit:5,name="bar"};
    
    function foo(options){
    	options = jQuery.extend({
    			name="bar",
    			length:5,
    		        dataType="xml" /*默认参数*/
    		},options	 /*options 为传递的参数*/
    	);
    }
    

    如果用户调用foo()方法的时候,在传递的参数options对象中设置了相应的值,
    那么就使用设置的值,否则使用默认值,调用方法:

    foo({name:"a",length:4,dataType:"json"});
    foo({name:"a"});
    foo();
    

      编写jQuery插件

     封装jQuery对你方法的插件,首先需要在javaScript文件里搭好框架,代码如下:

    ;(function($){
        //这里写插件代码
    })(jQuery);
    

       1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent()、appendTo()

    ;(function($){
     $.fn.extend({
      "color":function(value){
      //这里写插件代码
      }
     });
    })(jQuery);
    

        或者

    ;(function($){
     $.fn.color=function(value){
       //这里写插件代码
     }
    })(jQuery);
    

      这里的方法提供一个参数value,如果调用方法时传入value,那么就用这个值来设置字体颜色,否则就是获取匹配无此的字体颜色的值

    ;(function($){
    	$.fn.extend({
    		"color":function(value){
    			return this.css("color",value);
    		}
    	});
    })(jQuery);
    

      
      插件内部的this指向的是jQuery对象,而非普通的DOM对象。接下来注意的是,插件如果不需要返回字符串之类的特定值,应当使其具有可链接性。 

      为此,直接返回这个this这个对象,由于css()方法也会返回调用它的对象,即此外的this,因此可以将代码写成上面的形式;

      调用时可直接写成:$("div").color("red");

      另外如果要定义一组插件,可以使用如下所示写法:

    ;(function($){
    	$.fn.extend({
    		"color":function(value){
    			//这里写插件代码
    		},
    		"border":function(value){
    			//这里写插件代码
    		},
    		"background":function(value){
    			//这里写插件代码
    		}
    	});
    })(jQuery);
    

      2.封装全局函数的插件

     这类插件是在jQuery命名空间内部添加一个函数。这类插件很简单,只是普通的函数,没有特别需要注意的地方。

     例如新增两个函数,用于去除左侧和右侧的空格。

     首先构建一个Object对象,把函数名和函数都放进去,其中的名/值对分别为函数名和函数主体
     然后利用jQuery.extend()方法直接对jQuery对象进行扩展

     jQuery代码如下:

    ;(function($){
    	$.extend({
    		ltrim:function(text){
    			return (text||"").replace(/^s+g,"");
    		},
    		rtrim:function(text){
    			return (text||"").replace(/s+$/g,"");
    		}
    	});
    })(jQuery);
    或者
    ;(function($){
    	$.ltrim=function(text){
    		return (text||"").replace(/^s+g,"");
    	},
    	$.rtrim=function(text){
    		return (text||"").replace(/s+$/g,"");
    	}
    	
    })(jQuery);
    

       *(text||"")部分是用于防止传递进来的text这个字符串变量处于未定义的特殊状态,如果text是undeined,则返回字符串"",否则返回字符串text。

      这个处理是为了保证接下来的字符串替换方法replace()方法不会出错

     *运用了正则表达式替换首末的空格

     调用函数:

    $("trimTest").val(
    	jQuery.trim(" test ")+"
    "+
    	jQuery.ltrim(" test ")+"
    "+
    	jQuery.rtrim(" test ")
    );
    

     运行代码后,文本框中第一行字符串左右两侧的空格都被删除。
     第二行的字符串只有左侧的空格被删除。
     第三行的字符串只有右侧的空格被删除。

  • 相关阅读:
    ElasticSearch「1」本地安裝Elasticsearch 6.0.1 + Elasticsearch-head插件
    HDFS Erasure Coding介绍
    Cassandra VS HBase
    Hadoop入门 【1】 下载源码,构建
    HBase ProcedureV2 分析
    github创建maven项目过程
    ruby, gem install 出现网络错误
    Ketama Consisent Hash
    [转]产品经理 书目录
    [算法]动态规划之最长公共子序列
  • 原文地址:https://www.cnblogs.com/chunshu/p/6079877.html
Copyright © 2011-2022 走看看