jquery插件制作简单示例说明
程序员文章站
2024-03-30 19:56:51
一、先从一个简单的实例,不需要带参数的一个方法开始
代码如下:
//创建一个匿名函数
(function($){
//给jquery附加一个新的方法(详细见备注1)
$.fn.extend({
/...
一、先从一个简单的实例,不需要带参数的一个方法开始
代码如下:
//创建一个匿名函数
(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); 这样调用方法。
二、有参数的
. 代码如下:
//创建一个匿名函数
(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的结构和值都没有变化。
上一篇: CSS3之背景尺寸Background-size使用介绍
下一篇: 登录注册含验证码
推荐阅读
-
jquery插件制作简单示例说明
-
jQuery插件pagination参数使用说明 (转) jQuerypagination
-
springmvc利用jquery.form插件异步上传文件示例
-
asp.net中一款极为简单实用的图表插件(jquery)
-
springmvc利用jquery.form插件异步上传文件示例
-
asp.net中一款极为简单实用的图表插件(jquery)
-
JQuery通过简单示例比较trigger()与triggerHandler()的区别
-
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
-
jquery提交form表单简单示例分享
-
jQuery超简单遮罩层实现方法示例