[转]jquery开发自定义的插件总结
本文转自：http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html
前几天在玩jquery，今天就把这几天的学习做一个总结。
首先jquery开发自定义的控件分两大类（我自己这么分的），第一就是不带参数的插件，还有一类就是带参数的jquery插件了。
先从简单的开始。首先我们要了解一下什么叫jquery，jquery是对js的一系列的分装，说白了他就是js的分装以后的产物。但是我们用jquery来实现会更加的方便。使用jquery的插件也很简单。只需要jquery的官网下载最新版本的jquery，然后再我们的网页的head下面引用一下就好了。例如：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery引用放的位子</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
<!--这里写自己插件的地方-->
</script>
</head>
这里有一点需要确定，就是jquery的引用的地方一定在你自己插件的地方前面，因为浏览器在解析你的html的时候，是从上到下的，也就是说如果你先写插件后引用jquery，那么浏览器根本就不认识你的插件中的标示符。
无参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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不带参数的jquery插件开发</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
myPlugName:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
})(jQuery);
</script>
</head> <body>
<input type="button" value="点击我" id="btn" /> </body> <script type="text/javascript">
$("#btn").myPlugName();
</script>
</html
无参的格式为：
(function($){
$.fn.extend({
myPlugName:function(){<!--myPlugName你的插件的名字，根据自己的情况来命名-->
//dosomethings
});
}
});
})(jQuery);
这里大概的解释一下，$.fn.extend是一个实例的扩展，但是$.extend是类的扩展，如果不明白多看一下解释，或者是去api.jquery.com看一下jquery的官方手册。jQuery和$是等价的，你可以认为是别名。myPlugName这个是插件的名字，根据自己的情况来命名自己的拆建吧！接着就是写一些你想要做的事情了！很简单吧！哈哈
带参数的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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($){
$.fn.hilight=function(options){
var defaults={
foreground:'red',
background:'yellow'
};
var opts = $.extend(defaults,options);
$(this).css("background-color",opts.background);
$(this).css("color",opts.foreground);
};
})(jQuery);
</script>
</head>
<body>
<div id="myDiv">This is a Params JQuery!</div>
</body>
<script type="text/javascript">
$("#myDiv").hilight({foreground:'blue'});
</script>
</html>
这里和不带参数的jquery插件差不多，但是还有略微的不同，最后$("#myDiv").hilight({foreground:'blue'});来给jquery传递参数！如果不写的话，那就用jquery自带的默认的值。jquery插件其中的一个标准模板为：
(function($){
$.fn.hilight=function(options){
var defaults={
foreground:'red',
background:'yellow'
};
var opts = $.extend(defaults,options);
//dosomethings
};
})(jQuery);
这里需要注意一句话，var opts = $.extend(defaults,options);这句话的意思是吧defaults的属性和options的属性合并并保存到opts中。不懂的话参考：http://api.jquery.com/jQuery.extend/
这里当然标准的模板不是单单上面这么一种还有很多种，我只是整理了一种为初学者学习！
最后请允许我拷贝一段话，希望对你有用：
jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JS库插件混淆。
所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号，以免他人的不规范代码给插件带来影响。
所有的方法或函数插件，都应当以分号结尾，以免压缩时出现问题除非插件需要返回的是一些需要获取的变量，插件应该返回一个jQuery对象，以保证插件的可链式操作。
利于jQuery.extend()方法设置插件方法的默认参数，增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样,内部的this指向的是DOM元素。
Stallman 先生认为最大的快乐是让自己发展的软件让大家来使用了！
[转]jquery开发自定义的插件总结的更多相关文章
- jquery开发自定义的插件总结
1.第一种方式,有元素的插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- jQuery 开发一个简易插件
jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- jQuery开发自定义插件 $.extend()与$.fn.extend()
jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...
- JQuery开发工具和插件
最近的研究jquery.为大家介绍几款开发工具.能够帮助你提高开发的效率. 1.Dreamweaver Dreamweaver是建立在WEB站点和应用程序的专业工具. 将可视化工具.应用程序开发功能和 ...
- 如何用uniapp+vue开发自定义相机插件——拍照+录像功能
调用手机的相机功能并实现拍照和录像是很多APP与插件都必不可少的一个功能,今天智密科技就来分享一下如何基于uniapp + vue实现自定义相机界面,并且实现: 1: 自定义拍照 2: 自定义录像 3 ...
- 基于jQuery开发的手风琴插件 jquery.accordion.js
1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码: /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...
- 使用jQuery开发dialog对话框插件
1.插件使用 首先引入 jquery 库,然后引入 dialog.js.dialog.css,如下: <script type="text/javascript" src=& ...
随机推荐
- Play 中如何使用 Ajax
Play在内部使用了 jQuery 这个JavaScript库,让我们能够非常方便的进行Ajax操作.同时,为了能在JavaScript中方便地生成某个action对应的Url,Play还提供了一个 ...
- MongoDB的内置角色 Built-In Roles
关于芒果的权限控制说白了就是定义 Role(角色) 来控制对数据库进行的操作(调用的方法比如查询方法find). 系统内置的Role分为 以下几大类: Database User Roles 这个是针 ...
- jQuery cbpContentSlider 滑动切换
cbpContentSlider是一款选项卡插件,只要按照以下html结构就可以自动生成菜单切换内容特效. 在线实例 实例演示 使用方法 <div id="cbp-contentsli ...
- Heatmap.js v2.0 – 最强大的 Web 动态热图
Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示.Heatmap.js 这个 JavaScript 库可以实现 ...
- Eclipse 寻找迷失的ID
这一篇会介绍用一种蠢的办法找拓展点常量ID. 1.打开IDE,之后什么都不干,直接关闭IDE,将当前工作区间(workspace)上的文件.metadata\.plugins\org.eclipse. ...
- CSS3 学习笔记
border-radius 圆角是做网页永远绕不过的话题,以前基本是通过背景图片做的,有了 CSS3 以后通过属性就 能够搞定,我们可以通过 border-radius 设置元素的圆角半径. bord ...
- javascript --- 设计模式之创造者模式
在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一起的算法确相对稳定.如何应 ...
- SharePoint 2013 列表关于大数据的测试<二>
1.给测试列表添加查阅项字段,100个,代码如下: 2.插入测试数据的方法,注意查阅项字段的格式,代码如下: 3.插入10w条数据,时间花费如下(不建议List[LISTNAME].Items.Add ...
- ZeroMq安装包的生成【ubuntu10】
生成方法添加源sudo add-apt-repository ppa:chris-lea/zeromqsudo add-apt-repository ppa:chris-lea/libpgmsudo ...
- Hibernate3注解[转]
Hibernate3注解 收藏 1.@Entity(name="EntityName") 必须,name为可选,对应数据库中一的个表 2.@Table(name="&qu ...