1.封装对象方法的插件,这种插件是我们常用的插件,后面将会具体针对这种插件介绍,如:$("#div").parent();
2.封装全局函数的插件 如:jQuery.ajax() 3.选择器插件 如:$("ul li:eq(0)")
1.所有的对象方法(第1种)都应该附加在jQuery.fn=jQuery.prototype,而所有的全局函数都应该附加在jQuery上
2.this在插件内部,是通过选择器获取的jQuery对象,而例如click(),内部指的的DOM元素
3.应该返回一个jQuery对象,以保证插件的可链式操作
1
2
3
4
5
6
7
8
9
10
11 |
( function ($){ $.fn.extent({ jName: function (opt){ var
option={uername: "require" }; //默认的规则 option=$.extend(option,opt); return
this .each(){ //会依次匹配元素,return 返回对象,保证可链式操作 这里写插件要做的操作 } }<br> }) })(jQuery) |
以上是一个基本的对象插件的模板,这里讲解下$.extend(option,opt);如果option,opt有相同属性,opt会覆盖option的值
1
2
3 |
option={uername: "require" ,age:22}; opt={age:33}; $.extend(option,opt) //这时返回的option={ uername:"require", age:33} |
1
2
3 |
var
result=$.extend( true , {}, { name: "John" , location: {city: "Boston" ,county: "USA" } }, { last: "Resig" , location: {state: "MA" ,county: "China" } } ); |
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:
result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}
也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:
1 |
var
result=$.extend( false , {},{ name: "John" , location:{city: "Boston" ,county: "USA" } },{ last: "Resig" , location: {state: "MA" ,county: "China" } }); |
1
2
3
4
5
6 |
( function ($){ $.extend({ func: function (){ return
;} }) })(jQuery) |
1
2
3
4
5
6
7 |
( function ($){ $.extend(jQuery.expr[ ":" ],{ between: function (a,i,m){ //第1个参数,当前遍历的DOM元素,第2个参数当前遍历的DOM元素的索引值,从0开始,第3个参数用正则表达式match匹配出来的数组 return } }) })(jQuery) |
原文:http://www.cnblogs.com/zengm/p/3698022.html