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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
js动态设置div的值下例子
Oct 29 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
node后端服务保活的实现
Nov 10 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
php array_map()数组函数使用说明
2011/07/12 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
js实现验证码功能
2020/07/24 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
python基础教程项目三之万能的XML
2018/04/02 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
解决python对齐错误的方法
2020/07/16 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
python单向链表实例详解
2022/05/25 Python