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 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
Yii2单元测试用法示例
2016/11/12 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue根据值给予不同class的实例
2018/09/29 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python实现神经网络感知器算法
2017/12/20 Python
wxPython之解决闪烁的问题
2018/01/15 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
晚归检讨书
2014/02/19 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
植物园观后感
2015/06/11 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫