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操作页面表格,元素的一些技巧
Feb 02 Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 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
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
学习php开源项目的源码指南
2014/12/21 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
javascript history对象详解
2017/02/09 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
用pandas按列合并两个文件的实例
2018/04/12 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python Django的web开发实例(入门)
2019/07/31 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
中文教师求职信
2014/02/22 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
安全生产目标责任书
2014/04/14 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
本科毕业生自荐信
2014/05/26 职场文书
欢度春节标语
2014/07/01 职场文书
财务检查整改报告
2014/11/06 职场文书
学前班教学反思
2016/02/24 职场文书