jquery插件制作简单示例说明
时间：2021-05-17 08:40:30|栏目：jquery|点击： 次
一、先从一个简单的实例，不需要带参数的一个方法开始
//创建一个匿名函数
(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://www.jb51.net/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://www.jb51.net/article/29591.htm）
复制代码 代码如下:
//创建一个匿名函数
(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://www.jb51.net/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://www.jb51.net/article/29591.htm）
上一篇：Jquery中使用show()与hide()方法动画显示和隐藏图片
栏 目：jquery
本文标题：jquery插件制作简单示例说明
本文地址：http://www.codeinn.net/misctech/123140.html
