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 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
Vue计算属性的使用
Aug 04 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
详解微信小程序的 request 封装示例
Aug 21 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
编写v-for循环的技巧汇总
Dec 01 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP里的单例类写法实例
2015/06/25 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
使用python实现BLAST
2018/02/12 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
一套Java笔试题
2016/08/20 面试题
造型师求职自荐信
2013/09/27 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
办公室经理岗位职责
2014/01/01 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
财务负责人任命书
2014/06/06 职场文书
病危通知书样本
2015/04/17 职场文书
大学推普周活动总结
2015/05/07 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电