本文實例講述了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");
}
})
}呼叫的範例：
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");
}
})
}呼叫的範例：
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");
}
})
}呼叫的範例：
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");
}
})
}呼叫的範例：
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");
}
})
}呼叫的範例：
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()的第一個參數，讓這個新物件成為被修改的目標。
呼叫方法：
/*
*添加选择符表达式
*
* 参数：
* 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>
