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批量设置属性readonly和disabled的方法
Jan 24 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python assert关键字原理及实例解析
2019/12/13 Python
django中related_name的用法说明
2020/05/20 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
文明和谐家庭事迹材料
2014/05/18 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
世界文化遗产导游词
2015/02/13 职场文书
英语导游欢迎词
2015/09/30 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技