欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-20 08:59:19
...
本文实例讲述了jQuery插件制作之参数用法。分享给大家供大家参考。具体分析如下:

1、无参数实现文字阴影效果

jQuery.fn.shadow =function(){ 
 return this.each(function(){ 
  var $originalElement = jQuery(this); 
  for(var i = 0;i 

调用的例子:

复制代码 代码如下:
$("h1").shadow();

2、简单的参数

jQuery.fn.shadow =function(slices,opacity,zIndex){ 
 return this.each(function(){ 
  var $originalElement = jQuery(this); 
  for(var i = 0;i 

调用的例子:

复制代码 代码如下:
$("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 

调用的例子:

复制代码 代码如下:
$("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 

调用的例子:

复制代码 代码如下:
$("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 

调用的例子:

复制代码 代码如下:
$("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 

默认值被放在了命名空间里,可以通过$.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 =' : 
    return value >= parseInt(parts[2]); 
   case '>' : 
    return value >parseInt(parts[2]);  
  } 
 } 
})

调用:

Desrunt mollit anim id estlaborum
2222222