jQuery插件制作之参数用法实例分析

2019-11-20 12:22:46

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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");   }  }) }

调用的例子：

复制代码代码如下:

$("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");

希望本文所述对大家的jQuery程序设计有所帮助。

上一篇：jQuery实现文本展开收缩特效

下一篇：jQuery插件制作之全局函数用法实例