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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
js子页面获取父页面数据示例
May 15 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 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
杏林同学录(二)
2006/10/09 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
在Python中定义和使用抽象类的方法
2016/06/30 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python 实现两个npy档案合并
2020/07/01 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
经贸韩语专业大学生职业规划
2014/02/14 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
python 单机五子棋对战游戏
2022/04/28 Python