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 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 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
mysql 全文搜索 技巧
2007/04/27 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
Python中url标签使用知识点总结
2020/01/16 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
Android面试宝典
2013/08/06 面试题
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
公务员个人自我评价分享
2013/11/06 职场文书
公司管理建议书范文
2014/03/12 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
门面房租房协议书
2014/12/01 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
MySQL创建定时任务
2022/01/22 MySQL