jquery 插件學(xué)習(xí)（五）
更新時(shí)間：2012年08月06日 22:12:41 作者：
一般對(duì)外發(fā)布的插件都應(yīng)該進(jìn)行封裝，封裝的插件還應(yīng)該符合規(guī)范，只有這樣寫的插件才具有推廣價(jià)值，并得到其他用戶的喜愛
這節(jié)封裝插件了，進(jìn)展怎么樣呢？
一般對(duì)外發(fā)布的插件都應(yīng)該進(jìn)行封裝，封裝的插件還應(yīng)該符合規(guī)范，只有這樣寫的插件才具有推廣價(jià)值，并得到其他用戶的喜愛。
首先第一步，是定義一個(gè)獨(dú)立域，代碼如下所示。
(function($){
//自定義插件代碼
})(jQuery) //封裝插件
確定創(chuàng)建插件類型，選擇創(chuàng)建方式，例如，創(chuàng)建一個(gè)設(shè)置元素字體顏色的插件，則應(yīng)該創(chuàng)建jquery對(duì)象方法，考慮到j(luò)query提供了插件擴(kuò)展方法extend()，調(diào)用該方法會(huì)更為規(guī)范。
(function($){
//自定義插件代碼
$.extend($.fn,{ //jquery對(duì)象擴(kuò)展方法
})
})(jQuery) //封裝插件
一般插件都會(huì)接受參數(shù)，用來控制插件的 行為，例如，對(duì)于設(shè)置顏色的插件，應(yīng)該允許用戶設(shè)置字體顏色，同時(shí)，應(yīng)該考慮如果用戶沒有設(shè)置顏色，則應(yīng)該保持默認(rèn)色進(jìn)行設(shè)置。
(function($){
//自定義插件代碼
$.extend($.fn,{
color : function(options){
var options = $.extend({bcolor :"white",fcolor:"black"},options);
//
}
})
})(jQuery) //封裝插件
最后完善插件
;(function($){
$.extend($.fn,{
color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options);
//函數(shù)體
return this.each(function(){
$(this).css("color",options.bcolor);
$(this).css("background",options.fcolor);
});
}//color==end
})
})(jQuery);
調(diào)用看看
$("h1").color({bcolor : "#ccc",fcolor:"#eee"});
$('a').color("#fff");
一般對(duì)外發(fā)布的插件都應(yīng)該進(jìn)行封裝，封裝的插件還應(yīng)該符合規(guī)范，只有這樣寫的插件才具有推廣價(jià)值，并得到其他用戶的喜愛。
首先第一步，是定義一個(gè)獨(dú)立域，代碼如下所示。
復(fù)制代碼 代碼如下:
(function($){
//自定義插件代碼
})(jQuery) //封裝插件
確定創(chuàng)建插件類型，選擇創(chuàng)建方式，例如，創(chuàng)建一個(gè)設(shè)置元素字體顏色的插件，則應(yīng)該創(chuàng)建jquery對(duì)象方法，考慮到j(luò)query提供了插件擴(kuò)展方法extend()，調(diào)用該方法會(huì)更為規(guī)范。
復(fù)制代碼 代碼如下:
(function($){
//自定義插件代碼
$.extend($.fn,{ //jquery對(duì)象擴(kuò)展方法
})
})(jQuery) //封裝插件
一般插件都會(huì)接受參數(shù)，用來控制插件的 行為，例如，對(duì)于設(shè)置顏色的插件，應(yīng)該允許用戶設(shè)置字體顏色，同時(shí)，應(yīng)該考慮如果用戶沒有設(shè)置顏色，則應(yīng)該保持默認(rèn)色進(jìn)行設(shè)置。
復(fù)制代碼 代碼如下:
(function($){
//自定義插件代碼
$.extend($.fn,{
color : function(options){
var options = $.extend({bcolor :"white",fcolor:"black"},options);
//
}
})
})(jQuery) //封裝插件
最后完善插件
復(fù)制代碼 代碼如下:
;(function($){
$.extend($.fn,{
color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options);
//函數(shù)體
return this.each(function(){
$(this).css("color",options.bcolor);
$(this).css("background",options.fcolor);
});
}//color==end
})
})(jQuery);
調(diào)用看看
復(fù)制代碼 代碼如下:
$("h1").color({bcolor : "#ccc",fcolor:"#eee"});
$('a').color("#fff");
相關(guān)文章
jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法,詳細(xì)介紹了前臺(tái)及后臺(tái)的處理方法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
使用jQuery將多條數(shù)據(jù)插入模態(tài)框的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用jQuery將多條數(shù)據(jù)插入模態(tài)框的方法，很簡(jiǎn)單，很實(shí)用，需要的朋友可以參考下2014-10-10
JQuery、AJAX都是Javascript的一個(gè)框架，各有各自不同的功能，下面為大家介紹下jquery和ajax的關(guān)系，不了解的朋友可以參考下2013-11-11
jQuery插件Echarts實(shí)現(xiàn)的漸變色柱狀圖
本文主要介紹了jQuery插件Echarts實(shí)現(xiàn)漸變色柱狀圖的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jquery判斷RadioButtonList和RadioButton中是否有選中項(xiàng)示例
用jquery判斷RadioButtonList和RadioButton中是否有選中項(xiàng)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
jQuery UI很強(qiáng)大，其中的日期選擇插件Datepicker是一個(gè)配置靈活的插件，我們可以自定義其展示方式，包括日期格式、語言、限制選擇日期范圍、添加相關(guān)按鈕以及其它導(dǎo)航等2011-05-05
jquery獲得同源iframe內(nèi)body下標(biāo)簽的值的方法
這篇文章主要介紹了jquery獲得同源iframe內(nèi)body下標(biāo)簽的值的方法,很簡(jiǎn)單，很實(shí)用，需要的朋友可以參考下2014-09-09
JQuery單選按鈕Radio和復(fù)選框checkbox的操作代碼
這篇文章主要介紹了JQuery單選按鈕Radio和復(fù)選框checkbox的操作，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
JQuery手速測(cè)試小游戲?qū)崿F(xiàn)思路詳解
這篇文章主要介紹了JQuery手速測(cè)試小游戲?qū)崿F(xiàn)思路詳解,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09