jQuery种类
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) |