jquery插件制作教程 txtHover(转载)
http://www.jb51.net/article/31082.htm
书中最开始使用的结构骨架如下：
return this.each(function(){
//code...
})
}
这种结构不是很理想，特别书中提到，为了防止冲突例子不使用$，而使用jQuery。在这里，我们使用匿名函数的方式实现插件的结构骨架，这样就可以防止可能的冲突。也希望大家好好了解下匿名函数相关的知识。
$.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.代码实现：
$.fn.txtHover=function(){
return this.each(function(){
$(this).text('text changed!');
});
}
})(jQuery);
2.如何使用：
创建一个html文件，添加jquery和插件的引用，代码如下：
<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事件：
$.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上面的时候，文字被替换，鼠标移出时，将文字替换回来。
添加自定义选项
为了方便用户更加灵活的使用，我们需要添加自定义的功能，插件代码修改：
$.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' });
}); 好了，今天的例子到此为止。
jquery插件制作教程 txtHover(转载)的更多相关文章
- WordPress插件制作教程(八): 最后总结
WordPress插件教程最后一篇,还是为大家简单的做下总结.这次插件制作教程讲的内容和知识点个人觉得不是很多,因为插件制作不单单是这些内容,它涉及的知识很多很多,不是说你会一些函数就可以做出一个好的 ...
- 【超酷超实用】CSS3可滑动跳转的分页插件制作教程
原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...
- WordPress插件制作教程(一): 如何创建一个插件
上一篇还是按照之前的教程流程,写了一篇WordPress插件制作教程概述,从这一篇开始就为大家具体讲解WordPress插件制作的内容.这一篇主要说一下插件的创建方法. 相信大家都知道插件的安装文件在 ...
- WordPress插件制作教程概述
接下来的一段时间里,开始为大家讲解WordPress插件制作系列教程,这篇主要是对WordPress插件的一些介绍和说明,还有一些我们需要注意的地方,以及需要掌握的知识. WordPress插件允许你 ...
- JQuery插件制作动态网页
运用JQuery插件制作动态网页 前 言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和move ...
- jQuery插件制作之全局函数用法实例
原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- 对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
随机推荐
- HashSet,TreeSet和LinkedHashSet
Set接口 Set不允许包含相同的元素,如果试图把两个相同元素加入同一个集合中,add方法返回false. Set判断两个对象相同不是使用==运算符,而是根据equals方法.也就是说,只要两个对象用 ...
- Web安全开发指南--文件系统
6.1.上传文件功能 简要描述 文件上传漏洞是由于文件上传功能实现代码没有对用户上传的文件进行正确处理,导致允许攻击者向服务某个目录上传文件. 解决方案 上传文件功能只对登录用户开放: 同时通过文件头 ...
- Spark编程指南V1.4.0(翻译)
Spark编程指南V1.4.0 · 简单介绍 · 接入Spark · Spark初始化 · 使用Shell · 在集群上部署代码 ...
- 严重: StandardServer.await: create[8005]:
严重: StandardServer.await: create[8005]: 2011-03-14 17:44:51| 分类: 默认分类 | 标签:tomcat java 端口 await crea ...
- security with restful
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 【实体 报错 】No serializer found for class org.hibernate.proxy.pojo.javassist.JavassistLazyInitializer and no properties discovered to create BeanSerializer
HTTP Status 500 - Could not write content: No serializer found for class org.hibernate.proxy.pojo.ja ...
- 7款Flash和Javascript网页视频播放器
Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多……. 也许你 ...
- boa cgi程序cgi_header: unable to find LFLF
ftp必须用二进制模式上传才可以 sqlite3 arm-linux-gcc hello.c -o hello.cgi -I /cgi/include -L /cgi/lib -static -lsq ...
- C++构造函数、析构函数、虚析构函数
1.构造函数 C++中的构造函数是用于初始化类的各种变量以及分配资源等.主要的注意事项是: (1)在继承关系中先初始化父类对象后初始化子类对象. (2)在一个类中按照变量的声明顺序,对类中的变量进行初 ...
- JS中字符串的相关操作
一.字符串的创建 创建一个字符串有几种方法.最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量. var myStr = "Hello, String!"; 可以用双 ...