关闭

Jquery自定义插件

201人阅读 评论(0) 收藏 举报

转载出处:http://blog.csdn.net/bao19901210/article/details/21540137

总结:

jQuery编写插件的两种方法

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

写法:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. ;(function($){  
  2.     $.fn.extend({  
  3.         "函数名":function(自定义参数){  
  4.             //这里写插件代码  
  5.         }  
  6.     });  
  7. })(jQuery);  
  8. 或者  
  9. ;(function($){  
  10.     $.fn.函数名=function(自定义参数){  
  11.         //这里写插件代码  
  12.     }  
  13. })(jQuery);  
调用方法:$("#id").函数名(参数);


2.jQuery类级别的插件,相当于添加静态方法

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. ;(function($){  
  2.     $.extend({  
  3.         "函数名":function(自定义参数){  
  4.             //这里写插件代码  
  5.         }  
  6.     });  
  7. })(jQuery);  
  8. 或者  
  9. ;(function($){  
  10.     $.函数名=function(自定义参数){  
  11.         //这里写插件代码  
  12.     }  
  13. })(jQuery);  
调用方法:$.函数名(参数);


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代码,就不难发现:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....  //...... }; </span>  

 原来 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传入的参数值;详细说明,请点击这里

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">var settions ={validate:false,limit:5,name="foo"};  
  2. var options ={validate:true,name="bar"};  
  3. var newOptions=jQuery.extend(settings,options);  
  4. 结果为:</span>  
[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">newOptions = {validate:true,limit:5,name="bar"};  
  2.   
  3. function foo(options){  
  4.     options = jQuery.extend({  
  5.             name="bar",  
  6.             length:5,  
  7.                 dataType="xml" /*默认参数*/  
  8.         },options    /*options 为传递的参数*/  
  9.     );  
  10. }</span>  


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

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">foo({name:"a",length:4,dataType:"json"});  
  2. foo({name:"a"});  
  3. foo();</span>  

编写jQuery插件

 封装jQuery对你方法的插件,首先需要在javaScript文件里搭好框架,代码如下:
[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">;(function($){  
  2.     //这里写插件代码  
  3. })(jQuery);</span>  


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

  由于是对jQuery对象的方法扩展,因此采用扩展第1类(封装对象方法)插件的方法jQuery.fn.extend()来编写
[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">;(function($){  
  2.  $.fn.extend({  
  3.   "color":function(value){  
  4.   //这里写插件代码  
  5.   }  
  6.  });  
  7. })(jQuery);</span>  
  或者

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">;(function($){  
  2.  $.fn.color=function(value){  
  3.    //这里写插件代码  
  4.  }  
  5. })(jQuery);</span>  

  这里的方法提供一个参数value,如果调用方法时传入value,那么就用这个值来设置字体颜色,否则就是获取匹配无此的字体颜色的值
[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">;(function($){  
  2.     $.fn.extend({  
  3.         "color":function(value){  
  4.             return this.css("color",value);  
  5.         }  
  6.     });  
  7. })(jQuery);</span>  

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

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


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

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

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">;(function($){  
  2.     $.fn.extend({  
  3.         "color":function(value){  
  4.             //这里写插件代码  
  5.         },  
  6.         "border":function(value){  
  7.             //这里写插件代码  
  8.         },  
  9.         "background":function(value){  
  10.             //这里写插件代码  
  11.         }  
  12.     });  
  13. })(jQuery);</span>  

2.封装全局函数的插件

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

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

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

 jQuery代码如下:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">;(function($){  
  2.     $.extend({  
  3.         ltrim:function(text){  
  4.             return (text||"").replace(/^\s+g,"");  
  5.         },  
  6.         rtrim:function(text){  
  7.             return (text||"").replace(/\s+$/g,"");  
  8.         }  
  9.     });  
  10. })(jQuery);  
  11. 或者  
  12. ;(function($){  
  13.     $.ltrim=function(text){  
  14.         return (text||"").replace(/^\s+g,"");  
  15.     },  
  16.     $.rtrim=function(text){  
  17.         return (text||"").replace(/\s+$/g,"");  
  18.     }  
  19.       
  20. })(jQuery);</span>  

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

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

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

 调用函数:

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:12px;">$("trimTest").val(  
  2.     jQuery.trim(" test ")+"\n"+  
  3.     jQuery.ltrim(" test ")+"\n"+  
  4.     jQuery.rtrim(" test ")  
  5. );</span>  

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

3.自定义选择器

待。。。。
0
0
查看评论

jQuery自己编写插件()

引言:   在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可是要追寻 高大上的90后有为青年呢~可是该如何高大上呢?这时jQuery自定义插件开发来了,...
  • chenxi1025
  • chenxi1025
  • 2016-08-16 16:19
  • 3365

jQuery 自定义插件

原文:http://blog.csdn.net/bao19901210/article/details/21540137 总结: jQuery编写插件的两种方法 1.添加jQuery对象级的插件,是给jQuery类添加方法 写法: [javascri...
  • wd4java
  • wd4java
  • 2015-05-16 14:14
  • 315

jquery 自定义插件

;(function( $ ){ $.baiduDemo={ random : function () { var tmp=Math.random()*10000; return tmp; }, getCtx : function () { var obj=$(&...
  • xiaojin21cen
  • xiaojin21cen
  • 2016-09-19 09:04
  • 187

jquery easyui 插件开发

转自:http://my.oschina.net/gougouqihao/blog/182318 easyui 插件开发 01 (function($) { 02 /** ...
  • bruceoyqq
  • bruceoyqq
  • 2013-12-09 12:29
  • 2289

jquery自定义插件

自定义插件#javascript $(function(){ //调用你的自定义插件 $.fn.accordion = function(options) { return this.each(function() { var dts = $(this).children...
  • qq_16577739
  • qq_16577739
  • 2015-11-28 22:08
  • 180

Jquery自定义插件

/** * alert插件 */ (function($){ //全局的(不需要用到页面上标签对象)插件 // $.xxc_alert = function(alertJson){ // alert(alertJson.message); // alertJson.callBack();...
  • xuxiaocheng1
  • xuxiaocheng1
  • 2013-10-29 16:18
  • 719

jQuery自定义插件

jQuery的插件用成千上万来形容都不显夸张,如果你还没有自己写过插件,并且有兴趣自己也写个jQuery插件的话,那这篇文章或许对你会有点帮助。 这篇文章主要是介绍如何来自定义一个插件,重点是介绍如何自定义,而不是介绍插件的内容,所以笔者简单的用jQuery写了一个选项卡的Demo: 查...
  • CsethCRM
  • CsethCRM
  • 2014-02-19 09:41
  • 634

[ jQuery ] jquery 自定义插件!

转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=169 jquery学堂是一个很不错的地方。 如果想要自己学一些jquery的插件。而不想去每次都写那些复杂的函数。那么下面的方法可以帮助你。 下面就自己写一个jquery.yangzhi.js. $(...
  • yangzhihello
  • yangzhihello
  • 2012-12-29 08:46
  • 335

使用两种方式自定义jQuery插件

自定义jquery插件可以在函数级别定义也可在对象级别定义,而每种级别的插件都可以传参和不传参。 1.添加jQuery对象级的插件,是给jQuery类添加方法 写法: [javascript] view plain copy ;(function($){ ...
  • xygg0801
  • xygg0801
  • 2016-12-06 09:30
  • 1812

使用jQuery动态绑定事件插件livequery弥补live的不足

jquery1.3.2的动态绑定事件方法live不支持blur,focus,mouseenter,mouseleave,change,submit,特别是不支持blur,focus事件使我很不爽(因为我的页面需要这个功能,:)。 后来发现livequery这个插件,发现它支持blur,focus,并...
  • gundumw100
  • gundumw100
  • 2017-04-10 17:51
  • 129
    express yourself

    Life is a pleasure trip designed by you

    居敬持志,循序致精

    为善去恶致良知

    个人资料
    • 访问:100751次
    • 积分:2257
    • 等级:
    • 排名:第19626名
    • 原创:104篇
    • 转载:138篇
    • 译文:4篇
    • 评论:6条
    博客专栏
    最新评论