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 常用函数库详解
Oct 21 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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的简单采集数据入库程序
2014/07/30 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
python实现k-means聚类算法
2018/02/23 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
文明餐桌活动方案
2014/02/11 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
无毒社区工作方案
2014/05/23 职场文书
刑事代理授权委托书
2014/09/17 职场文书
天下第一关导游词
2015/02/06 职场文书
python实现简单的井字棋
2021/05/26 Python
Python 如何实现文件自动去重
2021/06/02 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫