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 相关文章推荐
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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中几种常见安全设置详解
2010/04/06 PHP
php中的常用魔术方法总结
2013/08/02 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
使用Python生成url短链接的方法
2015/05/04 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python对日志进行处理的实例代码
2018/10/06 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
内勤主管岗位职责
2014/04/03 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
2015年司法局工作总结
2015/05/22 职场文书
教师节主题班会教案
2015/08/17 职场文书
诚信高考倡议书
2019/06/24 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android