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函数库. 据统计 ...
随机推荐
- leetcode87. Scramble String
leetcode87. Scramble String 题意: 给定一个字符串s1,我们可以通过将它分解为两个非空子字符串来表示为二叉树. 思路: 递归解法 对于每对s1,s2. 在s1某处切一刀,s ...
- Linux知识（1）----U盘安装Ubantu14.04系统
由于需要用到ROS(Robot Operating System)机器人操作系统,该系统是基于Linux系统Ubantu14.04的,第一次安装接触Linux点点生惧,但我知道并没那么难弄,况且还是U ...
- webstrom内置压缩工具YUI-compressor详解
压缩工具层次不穷,各有优点,选择适合的压缩工具为将来做项目开发使用是一件很重要的事情!!在这介绍YUI-compressor 英文官网:http://yui.github.io/yuicompress ...
- Spring构造方法注入类型歧义
在Spring框架中,当一个类包含多个构造函数带的参数相同,它总是会造成构造函数注入参数类型歧义的问题. 问题 让我们来看看这个客户 bean 实例.它包含两个构造方法,均接受3个不同的数据类型参数. ...
- 百度王一男： DevOps 的前提是拆掉业务-开发-测试-运维中间的三面墙
这是一个创建于 375 天前的主题,其中的信息可能已经有所发展或是发生改变. 由数人云.优维科技.中生代社区联合发起的 系列 Meetup < DevOps&SRE 超越传统运维之道&g ...
- Qt Creator的下载、安装及试用
1.试用环境及版本介绍:本文介绍的是windows桌面平台下使用Qt4.7.2和Qt Creator2.1.0,其他操作系统和版本在阅读时请留意. 2.下载: 从http://get.qt.nokia ...
- Java中23种经典设计模式详解
Java中23种设计模式目录1. 设计模式 31.1 创建型模式 41.1.1 工厂方法 41.1.2 抽象工厂 61.1.3 建造者模式 101.1.4 单态模式 131.1.5 原型模式 151. ...
- eclipse 中添加自定义 classpath 的方法，以及 javac 和 java 的一些使用细节
目标: 将 ~/java 加入classpath eclipse: 右键选中 Project, Properties, Java Build Path, Libraries, Add External ...
- 数学图形(1.28) EPI线
貌似由双曲线组成的图形.有时会像个自行车的轮子. 相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 #http://www.m ...
- go语言基础之for循环
1.for 的用法 示例: package main //必须有一个main包 import "fmt" func main() { //for 初始化条件 ; 判断条件 ; 条件 ...