高效开发和使用插件
一.创建jquery插件
(1).类型
1.jquery方法
将常用的或者重复使用的功能定义为函数,后绑定到jquery对象上,从而成为jquery对象的一个扩展方法
例如parent() appendTo() addclass()方法
2.全局函数
也可以把自定义的功能函数独立附加到jquery命名空间下,从而作为jquery作用域下的一个公共函数使用。
,由于全局函数没有绑定到jquery对象上,所以不能通过选择器获取的对象上调用,需要通过jquery.fn()或者$.fn()方式进行引用
,由于全局函数没有绑定到jquery对象上,所以不能通过选择器获取的对象上调用,需要通过jquery.fn()或者$.fn()方式进行引用
3.选择器
可以自定义选择器,以满足特定环境下的选择元素的需要
(2).解析jquery插件机制
jquery.extent()和jquery.fn.extent()方法
其中jquery.extend()方法能够创建全局函数或者选择器,而jquery.fn.extent()方法能够创建jquery对象方法。
例子:jquery.extend({
minvalue:function(a,b){return a<b?a:b;}
})
$(function(){
$("p").click(function(){
var a=jquery.minvalue(a,b);
})
})
jquery.extent()和jquery.fn.extent()方法都包含一个参数,改参数仅接受名/值对结构的对象,其中名表示函数或方法名,而值表示函数体。
前者可以创建插件,还能扩展jquery对象。
合并操作,相同的属性名,后面的值覆盖前面的值
在实际的开发中,常常使用jquery.extend()方法为插件方法传递系列选项结构的参数
function fn(options){
var options=jquery.exten({
name1:value1,name2:value2,name3:value3
},options);
}
档调用该方法时,如果想传递新的参数值,就会覆盖掉默认的参数选项值,或者向函数添加新的属性和值;如果没有传递参数,则保持并使用默认值,
fn({name1:value2,name2:value3,name3:value1});//覆盖新值
fn({name4:value4,name5:value5});//添加新的选项
fn();//保持默认值
这就是jquery.extend()方法的对象合并机制
(3)创建jquery全局函数
jquery内置的很多方法都是通过全局函数实现的。
全局函数就是jquery对象的方法,实际上就是位于jquery命名空间内部的函数
共同特征,不直接操作dom元素,而是操作javascript的非元素对象,或者执行其他非对象的特定操作,如jquery的each()函数和noconflict()函数
实例:jquery:css8={
minvalue:funciton(a,b){
return a<b?a:b;
}
}
调用时 var c=jquery.css8.minvalue(a,b);
这样可以避免与别的插件发生冲突,建议在书写过程中始终使用jquery来调用jquery方法
(4)使用jquery.fn对象创建jquery对象方法
除了全局函数外,jquery中的多数功能都是通过jquery对象的方法提供的,创建全局函数只需要通过jquery对象添加属性即可,而创建jquery对象方法也可以通过jquery.fn对象添加属性来实现。实际上jquery.fn对象就是jquery.prototype原型对象的别名,使用别名更方便引用。
例子:jquer.fn.test=function(){
alert("asdfasdf");
}
匹配多个元素时,我们该如何准确指定当前元素对象呢?
javascript代码
jquery.fn.test=function(){
this.each(function(){
alert(this.nodename);
})
}
jquery代码
$(function(){
$("body *").click(function(){
$(this).test();
})
})
如果要实现行为的连写功能,应该在每个插件方法中返回一个jquery对象,除非方法需要明确返回值。返回jquery对象通常就是this所引用的对象
例子:将上面javascript代码中的第二行改为
return this.each(function(){
alert(this.nodeName);
})
jquery代码中
$(this).test().hide().height();
(5)使用extend()方法创建jquery对象方法
jquery.extend()方法能够创建全局函数,而jquery.fn.extend()方法可以创建jquery对象方法。
代码:
jquery.fn.extend({
test:function(){
return this.each(function(){
alert(this.nodeName);
});
}
})
jquery.fn.extend()方法仅包含一个参数,该参数是一个对象直接量,是以名/值对形式组成的多个属性,名称表示方法名称,而值表示函数体。因此,在这个对象直接量中可以附加多个属性,为jquery对象同时定义多个方法。
上面的方法,可以在jquery选择器中直接调用,
代码:
$(function(){
$("body *").click(function(){
$(this).test()://调用jquery对象方法
})
})
(6)创建自定义选择器
jquery选择器通过一组正则表达式来分析选择符,然后,针对解析出来的每一个选择符执行一个函数,这个函数被称为选择器函数。最后根据这个选择器函数的返回值是否为true,决定是否保留当前元素,这样就可以找到索要匹配的元素节点。