jQuery插件制作之參數用法實例分析
更新時間：2015年06月01日 15:08:20 作者：天使小寶
這篇文章主要介紹了jQuery插件制作之參數用法,以實例形式較為詳細的分析了jQuery插件制作過程中參數的相關使用技巧,需要的朋友可以參考下
本文實例講述了jQuery插件制作之參數用法。分享給大家供大家參考。具體分析如下：
1、無參數實現(xiàn)文字陰影效果
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()的調用也必須修改，以適應這種變化。由于現(xiàn)在所有對.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 的dialog和ztree結合實現(xiàn)步驟
首先準備好juqury-ui、ztree 的js文件和css 文件，接下來的步驟祥看本文希望對大家有所幫助2013-08-08
本文主要介紹JQuery框架里面支持的自定義事件模型，通過實例說明什么時候可以利用事件模型進行面向對象的JS編程，以及利用“帶命名空間的事件處理函數”來避免unbind時影響別的事件訂閱。2010-08-08
在結果集后鏈式調用remove()方法即可刪除也可以通過向remove傳參的形式來過濾選擇結果再執(zhí)行remove操作2014-05-05
Query架構的開發(fā)人員能夠創(chuàng)建一個插件代碼來擴展其功能，從而能夠產生一些最好的插件，讓你的網站或任何給定的項目達到一個全新的水平。2016-04-04
使用BootStrap和Metroui設計的metro風格微網站或手機app界面
今天使用bootstrap和metroui設計了一個metro風格的移動app或者微信微網站的界面，非常不錯具有參考借鑒價值，感興趣的朋友可以參考下2016-10-10
jQuery插件實現(xiàn)表格隔行換色且感應鼠標高亮行變色
實現(xiàn)表格隔行換色，且感應鼠標行變色的方法有很多，在本文將為大家介紹的是使用jQuery插件來實現(xiàn)，具體如下，感興趣的朋友可以練練手2013-09-09
這篇文章主要介紹了jquery-ui 進度條功能,結合完整實例形式分析了jquery-ui 結合時間函數實現(xiàn)進度條功能相關操作技巧,需要的朋友可以參考下2019-07-07
此效果在網上使用的頻率比較多一點但大多是插件，要么JS寫的太過于復雜童鞋們看起來有一定的難度，這個相對來說比較簡單一點,感興趣的可以參考下哈2013-03-03
使用jQuery的load方法設計動態(tài)加載及解決被加載頁面js失效問題
這篇文章主要介紹了使用jQuery的load方法設計動態(tài)加載及解決被加載頁面js失效問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
使用JQuery Clone 模板來實現(xiàn)商品信息的展示，展現(xiàn)形式可以通過修改模板中的td來確定每一行顯示多少個商品信息2011-12-12