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 相关文章推荐
jQuery客户端分页实例代码
Nov 18 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
东方红 - 来复式再生机的修复
2021/03/02 无线电
Javascript技术技巧大全(五)
2007/01/22 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python fabric实现远程部署
2017/01/05 Python
python实现聊天小程序
2018/03/13 Python
python如何制作英文字典
2019/06/25 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
大家检讨书5000字
2014/02/03 职场文书
培训专员岗位职责
2014/02/26 职场文书
协议书模板
2014/04/23 职场文书
道路施工安全责任书
2014/07/24 职场文书
普通党员个人整改措施
2014/10/27 职场文书
2014年业务工作总结
2014/11/17 职场文书
课外活动实习计划
2015/01/19 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
会议通知范文
2015/04/15 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
Python集合的基础操作
2021/11/01 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技