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 this指针
Jul 30 Javascript
Jquery ui css framework
Jun 28 Javascript
js取得url地址参数实例
Feb 22 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python 装饰器的使用示例
2020/10/10 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
实习生的自我评价
2014/01/08 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
Python中的socket网络模块介绍
2022/07/23 Python