jQuery插件制作之参数用法实例分析
本文实例讲述了jQuery插件制作之参数用法。分享给大家供大家参考。具体分析如下：
1、无参数实现文字阴影效果
jQuery.fn.shadow=function(){
returnthis.each(function(){
var$originalElement=jQuery(this);
for(vari=0;i<5;i++){
$originalElement.clone()
.css({
position:"absolute",
left:$originalElement.offset().left+i,
top:$originalElement.offset().top+i,
margin:0,
zIndex:-1,
opacity:0.1
})
.appendTo("body");
}
})
}
调用的例子：
$("h1").shadow();
2、简单的参数
jQuery.fn.shadow=function(slices,opacity,zIndex){
returnthis.each(function(){
var$originalElement=jQuery(this);
for(vari=0;i<slices;i++){
$originalElement.clone()
.css({
position:"absolute",
left:$originalElement.offset().left+i,
top:$originalElement.offset().top+i,
margin:0,
zIndex:zIndex,
opacity:opacity
})
.appendTo("body");
}
})
}
调用的例子：
$("h1").shadow(10,0.1,-1);
3、参数的映射
jQuery.fn.shadow=function(opts){
returnthis.each(function(){
var$originalElement=jQuery(this);
for(vari=0;i<opts.slices;i++){
$originalElement.clone()
.css({
position:"absolute",
left:$originalElement.offset().left+i,
top:$originalElement.offset().top+i,
margin:0,
zIndex:opts.zIndex,
opacity:opts.opacity
})
.appendTo("body");
}
})
}
调用的例子：
$("h1").shadow({
slices:5,
opacity:0.25,
zIndex:-1
});4、默认的参数值(这个是最重要的)
jQuery.fn.shadow=function(options){
vardefaults={
slices:5,
opacity:0.1,
zIndex:-1
};
//options中如果存在defaults中的值，则覆盖defaults中的值
varopts=jQuery.extend(defaults,options);
returnthis.each(function(){
var$originalElement=jQuery(this);
for(vari=0;i<opts.slices;i++){
$originalElement.clone()
.css({
position:"absolute",
left:$originalElement.offset().left+i,
top:$originalElement.offset().top+i,
margin:0,
zIndex:opts.zIndex,
opacity:opts.opacity
})
.appendTo("body");
}
})
}
调用的例子：
$("h1").shadow({
opacity:0.05
});5、回调函数
jQuery.fn.shadow=function(options){
vardefaults={
slices:5,
opacity:0.1,
zIndex:-1,
sliceOffset:function(i){
return{x:i,y:i}
}
};
//options中如果存在defaults中的值，则覆盖defaults中的值
varopts=jQuery.extend(defaults,options);
returnthis.each(function(){
var$originalElement=jQuery(this);
for(vari=0;i<opts.slices;i++){
//调用回调函数
varoffset=opts.sliceOffset(i);
$originalElement.clone()
.css({
position:"absolute",
left:$originalElement.offset().left+offset.x,
top:$originalElement.offset().top+offset.y,
margin:0,
zIndex:opts.zIndex,
opacity:opts.opacity
})
.appendTo("body");
}
})
}
调用的例子：
$("h1").shadow({
sliceOffset:function(i){
return{x:-i,y:-2*i}
}
});
6、可定制的默认值
jQuery.fn.shadow=function(options){
//默认值被放在投影插件的命名空间里了
varopts=jQuery.extend({},jQuery.fn.shadow.defaults,options);
returnthis.each(function(){
var$originalElement=jQuery(this);
for(vari=0;i<opts.slices;i++){
//调用回调函数
varoffset=opts.sliceOffset(i);
$originalElement.clone()
.css({
position:"absolute",
left:$originalElement.offset().left+offset.x,
top:$originalElement.offset().top+offset.y,
margin:0,
zIndex:opts.zIndex,
opacity:opts.opacity
})
.appendTo("body");
}
})
}
jQuery.fn.shadow.defaults={
slices:5,
opacity:0.1,
zIndex:-1,
sliceOffset:function(i){
return{x:i,y:i}
}
}
默认值被放在了命名空间里，可以通过$.fn.shadow.default直接引用。而对$.extend()的调用也必须修改，以适应这种变化。由于现在所有对.shadow()的调用都要重用defaults映射，因此不能让他$.extend()修改它，因此要将一个空映射({})作为$.extend()的第一个参数，让这个新对象成为被修改的目标。
调用方法：
jQuery.fn.shadow.defaults.slices=10;
$("h1").shadow({
sliceOffset:function(i){
return{x:-i,y:i}
}
});
7、添加选择符表达式
/*
*添加选择符表达式
*
*参数：
*element：当前的DOM元素，大多数选择符都需要这个
*index:Dom元素在结果集中的索引，这个参数对:eq()和:lt()等选择符比较有用
*matches：包含解析当前选择符的正则表达式结果的数组。通常matches[3]是这个数组中
*唯一有用的项；对于:a(b)形式的选择符而言，matches[3]项中包含着b，即圆括号中的
*文本。
*set:到目前为止匹配的整个DOM元素的集合，这个参数用的比较少。
*
*/
jQuery.extend(jQuery.expr[':'],{
'css':function(element,index,matches,set){
//修改之后的matches[3]:width<100
varparts=matches[3].split("");
varvalue=parseFloat(jQuery(element).css(parts[0]));
switch(parts[1]){
case'<':
returnvalue<parseInt(parts[2]);
case'<=':
returnvalue<=parseInt(parts[2]);
case'=':
case'==':
returnvalue==parseInt(parts[2]);
case'>=':
returnvalue>=parseInt(parts[2]);
case'>':
returnvalue>parseInt(parts[2]);
}
}
})
调用：
<divstyle="width:500px;">Desruntmollitanimidestlaborum</div> <divstyle="width:200px;">2222222</div> <divstyle="width:30px;">33333333333333333333333</div> <divstyle="width:300px;">4444444444444444</div>
$("div:css(width<100)").addClass("heighlight");
希望本文所述对大家的jQuery程序设计有所帮助。