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

前端之家收集整理的这篇文章主要介绍了jQuery插件制作之参数用法实例分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery插件制作之参数用法分享给大家供大家参考。具体分析如下:

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

调用的例子:

代码如下:

2、简单的参数

调用的例子:

代码如下:

3、参数的映射

调用的例子:

代码如下:

4、默认的参数值(这个是最重要的)


<div class="jb51code">
<pre class="brush:js;">
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",opacity : opts.opacity
})
.appendTo("body");
}
})
}

调用的例子:

代码如下:

5、回调函数


<div class="jb51code">
<pre class="brush:js;">
jQuery.fn.shadow =function(options){
var defaults = {
slices : 5,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,opacity : opts.opacity
})
.appendTo("body");
}
})
}

调用的例子:

代码如下:

6、可定制的默认值

插件的命名空间里了 var opts =jQuery.extend({},jQuery.fn.shadow.defaults,opacity : opts.opacity }) .appendTo("body"); } }) } jQuery.fn.shadow.defaults= { slices : 5,sliceOffset : function(i){ return { x : i,y : i} } }

默认值被放在了命名空间里,可以通过$.fn.shadow.default直接引用。而对$.extend()的调用也必须修改,以适应这种变化。由于现在所有对.shadow()的调用都要重用defaults映射,因此不能让他$.extend()修改它,因此要将一个空映射({})作为$.extend()的第一个参数,让这个新对象成为被修改的目标。

调用方法

代码如下:

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 =' : return value >= parseInt(parts[2]); case '>' : return value >parseInt(parts[2]); } } })

调用

代码如下:

希望本文所述对大家的jQuery程序设计有所帮助。

猜你在找的jQuery相关文章