當前位置:首頁 » 法規百科 » jquery插件寫法規范

jquery插件寫法規范

發布時間: 2022-01-14 09:26:09

㈠ 如何編寫一個面向對象的jQuery插件

jquery插件開發模式
jquery插件一般有三種開發方式:
通過$.extend()來擴展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應用jQuery UI的部件工廠方式創建
第一種$.extend()相對簡單,一般很少能夠獨立開發復雜插件,第三種是一種高級的開發模式,本文也不做介紹。第二種則是一般插件開發用到的方式,本文著重講講第二種。
插件開發
第二種插件開發方式一般是如下定義
$.fn.pluginName = function() {
//your code here
}
插件開發,我們一般運用面向對象的思維方式
例如定義一個對象
var Haorooms= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定義haorooms的方法
haorooms.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
$.extend({}, this.defaults, opt)有{}主要是為了創建一個新對象,保留對象的默認值。
$.fn.myPlugin = function(options) {
//創建haorooms的實體
var haorooms= new Haorooms(this, options);
//調用其方法
return Haorooms.changecss();
}
調用這個插件直接如下就可以
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})

㈡ 如何寫jquery插件調用方法

構造一個方法即可

functionshowModal()
{
$('#popModal_ex1').popModal({
html:$('#content'),
placement:'bottomLeft',
showCloseBut:true,
onDocumentClickClose:true,
onOkBut:function(){},
onCancelBut:function(){},
onLoad:function(){},
onClose:function(){}
});

}

㈢ jquery插件開發的幾種方式

一、jQuery插件開發方式

1、通過$.extend()來擴展jQuery

2、通過$.fn 向jQuery添加新的方法

3、通過$.widget()應用jQuery UI的部件工廠方式創建

二、三種jQuery插件開發方式說明

1、$.extend()相對簡單,一般很少能夠獨立開發復雜插件,僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。

2、我們調用通過$.extend()添加的函數時直接通過$符號調用($.myfunction()),而不需要選中DOM元素($('#example').myfunction())。

3、$.widget()是一種高級的開發模式,該模式開發出來的部件帶有很多jQuery內建的特性,比如插件的狀態信息自動保存,各種關於插件的常用方法等

4、$.fn則是一般插件開發用到的方式,可以利用jQuery強大的選擇器帶來的便利,以及將插件更好地運用於所選擇的元素身上,使用的插件也大多是通過此種方式開發。

㈣ jQuery怎麼編寫插件呢插件的格式是怎麼樣的

jQuery插件的開發包括兩種:
一種是類級別的插件開發,即給jQuery添加新的全局函數,相當於給jQuery類本身添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數,另一種是對象級別的插件開發,即給jQuery對象添加方法。下面就兩種函數的開發做詳細的說明。
1、類級別的插件開發
類級別的插件開發最直接的理解就是給jQuery類添加類方法,可以理解為添加靜態方法。典型的例子就是$.AJAX()這個函數,將函數定義於jQuery的命名空間中。關於類級別的插件開發可以採用如下幾種形式進行擴展:
1.1 添加一個新的全局函數
添加一個全局函數,我們只需如下定義:
Java代碼
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};

1.2 增加多個全局函數
添加多個全局函數,可採用如下定義:
Java代碼
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};
調用時和一個函數的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
1.3 使用jQuery.extend(object);
Java代碼
jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});

1.4 使用命名空間
雖然在jQuery命名空間中,我們禁止使用了大量的javaScript函數名和變數名。但是仍然不可避免某些函數或變數名將於其他jQuery插件沖突,因此我們習慣將一些方法封裝到另一個自定義的命名空間。
Java代碼
jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
採用命名空間的函數仍然是全局函數,調用時採用的方法:
$.myPlugin.foo();
$.myPlugin.bar('baz');

通過這個技巧(使用獨立的插件名),我們可以避免命名空間內函數的沖突。
2、對象級別的插件開發
對象級別的插件開發需要如下的兩種形式:、
形式1:
Java代碼
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes here.
}
})
})(jQuery);
形式2:
Java代碼
(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery);
上面定義了一個jQuery函數,形參是$,函數定義完成之後,把jQuery這個實參傳遞進去.立即調用執行。這樣的好處是,我們在寫jQuery插件時,也可以使用$這個別名,而不會與prototype引起沖突.
2.1 在JQuery名稱空間下申明一個名字
這是一個單一插件的腳本。如果你的腳本中包含多個插件,或者互逆的插件(例如: $.fn.doSomething() 和$.fn.undoSomething()),那麼你需要聲明多個函數名字。但是,通常當我們編寫一個插件時,力求僅使用一個名字來包含它的所有內容。我們的示例插件命名為「highlight「

Java代碼
$.fn.hilight = function() {
// Our plugin implementation code goes here.
};
我們的插件通過這樣被調用:
$('#myDiv').hilight();

但是如果我們需要分解我們的實現代碼為多個函數該怎麼辦?有很多原因:設計上的需要;這樣做更容易或更易讀的實現;而且這樣更符合面向對象。 這真是一個麻煩事,把功能實現分解成多個函數而不增加多餘的命名空間。出於認識到和利用函數是javascript中最基本的類對象,我們可以這樣做。就像其他對象一樣,函數可以被指定為屬性。因此我們已經聲明「hilight」為jQuery的屬性對象,任何其他的屬性或者函數我們需要暴露出來的,都可以在"hilight" 函數中被聲明屬性。稍後繼續。
2.2 接受options參數以控制插件的行為
讓我們為我們的插件添加功能指定前景色和背景色的功能。我們也許會讓選項像一個options對象傳遞給插件函數。例如:
Java代碼
// plugin definition
$.fn.hilight = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
};
我們的插件可以這樣被調用:
$('#myDiv').hilight({
foreground: 'blue'
});

2.3 暴露插件的默認設置
我們應該對上面代碼的一種改進是暴露插件的默認設置。這對於讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來我們開始利用函數對象。

Java代碼
// plugin definition
$.fn.hilight = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.hilight.defaults, options);
// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
現在使用者可以包含像這樣的一行在他們的腳本里:
//這個只需要調用一次,且不一定要在ready塊中調用
$.fn.hilight.defaults.foreground = 'blue';
接下來我們可以像這樣使用插件的方法,結果它設置藍色的前景色:
$('#myDiv').hilight();

如你所見,我們允許使用者寫一行代碼在插件的默認前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的默認值:
// 覆蓋插件預設的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
// 使用一個新的預設設置調用插件
$('.hilightDiv').hilight();
// ...
// 通過傳遞配置參數給插件方法來覆蓋預設設置
$('#green').hilight({
foreground: 'green'
});
2.4 適當的暴露一些函數
這段將會一步一步對前面那段代碼通過有意思的方法擴展你的插件(同時讓其他人擴展你的插件)。例如,我們插件的實現裡面可以定義一個名叫"format"的函數來格式化高亮文本。我們的插件現在看起來像這樣,默認的format方法的實現部分在hiligth函數下面。
Java代碼
// plugin definition
$.fn.hilight = function(options) {
// iterate and reformat each matched element
return this.each(function() {
var $this = $(this);
// ...
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// define our format function
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
我們很容易的支持options對象中的其他的屬性通過允許一個回調函數來覆蓋默認的設置。這是另外一個出色的方法來修改你的插件。這里展示的技巧是進一步有效的暴露format函數進而讓他能被重新定義。通過這技巧,是其他人能夠傳遞他們自己設置來覆蓋你的插件,換句話說,這樣其他人也能夠為你的插件寫插件。
考慮到這個篇文章中我們建立的無用的插件,你也許想知道究竟什麼時候這些會有用。一個真實的例子是Cycle插件.這個Cycle插件是一個滑動顯示插件,他能支持許多內部變換作用到滾動,滑動,漸變消失等。但是實際上,沒有辦法定義也許會應用到滑動變化上每種類型的效果。那是這種擴展性有用的地方。 Cycle插件對使用者暴露"transitions"對象,使他們添加自己變換定義。插件中定義就像這樣:
$.fn.cycle.transitions = {
// ...
};
這個技巧使其他人能定義和傳遞變換設置到Cycle插件。
2.5 保持私有函數的私有性
這種技巧暴露你插件一部分來被覆蓋是非常強大的。但是你需要仔細思考你實現中暴露的部分。一但被暴露,你需要在頭腦中保持任何對於參數或者語義的改動也許會破壞向後的兼容性。一個通理是,如果你不能肯定是否暴露特定的函數,那麼你也許不需要那樣做。
那麼我們怎麼定義更多的函數而不攪亂命名空間也不暴露實現呢?這就是閉包的功能。為了演示,我們將會添加另外一個「debug」函數到我們的插件中。這個 debug函數將為輸出被選中的元素格式到firebug控制台。為了創建一個閉包,我們將包裝整個插件定義在一個函數中。
Java代碼
(function($) {
// plugin definition
$.fn.hilight = function(options) {
debug(this);
// ...
};
// private function for debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// ...
})(jQuery);

我們的「debug」方法不能從外部閉包進入,因此對於我們的實現是私有的。
2.6 支持Metadata插件
在你正在寫的插件的基礎上,添加對Metadata插件的支持能使他更強大。個人來說,我喜歡這個Metadata插件,因為它讓你使用不多的"markup」覆蓋插件的選項(這非常有用當創建例子時)。而且支持它非常簡單。更新:注釋中有一點優化建議。
Java代碼
$.fn.hilight = function(options) {
// ...
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() {
var $this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
//...
這些變動行做了一些事情:它是測試Metadata插件是否被安裝如果它被安裝了,它能擴展我們的options對象通過抽取元數據這行作為最後一個參數添加到JQuery.extend,那麼它將會覆蓋任何其它選項設置。現在我們能從"markup」處驅動行為,如果我們選擇了「markup」:
調用的時候可以這樣寫: jQuery.foo(); 或 $.foo();

Java代碼
<!-- markup -->
<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>
現在我們能高亮哪些div僅使用一行腳本:
$('.hilight').hilight();

2.7 整合
下面使我們的例子完成後的代碼:

Java代碼
// 創建一個閉包
(function($) {
// 插件的定義
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// 私有函數:debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// 定義暴露format函數
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
// 插件的defaults
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
// 閉包結束
})(jQuery);

這段設計已經讓我創建了強大符合規范的插件。我希望它能讓你也能做到。
3、總結
jQuery為開發插件提拱了兩個方法,分別是:
jQuery.fn.extend(object); 給jQuery對象添加方法。
jQuery.extend(object); 為擴展jQuery類本身.為類添加新的方法。
3.1 jQuery.fn.extend(object);
fn 是什麼東西呢。查看jQuery代碼,就不難發現。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。雖然 javascript沒有明確的類的概念,但是用類來理解它,會更方便。jQuery便是一個封裝得非常好的類,比如我們用 語句$("#btn1") 會生成一個 jQuery類的實例。
jQuery.fn.extend(object); 對jQuery.prototype進得擴展,就是為jQuery類添加「成員函數」。jQuery類的實例可以使用這個「成員函數」。
比如我們要開發一個插件,做一個特殊的編輯框,當它被點擊時,便alert 當前編輯框里的內容。可以這么做:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //頁面上為:<input id="input1" type="text"/>
$("#input1")為一個jQuery實例,當它調用成員方法 alertWhileClick後,便實現了擴展,每次被點擊時它會先彈出目前編輯里的內容。
3.2 jQuery.extend(object);
為jQuery類添加添加類方法,可以理解為添加靜態方法。如:
$.extend({
add:function(a,b){return a+b;}
});
便為jQuery添加一個為 add的「靜態方法」,之後便可以在引入 jQuery的地方,使用這個方法了,$.add(3,4); //return 7

--轉自ITeyes,作者:gaojiewyh

㈤ 用jquery插件裡面是不是有很多寫好的方法

其實最大的限制就是其他人都提到的跨域問題。
跨域問題只能通過代理來解決,比如你寫一個Server,專門寫一個暴露給JS調用的介面用於抓取頁面。
對於JS解析HTML的情況,答題思路兩種:
1、真的做解析。這一塊的庫肯定有人已經寫好了。建議直接到Github上搜索下. 2、講抓取到的網頁內容潛入到dom中,讓瀏覽器幫你渲染好。然後你可以用JQ等方式簡單地去獲取你要的節點內容。
注意如果是第二點,你需要注意的是: 1、過濾掉內容中的script等標簽,避免腳本執行 2、直接放在內存中渲染,不用append到頁面,避免對你自己頁面的影響。

㈥ jquery插件怎麼使用

頁面導入js。
<!-- 導入jquery核心類庫 -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>

㈦ 如何封裝jquery插件

前言

如今做web開發,jquery 幾乎是必不可少的,就連vs神器在2010版本開始將Jquery 及ui 內置web項目里了。至於使用jquery好處這里就不再贅述了,用過的都知道。今天我們來討論下jquery的插件機制,jquery有著成千上萬的第三方插件,有時我們寫好了一個獨立的功能,也想將其與jquery結合起來,可以用jquery鏈式調用,這就要擴展jquery,寫成插件形式了,如下面就是一個簡單擴展Jquery對象的demo:

到這一步,高亮插件基本功能已經具備了。調用代碼如下:

$(function () {
$("p").highLight(); //調用自定義 高亮插件});

這里只能 直接調用,不能鏈式調用。我們知道jQuey是可以鏈式調用的,就是可以在一個jQuery對象上調用多個方法,如:
$('#id').css({marginTop:'100px'}).addAttr("title","測試「);
但是我們上面的插件,就不能這樣鏈式調用了。比如:$("p").highLight().css({marginTop:'100px'}); //將會報找不到css方法,原因在與我的自定義插件在完成功能後,沒有將 jQuery對象給返回出來。接下來,return jQuery對象,讓我們的插件也支持鏈式調用。(其實很簡單,就是執行完我們插件代碼的時候將jQuery對像return 出來,和上面的代碼沒啥區別)

㈧ 如何寫jquery插件

jQuery 如何寫插件 -

jQuery插件的開發包括兩種:

一種是類級別的插件開發,即給jQuery添加新的全局函數,相當於給jQuery類本身添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數,另一種是對象級別的插件開發,即給jQuery對象添加方法。下面就兩種函數的開發做詳細的說明。

1、類級別的插件開發

類級別的插件開發最直接的理解就是給jQuery類添加類方法,可以理解為添加靜態方法。典型的例子就是$.AJAX()這個函數,將函數定義於jQuery的命名空間中。關於類級別的插件開發可以採用如下幾種形式進行擴展:

1.1
添加一個新的全局函數

添加一個全局函數,我們只需如下定義:

jQuery.foo =
function() {
alert('This is a test. This is only a
test.');
};

1.2
增加多個全局函數

添加多個全局函數,可採用如下定義:
Java代碼 收藏代碼

jQuery.foo = function() {
alert('This is a test. This is
only a test.');
};
jQuery.bar =
function(param) {
alert('This function takes a
parameter, which is "' + param + '".');
};
調用時和一個函數的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3
使用jQuery.extend(object);

jQuery.extend({
foo:
function() {
alert('This is a test. This is
only a test.');

},
bar: function(param)
{
alert('This function takes a
parameter, which is "' + param +'".');

}
});

1.4
使用命名空間

雖然在jQuery命名空間中,我們禁止使用了大量的javaScript函數名和變數名。但是仍然不可避免某些函數或變數名將於其他jQuery插件沖突,因此我們習慣將一些方法封裝到另一個自定義的命名空間。

jQuery.myPlugin =
{
foo:function()
{

alert('This is a test. This is only a
test.');

},

bar:function(param)
{

alert('This function takes a parameter, which is "' + param +
'".');

}
};
採用命名空間的函數仍然是全局函數,調用時採用的方法:
$.myPlugin.foo();
$.myPlugin.bar('baz');
通過這個技巧(使用獨立的插件名),我們可以避免命名空間內函數的沖突。

2、對象級別的插件開發

對象級別的插件開發需要如下的兩種形式:、

形式1:
(function($){

$.fn.extend({

pluginName:function(opt,callback){

// Our plugin implementation code goes
here.

}
})
})(jQuery);
形式2:
(function($)
{
$.fn.pluginName = function()
{

// Our plugin implementation code goes here.

};
})(jQuery);
上面定義了一個jQuery函數,形參是$,函數定義完成之後,把jQuery這個實參傳遞進去.立即調用執行。這樣的好處是,我們在寫jQuery插件時,也可以使用$這個別名,而不會與prototype引起沖突.
2.1
在JQuery名稱空間下申明一個名字

這是一個單一插件的腳本。如果你的腳本中包含多個插件,或者互逆的插件(例如:
$.fn.doSomething() 和
$.fn.undoSomething()),那麼你需要聲明多個函數名字。但是,通常當我們編寫一個插件時,力求僅使用一個名字來包含它的所有內容。我們的示例插件命名為「highlight「

$.fn.hilight
= function() {
// Our plugin implementation
code goes
here.
};
我們的插件通過這樣被調用:
$('#myDiv').hilight();

但是如果我們需要分解我們的實現代碼為多個函數該怎麼辦?有很多原因:設計上的需要;這樣做更容易或更易讀的實現;而且這樣更符合面向對象。這真是一個麻煩事,把功能實現分解成多個函數而不增加多餘的命名空間。出於認識到和利用函數是javascript中最基本的類對象,我們可以這樣做。就像其他對象一樣,函數可以被指定為屬性。因此我們已經聲明「hilight」為jQuery的屬性對象,任何其他的屬性或者函數我們需要暴露出來的,都可以在"hilight"
函數中被聲明屬性。稍後繼續。
2.2
接受options參數以控制插件的行為

讓我們為我們的插件添加功能指定前景色和背景色的功能。我們也許會讓選項像一個options對象傳遞給插件函數。例如:
// plugin definition
$.fn.hilight =
function(options) {
var defaults = {
foreground:
'red',
background:
'yellow'
};
//
Extend our default options with those provided.
var
opts = $.extend(defaults, options);
// Our
plugin implementation code goes here.
};
我們的插件可以這樣被調用:
$('#myDiv').hilight({

foreground: 'blue'
});

2.3
暴露插件的默認設置

我們應該對上面代碼的一種改進是暴露插件的默認設置。這對於讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來我們開始利用函數對象。
//
plugin definition
$.fn.hilight =
function(options) {
// Extend our default options with those
provided.
// Note that the first arg to extend is an
empty object -
// this is to keep from overriding our
"defaults" object.
var opts = $.extend({},
$.fn.hilight.defaults, options);
// Our
plugin implementation code goes here.
};
// plugin
defaults - added as a property on our plugin function
$.fn.hilight.defaults = {

foreground: 'red',
background: 'yellow'
};
現在使用者可以包含像這樣的一行在他們的腳本里:
//這個只需要調用一次,且不一定要在ready塊中調用
$.fn.hilight.defaults.foreground
=
'blue';
接下來我們可以像這樣使用插件的方法,結果它設置藍色的前景色:
$('#myDiv').hilight();

如你所見,我們允許使用者寫一行代碼在插件的默認前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的默認值:
//
覆蓋插件預設的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
//
使用一個新的預設設置調用插件
$('.hilightDiv').hilight();
// ...
//
通過傳遞配置參數給插件方法來覆蓋預設設置
$('#green').hilight({
foreground:
'green'
});

㈨ jquery插件開發有幾種

//類級別插件開發,主要是在jQuery中定義全局方法:
//第一種寫法
jQuery.myFunc = function(str){
alert("直接在jquery中定義方法",str)
}
//調用方式 $.myFunc("hello!");
//第二種寫法
jQuery.extend({
myFunc:function(str){
alert("extend擴展$的方法",str)
}
})
//調用方式 $.myFunc("hello!");
//第三種寫法: 為了不污染全局,掛載一個對象作為命名空間,自定義的所有方法放在這里,保證jQuery全局安全。
jQuery.define={
myFunc:function(str){
alert("命名空間的寫法",str)
}
}
//調用方式:$.define.myFunc("hello");
//以上三種是級別插件開發方式,不常用,從調用方式看出,他們是全局執行的,不需要綁定節點對象。
//對象級別插件開發:有規范模板
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各種默認參數
}
var options = $.extend(defaults,options); //傳入的參數覆蓋默認參數
this.each(function(){
var _this = $(this); //緩存一下插件傳進來的節點對象。
//執行內容

})
return $(this); //把節點對象返回去,為了支持鏈式調用。
}
})(jQuery);
//調用方式
$("selector").plugin({
//自定義參數,json格式
})

㈩ jquery插件怎樣使用和修改

jQuery插件 要使用它的話 通常插件中都有demo或者api可以查閱
通常jQuery插件為了減小體積 會發布兩個版本 XXX.js和XXX.min.js

如果你要修改插件需要使用XXX.js文件

首先 你要知道它怎麼用,先有一個可用的demo(沒有demo就自己寫一個),然後用webkit內核或firefox進行斷點查看,這主要是為了找插件入口點,當然 你也可以直接查看js代碼 這需要一定的底子
最後 就是慢慢查看他的代碼的實現功能了,先得看懂他是怎麼實現的,然後你才會知道怎麼改.

jQuery插件我也寫的不少 像 模擬alert/confirm/prompt 錯誤信息提示框 模擬彈出窗體 無縫marquee滾動 分頁控制項 拖拽控制項等等

jQuery插件的框架寫法通常是

(function($){
$.fn.extend({
fnKey:function(){}
})
//或者
$.fn.fnKey=function(){}
})(jQuery)

上面的兩種寫法的調用 方式 是

$("XXX").fnKey()進行調用的

還有一種寫法:
var fnClass = function(){
this.fnKey=function(){
}
this.props="";
}

這種寫法是的調用 方式是
fnClass obj = new fnClass();
obj.fnKey();

第二種寫法是js的面向對象編程 得自己慢慢的理解哈

熱點內容
2017法治在線 發布:2025-07-02 22:14:08 瀏覽:564
天津市二中院法官助理 發布:2025-07-02 22:00:45 瀏覽:220
租賃合同適用合同法嗎 發布:2025-07-02 21:58:35 瀏覽:871
財產公證在法律效力嗎 發布:2025-07-02 21:53:53 瀏覽:295
武城法院長 發布:2025-07-02 21:52:45 瀏覽:587
行政訴訟法司法解釋2 發布:2025-07-02 21:49:26 瀏覽:747
小品講合同法的 發布:2025-07-02 21:45:13 瀏覽:538
2018年婚姻法離婚條例 發布:2025-07-02 21:45:06 瀏覽:679
最新中華人民共和國合同法全文下載 發布:2025-07-02 21:43:58 瀏覽:735
立法法90條 發布:2025-07-02 21:41:33 瀏覽:846