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和插件的引用,代码如下:
代码如下: