jQuery插件的制作之方法的参数 - 日理万妓 2022-01-16 03:38 243阅读 0赞 [2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 1、无参数实现文字阴影效果 jQuery.fn.shadow =function(){ return this.each(function(){ var $originalElement = jQuery(this); for(var i = 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){ return this.each(function(){ var $originalElement = jQuery(this); for(var i = 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){ return this.each(function(){ var $originalElement = jQuery(this); for(var i = 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){ var defaults = { slices : 5, opacity : 0.1, zIndex : -1 }; //options中如果存在defaults中的值,则覆盖defaults中的值 var opts = jQuery.extend(defaults,options); return this.each(function(){ var $originalElement = jQuery(this); for(var i = 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){ var defaults = { slices : 5, opacity : 0.1, zIndex : -1, sliceOffset : function(i){ return {x:i,y:i} } }; //options中如果存在defaults中的值,则覆盖defaults中的值 var opts = jQuery.extend(defaults,options); return this.each(function(){ var $originalElement = jQuery(this); for(var i = 0;i < opts.slices;i++){ //调用回调函数 var offset = 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){ //默认值被放在投影插件的命名空间里了 var opts =jQuery.extend({},jQuery.fn.shadow.defaults,options); return this.each(function(){ var $originalElement = jQuery(this); for(var i = 0;i < opts.slices;i++){ //调用回调函数 var offset = 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 var parts = matches[3].split(""); var value =parseFloat(jQuery(element).css(parts[0])); switch(parts[1]){ case '<' : return value <parseInt(parts[2]); case '<=' : return value <=parseInt(parts[2]); case '=' : case '==' : return value ==parseInt(parts[2]); case '>=' : return value >= parseInt(parts[2]); case '>' : return value >parseInt(parts[2]); } } }) 调用: <divstyle="width: 500px;">Desrunt mollit anim id estlaborum</div> <divstyle="width: 200px;">2222222</div> <divstyle="width:30px;">33333333333333333333333</div> <divstyle="width: 300px;">4444444444444444</div> $("div:css(width< 100)").addClass("heighlight"); 转载于:https://my.oschina.net/u/947065/blog/786672 [2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697 [hot3.png]: /images/20220114/cdd7c82eaa6b4436ab9f296d7c84d5e0.png
还没有评论,来说两句吧...