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 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
js实现上传图片到服务器
Apr 11 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 输出URL的快捷方式示例代码
2013/09/22 PHP
destoon数据库表说明汇总
2014/07/15 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
css配合jquery美化 select
2013/11/29 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
2020/12/19 Vue.js
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python编程argparse入门浅析
2018/02/07 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
11月升旗仪式讲话稿
2014/02/15 职场文书
2015年资料员工作总结
2015/04/25 职场文书
升学宴家长致辞
2015/07/27 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
体育部部长竞选稿
2015/11/21 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS