jquery插件制作教程 txtHover


Posted in Javascript onAugust 17, 2012

定义插件的结构骨架:

书中最开始使用的结构骨架如下:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 
<script type="text/javascript" src="Scripts/jquery.txtHover.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('#test').txtHover(); 
}); 
</script> 
</head> 
<body> 
<div id="test"> 
this is test.</div> 
</body> 
</html>

添加hover事件:
(function ($) { 
$.fn.txtHover = function () { 
return this.each(function () { 
var temp = $(this).text(); 
$(this).hover(function () { 
$(this).text('text changed!'); 
}, function () { 
$(this).text(temp); 
}); 
}); 
} 
})(jQuery);

第一个版本,当页面加载完毕之后,div的内容就被修改了,这样的设计没多大用处。我们最常用到的是,当鼠标移到到文字上面的时候产生一些变化。改进的插件添加了hover事件。首先我们把div的原始值保存在变量temp里面,当鼠标移动到div上面的时候,文字被替换,鼠标移出时,将文字替换回来。
添加自定义选项

为了方便用户更加灵活的使用,我们需要添加自定义的功能,插件代码修改:

(function ($) { 
$.fn.txtHover = function (options) { 
var defaults = { txt: 'text changed!' }; 
var opt = $.extend(defaults, options); 
return this.each(function () { 
var self = $(this); 
var temp = self.text(); 
self.hover(function () { 
self.text(opt.txt); 
}, function () { 
self.text(temp); 
}); 
}); 
} 
})(jQuery);

插件定义了一个变量defaults,设置了默认的文字信息。我们使用$.extend()(不了解这个函数的朋友可以去查阅资料)方法扩展了一个新变量opt,如果用户传入的options变量包含txt,则opt就使用用户传入的,否则就使用系统默认的。我们在系统中定义了 var self = $(this),来代替this对象。this在javascript中是个很恼人的对象,在不同函数上下文中所代表的对象会不同,将this传给一个另外的变量会避免程序出现一些错误。不熟悉的朋友很有必要好好掌握该知识点。

用户在html页面上调用插件的时候,可以自定义鼠标移到div上面时候的文字内容了。
$(document).ready(function () {

$('#test').txtHover({ txt: 'test' });
});

好了,今天的例子到此为止。

Javascript 相关文章推荐
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
详解Javascript继承的实现
Mar 25 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
IFrame跨域高度自适应实现代码
Aug 16 #Javascript
JSONP 跨域共享信息
Aug 16 #Javascript
js自执行函数的几种不同写法的比较
Aug 16 #Javascript
js三种排序算法分享
Aug 16 #Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 #Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 #Javascript
You might like
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
python处理json数据中的中文
2014/03/06 Python
Python yield 小结和实例
2014/04/25 Python
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python进行数据提取的方法总结
2016/08/22 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python实现逻辑回归的方法示例
2017/05/02 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
python 爬取小说并下载的示例
2020/12/07 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
领导干部廉政自律承诺书
2014/05/26 职场文书
电气自动化求职信
2014/06/24 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
档案工作个人总结
2015/03/03 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
python 三边测量定位的实现代码
2021/04/22 Python