无为清净楼资源网

jQuery插件制作之参数用法实例分析
网络编程 2024/11/20 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

本文实例讲述了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,插件制作,参数用法
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接