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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
一文读懂ES7中的javascript修饰器
May 06 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/11/25 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
linux面试题参考答案(2)
2015/12/06 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
高级Java程序员面试要点
2013/08/02 面试题
办公室内勤工作职责
2013/12/11 职场文书
黄河象教学反思
2014/02/10 职场文书
大学运动会入场词
2014/02/22 职场文书
学校献爱心活动总结
2014/07/08 职场文书
会计工作检讨书
2015/02/19 职场文书
产品质量保证书范本
2015/02/27 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技