jQuery插件的编写方法-优快云博客

本文链接：https://blog.youkuaiyun.com/u013137293/article/details/51493197

本文介绍了如何编写jQuery插件，并通过具体示例展示了基于类级别和全局级别的插件编写方法。包括实现按钮计时功能及输入字符实时验证等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 插件的编写

jQuery插件的编写, 格式为:

<pre name="code" class="javascript">(function($)
 {
    $.fn.functionName = function(){} //方法的具体内容
 })(jQuery)

这个是基于类级别的方法，

调用方式为 $("").functionName(); 即可. 绝大部分情况下都是这么写的，

还有个基于jQuery全局的方法. 格式:

jQuery.plainName = 
{
   functionName : function()
  {
      //具体的实现
  }
}

基本的格式就是这个, 主要还是js能力的编写. 直接看例子

这是返回项目的名称以及端口号 . 和 java后台的basePath 是一个意思。

jQuery.YanD = 
{
 projectHost : function()
 {
 var webPathRoot = window.location.href;
 var webPathUrl =  window.location.pathname;
 var webPathUrls = webPathUrl.substring(1);
 var projectName = webPathUrl.substring(0,webPathUrls.indexOf("/")+1);
 var i = webPathRoot.indexOf(webPathUrl);
 var localhost = webPathRoot.substring(0,i);
 return (localhost + projectName);
 }
};

引入插件后，调用的话直接

jQuery.YanD.projectHost(); 即可。

基于类级别的方法中, 有的方法需要添加参数的比如一些 $().attr(' ');等等...

在编写方法时 , 代码片段:

$.fn.demo= function(options)
{
    var defaultAttr = $.extend(
       {
       'default1' : '',  //添加默认参数以及对应的值
       'default2' : ''
       }, options )   
       
}

插件的也就把js的方法抽象了更高了的一个层次, 主要就this关键词的使用

直接附上一个小例子。

这边提供了2个方法, 一个是当我们点击注册发送短信时的一个特效.一个是对填写的字符的实时验证。

当中对于具体的js实现, 方法有很多,不做详情解释。

/*
 * YanD - (jQueryplugin) is for jQuery v1.8.3
 * author : YanD
 * date   : 2015/3/09
 * jQuery 插件==封装了一些常用的功能
 * 在 jQuery 插件的编写中~ this就是一个jQuery对象 在其他的场合下 this为 dom对象
 */

//全局的插件
//返回项目的路径如:localhost:8080/HXHK/
jQuery.YanD = 
{
 projectHost : function()
 {
 var webPathRoot = window.location.href;
 var webPathUrl =  window.location.pathname;
 var webPathUrls = webPathUrl.substring(1);
 var projectName = webPathUrl.substring(0,webPathUrls.indexOf("/")+1);
 var i = webPathRoot.indexOf(webPathUrl);
 var localhost = webPathRoot.substring(0,i);
 return (localhost + projectName);
 }
};

//类级别的jQuery插件
(function($){

//按钮的计算时间--传入按钮的id和所需计算的时间 
  $.fn.Time = function(options)
  {
  	var defaultClass = $.extend(
  	 {
  	 'numbers': 0,
  	 'stepTime':1000
  	 },options);
     this.val("在" +options.numbers+ "内输入验证码");
     this.attr("disabled",true);
     var idid = this.attr("id");
     var a = options.numbers; 
     var t ; 
     t= window.setInterval(
     function(){   
     a--;
     if(a == 0){
     window.clearInterval(t);
     $("#"+idid).val("重新发送"); 
     $("#"+idid).removeAttr("disabled"); 
     }else{
     $("#"+idid).val("在" +a+ "内输入验证码");  	
     }
     },options.stepTime);
  },
//js字符的实时验证
  $.fn.valiWordNum = function(options)
  {
    var defaultClass = $.extend
    (
      {
  	  'wordCodeNum':0 ,
  	  'maxNum':10     ,
  	  "id": ""
  	  },options);
  	  var texts =  this.val().replace(/\s+/g,"");//废除空格后的文字字数
  	  if(texts.length > options.maxNum){
  	  $(this).val($(this).val().substring(0, options.maxNum + (this.val().length - texts.length)));
  	  }else{
  	  $('#'+options.id).html(options.maxNum - (texts.length));
  	  }   	  
  }
})(jQuery);

附上调用该插件完整的html 例子

<html>
	 <script src="jquery-1.8.3.js"></script>
	 <script src="YanD.js"></script>
	 <script>
	  window.onload = function()
	  {
	  	 //调用
	     $('#btn').Time({'numbers':60, 'stepTime': 1000});
	  }	
	  
	  function validateNum()
	  {
	  	//调用字数实时验证
	  	$('#area').valiWordNum({'wordCodeNum':0,'maxNum':20,'id':'num'});
	  }
	 </script>
	 <input type="button" id="btn" value="发送"></input>
	 <br/><br/><br/>
	 您还可以输入<span id="num">20</span>字<br/>
	 <textarea id="area" οnkeyup='validateNum()' οnkeydοwn='validateNum()'></textarea>
	 
</html>

ps ：欢迎加我微信，一起讨论技术，注明 csdn上看到的即可