手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery插件制作简单示例说明
jquery插件制作简单示例说明
摘要:一、先从一个简单的实例,不需要带参数的一个方法开始复制代码代码如下://创建一个匿名函数(function($){//给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); 这样调用方法

详细区别见(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)

【jquery插件制作简单示例说明】相关文章:

jQuery实现控制文字内容溢出用省略号(…)表示的方法

js+html5实现canvas绘制简单矩形的方法

Jquery中基本选择器用法实例详解

angular2使用简单介绍

JQuery中DOM事件合成用法实例分析

JQuery分屏指示器图片轮换效果实例

制作特殊字的脚本

jquery实现用户打分评分特效

jQuery的Scrollify插件实现滑动到页面下一节点

jQuery封装的tab选项卡插件分享

精品推荐
分类导航