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函数库. 据统计 ...
随机推荐
- 【原创】LogCat信息演示Activity生命周期
界面如下:注意:这是在手机.竖屏状态下! (一)1个Activity /** * 7个方法 * 测试1个Activity的生命周期 * * LogCat: ...
- 微信、小程序开发UI库--weui
一.weui可以开发微信内网页.微信小程序,二者使用的UI库不一样 1. 微信内网页样式文件为 .css文件 链接地址:https://weui.io/ weui-js库: weu ...
- Struts2 学习笔记 09 访问Web元素
我们想要访问Map类型request,session,application.真实类型HttpServletRequest,HttpSession,ServletContext的引用,并对它们进行操作 ...
- objective C中的字符串NSStirng常用操作
objective C中的字符串操作 在OC中创建字符串时,一般不使用C的方法,因为C将字符串作为字符数组,所以在操作时会有很多不方便的地方,在Cocoa中NSString集成的一些方法,可以很方便的 ...
- NFC TI TRF7970A Breakout Board for BusPirate or other HW
http://dangerousprototypes.com/forum/viewtopic.php?f=19&t=3187 Just a news about a new Hardware ...
- Javascript：拦截所有AJAX调用，重点处理服务器异常
背景 上篇文章http://www.cnblogs.com/happyframework/p/3241063.html介绍了如何以AOP的形式处理服务器异常,这让服务器端的编程逻辑变的非常整洁,本文介 ...
- serverbash漏洞修补日记——2014/09/30
近期bash漏洞在网上闹得沸沸扬扬的,我也修补一下.以防万一. 须要用到的命令: 查看操作系统版本号:cat /etc/issue 查看bash版本号:bash -version 查看操作系统是64位 ...
- easyui 隔行渐变色属性设置
1.部分JS文件 function getAgencyDealTable(begin,end,regionFlag,agencyId){ $('#reportList').datagrid({ idF ...
- 解决Spring MVC报No converter found for return value of type:class java.util.ArrayList问题
一.背景 在搭建一套Spring+SpringMVC+Mybatis(SSM)的环境(搭建步骤会在以后博客中给出),结果运行 程序时,适用@ResponseBody注解进行返回List<对象&g ...
- jquery点击click事件和blur事件冲突如何解决
最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果. 但比较头疼的是input上添加blur事件 ...