jquery插件制作简单示例说明


Posted in Javascript onFebruary 03, 2012

一、先从一个简单的实例,不需要带参数的一个方法开始

//创建一个匿名函数 
(function($){ 
//给jQuery附加一个新的方法(详细见备注1) 
$.fn.extend({ 
//插件的名字 
MyFirstName: function() { 
//迭代当前匹配元素集合 
return this.each(function() { 
var obj = $(this); 
//自己的代码 
}); 
} 
}); 
)(jQuery);

备注1:理解$.fn.extend和$.extend的区别,大概的说前者是将MyFirstName这个方法合并到jquery的实例对象中,例如$(“#txtmy”).add(3,4)这样调用方法,后者是将MyFirstName这个方法合并到jquery的全局对象中,例如$.add(3,4); 这样调用方法
详细区别见(https://3water.com/article/29590.htm)

二、有参数的

//创建一个匿名函数 
(function($){ 
//给jQuery附加一个新的方法(详细见备注1) 
$.fn.extend({ 
//插件的名字 
MyFirstName: function() { 
//定义默认参数 
Var parms={ 
Parms1:1, 
Parms2:2 
} 
//合并用户传的参数和默认参数,返回给options(详细见备注2) 
var options = $.extend(defaults, options); 
//迭代当前匹配元素集合 
return this.each(function() { 
//把合并后的参数赋值给o 
var o= options; 
//迭代当前匹配元素 
var obj = $(this); 
//自己的代码 
}); 
} 
}); 
)(jQuery);

备注2:var options = $.extend(defaults, options); 意思是把defaults和options合并,如果后者有和前者名称一样的元素,后者覆盖前者,然后合并给defaults,然后defaults赋值给options,如果是var options = $.extend({},defaults, options);那么是把前者和后者合并给{}这个参数,然后赋值给options,defaluts的结构和值都没有变化
详细区别见(https://3water.com/article/29591.htm)
Javascript 相关文章推荐
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
js Array.slice的8种不同用法示例
Jul 10 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 #Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 #Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 #Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 #Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 #Javascript
You might like
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP可变变量学习小结
2015/11/29 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
select标签设置默认选中的选项方法
2018/03/02 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python实现黑客字幕雨效果
2018/06/21 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
tensorflow多维张量计算实例
2020/02/11 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
会议开场欢迎词
2014/01/15 职场文书
《中华少年》教学反思
2014/02/15 职场文书
土木工程专业推荐信
2014/02/19 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers