本文實例講述了jQuery插件制作之參數用法。分享給大家供大家參考。具體分析如下：
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"); } }) }調用的例子：
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"); } }) }調用的例子：
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"); } }) }調用的例子：
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"); } }) }調用的例子：
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"); } }) }調用的例子：
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()的第一個參數，讓這個新對象成為被修改的目標。
調用方法：
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>
希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
