jQuery插件制作之参数用法实例分析
更新时间：2015年06月01日 15:08:20 作者：天使小宝
这篇文章主要介绍了jQuery插件制作之参数用法,以实例形式较为详细的分析了jQuery插件制作过程中参数的相关使用技巧,需要的朋友可以参考下
本文实例讲述了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
});
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
});
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}
}
});
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}
}
});
$("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程序设计有所帮助。
相关文章
jQuery-serialize()输出序列化form表单值的方法
jQuery-serialize()输出序列化表单值在工作中很常见也很实用，于是本人搜集整理了一些，需要了解的朋友可以详细参考下2012-12-12
自动完成功能是指：类似百度搜索之类的输入一个词的一部分后就自动提示，然后用户可以选择，不需要再输入剩余部分。2011-08-08
jQuery.validate.js表单验证插件的使用代码详解
Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，这篇文章主要介绍了jQuery.validate.js表单验证插件的使用代码详解,需要的朋友可以参考下2018-10-10
在博客园发布了柱状图JQUBar1.0 jQuery 插件。现将该插件升级为1.1版本。2010-11-11
此Jquery插件是一款非常实用的特效，不但有分享功能，还具备了动画效果，提高了用户体验，感兴趣的朋友可以参考下哈2013-04-04
下面小编就为大家带来一篇jquery实现一个简单的表单验证实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-03
网页应用程序需要对丰富的内容提供简单易用的上传和操作方式，但是这样会给只有少数图片处理技能的用户造成很大的困难。图片剪切是最基本的图片处理技术，这个详细的教程将包括在jQuery库上创建此参加的每一个步骤。2011-08-08
这篇文章主要介绍了jQuery实现的老虎机跑动效果,涉及jQuery事件响应以及结合时间函数动态操作页面元素相关实现技巧,需要的朋友可以参考下2018-12-12
lyhucSelect基于Jquery的Select数据联动插件
lyhucSelect基于Jquery的Select数据联动插件，需要的朋友可以参考下。2011-03-03
本文给大家分享一段jquery代码实现滑动按钮开关的效果，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的的朋友参考下2016-12-12
最新评论