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中的数学函数
Apr 04 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
JS二分查找算法详解
Nov 01 Javascript
详解puppeteer使用代理
Dec 27 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
Vue之封装公用变量以及实现方式
Jul 31 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
Javascript Objects详解
2014/09/04 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python使用scrapy解析js示例
2014/01/23 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
户外拓展活动方案
2014/02/11 职场文书
单位工作证明范文
2014/09/14 职场文书
文化大革命观后感
2015/06/17 职场文书
简爱读书笔记
2015/06/26 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis