jquery插件制作简单示例说明_jquery-js教程-PHP中文网

jquery插件制作简单示例说明_jquery

php中文网

发布： 2016-05-16 17:56:50

原创

1184人浏览过

一、先从一个简单的实例，不需要带参数的一个方法开始

网络游戏公司官网模板

网络游戏公司官网模板采用dd_belatedPNG.js和jquery.1.8.0.min.js插件制作，简单干净，适合小型网络游戏科技公司使用，全套网站模板，包含首页、公司信息、案例展示、详细内容页等网站模板页面。

147

查看详情

复制代码代码如下:

 
//创建一个匿名函数 
(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); 这样调用方法
详细区别见（http://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的结构和值都没有变化
详细区别见（http://www.jb51.net/article/29591.htm）

大家都在看：

JavaScript设计模式_状态模式 JavaScript性能调优_防抖与节流函数式响应式JavaScript_Cycle.js原理 JavaScript数据绑定_双向绑定原理实现 JavaScriptBabel配置_语法转换与polyfill注入策略