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程序设计有所帮助。