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


Posted in Javascript onJune 01, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 #Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 #Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 #Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 #Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 #Javascript
js事件监听器用法实例详解
Jun 01 #Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 #Javascript
You might like
中东人咖啡哲学
2021/03/03 咖啡文化
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
js代码实现轮播图
2020/05/04 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python入门篇之正则表达式
2014/10/20 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
幼儿园中班教学反思
2014/02/10 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
期中考试后的感想
2015/08/07 职场文书
把77A收信机改造成收音机
2022/04/05 无线电