Beispielanalyse der Parameterverwendung im jQuery-Plug-in Production_jquery

Das Beispiel in diesem Artikel beschreibt die Parameterverwendung der jQuery-Plug-in-Produktion. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Textschatteneffekt ohne Parameter realisieren

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

Aufrufbeispiel:

Code kopieren Der Code lautet wie folgt:

$("h1").shadow ();

2. Einfache Parameter

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

Aufrufbeispiel:

Code kopierenDer Code lautet wie folgt:

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

3. Parameterzuordnung

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

Aufrufbeispiel:

Code kopieren Der Code lautet wie folgt:

$("h1").shadow({
Scheiben: 5,
Deckkraft: 0,25,
zIndex: -1
});

4. Standardparameterwerte (dies ist der wichtigste)

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

Aufrufbeispiel:

Code kopieren Der Code lautet wie folgt:

$("h1").shadow({
Deckkraft: 0,05
});

5. Rückruffunktion

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

Aufrufbeispiel:

Code kopieren Der Code lautet wie folgt:

$("h1").shadow({
SliceOffset: Funktion(i){
        return {x : -i,y : -2 * i}
}
});

6. Anpassbare Standardwerte

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} 
 } 
}

Der Standardwert wird im Namespace platziert und kann direkt über $.fn.shadow.default referenziert werden. Der Aufruf von $.extend() muss ebenfalls geändert werden, um sich an diese Änderung anzupassen. Da alle Aufrufe von .shadow() jetzt die Standardzuordnung wiederverwenden, können sie nicht zulassen, dass $.extend() sie ändert. Daher wird eine leere Zuordnung ({}) als erster Parameter von $.extend() verwendet. Erstellen Sie dieses neue Objekt das Ziel der Modifikation.

Aufrufmethode:

Code kopieren Der Code lautet wie folgt:

jQuery.fn.shadow.defaults.slices= 10;
$("h1").shadow({
SliceOffset: Funktion(i){
        return { x : -i, y : i}
}
});

7. Selektorausdruck hinzufügen

/* 
 *添加选择符表达式 
 * 
 * 参数： 
 *  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]);  
  } 
 } 
})

Anruf:

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

Code kopieren Der Code lautet wie folgt:

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

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.