jQuery插件制作之參數(shù)用法實(shí)例分析

更新時(shí)間：2015年06月01日 15:08:20 作者：天使小寶

這篇文章主要介紹了jQuery插件制作之參數(shù)用法,以實(shí)例形式較為詳細(xì)的分析了jQuery插件制作過程中參數(shù)的相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery插件制作之參數(shù)用法。分享給大家供大家參考。具體分析如下：

1、無參數(shù)實(shí)現(xiàn)文字陰影效果

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"); 
  } 
 }) 
}

調(diào)用的例子：

復(fù)制代碼代碼如下:

$("h1").shadow();

2、簡單的參數(shù)

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"); 
  } 
 }) 
}

調(diào)用的例子：

復(fù)制代碼代碼如下:

$("h1").shadow(10,0.1,-1);

3、參數(shù)的映射

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"); 
  } 
 }) 
}

調(diào)用的例子：

復(fù)制代碼代碼如下:

$("h1").shadow({

    slices : 5,

    opacity : 0.25,

    zIndex : -1

});

4、默認(rèn)的參數(shù)值(這個(gè)是最重要的)

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"); 
  } 
 }) 
}

調(diào)用的例子：

復(fù)制代碼代碼如下:

$("h1").shadow({

    opacity : 0.05

});

5、回調(diào)函數(shù)

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++){ 
   //調(diào)用回調(diào)函數(shù) 
   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"); 
  } 
 }) 
}

調(diào)用的例子：

復(fù)制代碼代碼如下:

$("h1").shadow({

    sliceOffset : function(i){

       return {x : -i,y : -2 * i}

    }

});

6、可定制的默認(rèn)值

jQuery.fn.shadow =function(options){ 
 //默認(rèn)值被放在投影插件的命名空間里了 
 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++){ 
   //調(diào)用回調(diào)函數(shù) 
   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} 
 } 
}

默認(rèn)值被放在了命名空間里，可以通過$.fn.shadow.default直接引用。而對$.extend()的調(diào)用也必須修改，以適應(yīng)這種變化。由于現(xiàn)在所有對.shadow()的調(diào)用都要重用defaults映射，因此不能讓他$.extend()修改它，因此要將一個(gè)空映射({})作為$.extend()的第一個(gè)參數(shù)，讓這個(gè)新對象成為被修改的目標(biāo)。

調(diào)用方法：

復(fù)制代碼代碼如下:

jQuery.fn.shadow.defaults.slices= 10;

$("h1").shadow({

    sliceOffset : function(i){

       return { x : -i, y : i}

    }

});

7、添加選擇符表達(dá)式

/* 
 *添加選擇符表達(dá)式 
 * 
 * 參數(shù)： 
 *  element：當(dāng)前的DOM元素，大多數(shù)選擇符都需要這個(gè) 
 *  index:Dom元素在結(jié)果集中的索引，這個(gè)參數(shù)對:eq()和:lt()等選擇符比較有用 
 *  matches：包含解析當(dāng)前選擇符的正則表達(dá)式結(jié)果的數(shù)組。通常matches[3]是這個(gè)數(shù)組中 
 *    唯一有用的項(xiàng)；對于:a(b)形式的選擇符而言，matches[3]項(xiàng)中包含著b，即圓括號中的 
 *    文本。 
 *  set:到目前為止匹配的整個(gè)DOM元素的集合，這個(gè)參數(shù)用的比較少。 
 * 
 */ 
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]);  
  } 
 } 
})

調(diào)用：

<divstyle="width: 500px;">Desrunt mollit anim id estlaborum</div>
<divstyle="width: 200px;">2222222</div>
<divstyle="width:30px;">33333333333333333333333</div>
<divstyle="width: 300px;">4444444444444444</div>

復(fù)制代碼代碼如下:

$("div:css(width< 100)").addClass("heighlight");

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: