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 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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函数
2006/10/09 PHP
php字符串截取问题
2006/11/28 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP队列用法实例
2014/11/05 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
关于Python解包知识点总结
2020/05/05 Python
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
Java程序员面试90题
2013/10/19 面试题
社区学习雷锋活动总结
2014/04/25 职场文书
护士工作失误检讨书
2014/09/14 职场文书
立案决定书范文
2015/06/24 职场文书
创业计划书之农家乐
2019/10/09 职场文书
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python