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面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
JavaScript继承方式实例
Oct 29 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
浅析php数据类型转换
2014/01/09 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
我的javascript 函数链之演变
2011/04/07 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
jupyter安装小结
2016/03/13 Python
Python连接DB2数据库
2016/08/27 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python如何实现定时器功能
2020/05/28 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
数学专业推荐信范文
2013/11/21 职场文书
销售主管竞聘书
2014/03/31 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
2014年减负工作总结
2014/12/10 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
基于Python实现西西成语接龙小助手
2022/08/05 Golang