当前位置:Gxlcms > JavaScript > jquery插件制作教程txtHover_jquery

jquery插件制作教程txtHover_jquery

时间:2021-07-01 10:21:17 帮助过:24人阅读

定义插件的结构骨架:
  书中最开始使用的结构骨架如下:
代码如下:

jQuery.fn.fluginmane=function(){
  return this.each(function(){
    //code...
  })
}  

这种结构不是很理想,特别书中提到,为了防止冲突例子不使用$,而使用jQuery。在这里,我们使用匿名函数的方式实现插件的结构骨架,这样就可以防止可能的冲突。也希望大家好好了解下匿名函数相关的知识。
代码如下:

(function($){
  $.fn.fluginname=function(){
    return this.each(function(){
      //code...
    });
  }
})(jQuery);

注意点:
  1.为了统一和规范,我们的插件文件都将以jquery.fluginname.js的形式命名(fluginname代表你插件的名字)。
  2.我们使用到的函数都需要是私有的,不能被外部访问到,这样可保证插件不会受到外部的影响和干扰(匿名函数已经保证了这点)。
  3.允许用户使用options控制插件的行为。
  4.默认的options允许外部访问,这样用户就可以用最少的代码实现自定义化。
  5.this.each()会遍历所有符合要求的对象,他本身是个jquery对象,插件最后返回该对象。其实通过这种方式就实现了javascript的链式模式。
我们的第一个插件:txtHover
  1.代码实现:
代码如下:

(function($){
  $.fn.txtHover=function(){
    return this.each(function(){
      $(this).text('text changed!');
    });
  }
})(jQuery);

2.如何使用:
  创建一个html文件,添加jquery和插件的引用,代码如下:
代码如下: