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 相关文章推荐
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
js格式化时间小结
Nov 03 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
JavaScript Split()方法
Dec 18 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
python实现类的静态变量用法实例
2015/05/08 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
如何写自我鉴定
2014/03/19 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
住房抵押登记委托书
2014/09/27 职场文书
毕业生见习报告总结
2014/11/08 职场文书
学校计划生育责任书
2015/05/09 职场文书
《秋思》教学反思
2016/02/23 职场文书