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下将字符串当函数执行的方法
Jul 13 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
python matplotlib中文显示参数设置解析
2017/12/15 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python正则表达式和元字符详解
2018/11/29 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
市场专员岗位职责
2014/02/14 职场文书
5s推行计划书
2014/05/06 职场文书
导游词之上海豫园
2019/10/24 职场文书