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判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
几种tab切换详解
Feb 03 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
解决vue移动端适配问题
Dec 12 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
浅谈JavaScript 声明提升
Sep 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP中设置时区方法小结
2012/06/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
pyspark 随机森林的实现
2020/04/24 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
公司同意接收函
2014/01/13 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
高中军训感想300字
2014/03/04 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
安全施工责任书
2014/08/25 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
酒会邀请函
2015/01/31 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
opencv检测动态物体的实现
2021/07/21 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript