脚本宝典收集整理的这篇文章主要介绍了js實例教程-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.');
};
. 代碼如下:
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.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.jQuery.myPlugin = {
2.foo:function() {
3.alert('This is a test. This is only a test.');
4.},
5.bar:function(param) {
6.alert('This function takes a parameter, which is "' + param + '".');
7.}
8.};
. 代碼如下:
1.(function($){
2.$.fn.extend({
3.pluginName:function(opt,callback){
4. // Our plugin implementation code goes here.
5.}
6.})
7.})(jQuery);
. 代碼如下:
1.(function($) {
2.$.fn.pluginName = function() {
3. // Our plugin implementation code goes here.
4.};
5.})(jQuery);
. 代碼如下:
1.$.fn.hilight = function() {
2. // Our plugin implementation code goes here.
3.};
4.我們的插件通過這樣被調用:
5.$('#myDiv').hilight();
. 代碼如下:
1.// plugin definITion
2.$.fn.hilight = function(options) {
3. VAR defaults = {
4. foreground: 'red',
5. background: 'yellow'
6. };
7. // Extend our default options with those provided.
8. var opts = $.extend(defaults, options);
9. // Our plugin implementation code goes here.
10.};
11.我們的插件可以這樣被調用:
12.$('#myDiv').hilight({
13. foreground: 'blue'
14.});
. 代碼如下:
1.// plugin definition
2.$.fn.hilight = function(options) {
3. // Extend our default options with those provided.
4. // Note that the First arg to extend is an empty object -
5. // this is to keep From overriding our "defaults" object.
6. var opts = $.extend({}, $.fn.hilight.defaults, options);
7. // Our plugin implementation code goes here.
8.};
9.// plugin defaults - added as a property on our plugin function
10.$.fn.hilight.defaults = {
11. foreground: 'red',
12. background: 'yellow'
13.};
14.現在使用者可以包含像這樣的一行在他們的腳本里:
15.//這個只需要調用一次,且不一定要在ready塊中調用
16.$.fn.hilight.defaults.foreground = 'blue';
17.接下來我們可以像這樣使用插件的方法,結果它設置藍色的前景色:
18.$('#myDiv').hilight();
. 代碼如下:
//這個只需要調用一次,且不一定要在ready塊中調用
$.fn.hilight.defaults.foreground = 'blue';
接下來我們可以像這樣使用插件的方法,結果它設置藍色的前景色:
$('#myDiv').hilight();
如你所見,我們允許使用者寫一行代碼在插件的默認前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的默認值:
// 覆蓋插件缺省的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
// 使用一個新的缺省設置調用插件
$('.hilightDiv').hilight();
// ...
// 通過傳遞配置參數給插件方法來覆蓋缺省設置
$('#green').hilight({
foreground: 'green'
});
. 代碼如下:
1.// plugin definition
2.$.fn.hilight = function(options) {
3. // iterate and reformat each matched element
4. return this.each(function() {
5. var $this = $(this);
6. // ...
7. var markup = $this.html();
8. // call our format function
9. markup = $.fn.hilight.format(markup);
10. $this.htML(markup);
11. });
12.};
13.// define our format function
14.$.fn.hilight.format = function(txt) {
15.return '<strong>' + txt + '</strong>';
16.};
. 代碼如下:
$.fn.cycle.transitions = {
// ...
};
. 代碼如下:
1.(function($) {
2. // plugin definition
3. $.fn.hilight = function(options) {
4. debug(this);
5. // ...
6. };
7. // private function for debugging
8. function debug($obj) {
9. if (window.console && window.console.LOG)
10. window.console.log('hilight selection count: ' + $obj.size());
11. };
12.// ...
13.})(jQuery);
. 代碼如下:
1.$.fn.hilight = function(options) {
2. // ...
3. // build main options before element iteration
4. var opts = $.extend({}, $.fn.hilight.defaults, options);
5. return this.each(function() {
6. var $this = $(this);
7. // build element specific options
8. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
9. //...
. 代碼如下:
1.<!-- markup -->
2.<p class="hilight { background: 'red', foreground: 'white' }">
3. Have a nice day!
4.</p>
5.<p class="hilight { foreground: 'orange' }">
6. Have a nice day!
7.</p>
8.<p class="hilight { background: 'green' }">
9. Have a nice day!
10.</p>
. 代碼如下:
1.// 創建一個閉包
2.(function($) {
3. // 插件的定義
4. $.fn.hilight = function(options) {
5. debug(this);
6. // build main options before element iteration
7. var opts = $.extend({}, $.fn.hilight.defaults, options);
8. // iterate and reformat each matched element
9. return this.each(function() {
10. $this = $(this);
11. // build element specific options
12. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
13. // update element styles
14. $this.css({
15. backgroundColor: o.background,
16. color: o.foreground
17. });
18. var markup = $this.html();
19. // call our format function
20. markup = $.fn.hilight.format(markup);
21. $this.html(markup);
22. });
23. };
24. // 私有函數:debugging
25. function debug($obj) {
26. if (window.console && window.console.log)
27. window.console.log('hilight selection count: ' + $obj.size());
28. };
29. // 定義暴露format函數
30. $.fn.hilight.format = function(txt) {
31. return '<strong>' + txt + '</strong>';
32. };
33. // 插件的defaults
34. $.fn.hilight.defaults = {
35. foreground: 'red',
36. background: 'yellow'
37. };
38.// 閉包結束
39.})(jQuery);
. 代碼如下:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //頁面上為:
. 代碼如下:
1.$.extend({
2.add:function(a,b){return a+b;}
3.});
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.');
};
. 代碼如下:
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.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.jQuery.myPlugin = {
2.foo:function() {
3.alert('This is a test. This is only a test.');
4.},
5.bar:function(param) {
6.alert('This function takes a parameter, which is "' + param + '".');
7.}
8.};
. 代碼如下:
1.(function($){
2.$.fn.extend({
3.pluginName:function(opt,callback){
4. // Our plugin implementation code goes here.
5.}
6.})
7.})(jQuery);
. 代碼如下:
1.(function($) {
2.$.fn.pluginName = function() {
3. // Our plugin implementation code goes here.
4.};
5.})(jQuery);
. 代碼如下:
1.$.fn.hilight = function() {
2. // Our plugin implementation code goes here.
3.};
4.我們的插件通過這樣被調用:
5.$('#myDiv').hilight();
. 代碼如下:
1.// plugin definition
2.$.fn.hilight = function(options) {
3. var defaults = {
4. foreground: 'red',
5. background: 'yellow'
6. };
7. // Extend our default options with those provided.
8. var opts = $.extend(defaults, options);
9. // Our plugin implementation code goes here.
10.};
11.我們的插件可以這樣被調用:
12.$('#myDiv').hilight({
13. foreground: 'blue'
14.});
. 代碼如下:
1.// plugin definition
2.$.fn.hilight = function(options) {
3. // Extend our default options with those provided.
4. // Note that the first arg to extend is an empty object -
5. // this is to keep from overriding our "defaults" object.
6. var opts = $.extend({}, $.fn.hilight.defaults, options);
7. // Our plugin implementation code goes here.
8.};
9.// plugin defaults - added as a property on our plugin function
10.$.fn.hilight.defaults = {
11. foreground: 'red',
12. background: 'yellow'
13.};
14.現在使用者可以包含像這樣的一行在他們的腳本里:
15.//這個只需要調用一次,且不一定要在ready塊中調用
16.$.fn.hilight.defaults.foreground = 'blue';
17.接下來我們可以像這樣使用插件的方法,結果它設置藍色的前景色:
18.$('#myDiv').hilight();
. 代碼如下:
//這個只需要調用一次,且不一定要在ready塊中調用
$.fn.hilight.defaults.foreground = 'blue';
接下來我們可以像這樣使用插件的方法,結果它設置藍色的前景色:
$('#myDiv').hilight();
如你所見,我們允許使用者寫一行代碼在插件的默認前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的默認值:
// 覆蓋插件缺省的背景顏色
$.fn.hilight.defaults.foreground = 'blue';
// ...
// 使用一個新的缺省設置調用插件
$('.hilightDiv').hilight();
// ...
// 通過傳遞配置參數給插件方法來覆蓋缺省設置
$('#green').hilight({
foreground: 'green'
});
. 代碼如下:
1.// plugin definition
2.$.fn.hilight = function(options) {
3. // iterate and reformat each matched element
4. return this.each(function() {
5. var $this = $(this);
6. // ...
7. var markup = $this.html();
8. // call our format function
9. markup = $.fn.hilight.format(markup);
10. $this.html(markup);
11. });
12.};
13.// define our format function
14.$.fn.hilight.format = function(txt) {
15.return '<strong>' + txt + '</strong>';
16.};
. 代碼如下:
$.fn.cycle.transitions = {
// ...
};
. 代碼如下:
1.(function($) {
2. // plugin definition
3. $.fn.hilight = function(options) {
4. debug(this);
5. // ...
6. };
7. // private function for debugging
8. function debug($obj) {
9. if (window.console && window.console.log)
10. window.console.log('hilight selection count: ' + $obj.size());
11. };
12.// ...
13.})(jQuery);
. 代碼如下:
1.$.fn.hilight = function(options) {
2. // ...
3. // build main options before element iteration
4. var opts = $.extend({}, $.fn.hilight.defaults, options);
5. return this.each(function() {
6. var $this = $(this);
7. // build element specific options
8. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
9. //...
. 代碼如下:
1.<!-- markup -->
2.<p class="hilight { background: 'red', foreground: 'white' }">
3. Have a nice day!
4.</p>
5.<p class="hilight { foreground: 'orange' }">
6. Have a nice day!
7.</p>
8.<p class="hilight { background: 'green' }">
9. Have a nice day!
10.</p>
. 代碼如下:
1.// 創建一個閉包
2.(function($) {
3. // 插件的定義
4. $.fn.hilight = function(options) {
5. debug(this);
6. // build main options before element iteration
7. var opts = $.extend({}, $.fn.hilight.defaults, options);
8. // iterate and reformat each matched element
9. return this.each(function() {
10. $this = $(this);
11. // build element specific options
12. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
13. // update element styles
14. $this.css({
15. backgroundColor: o.background,
16. color: o.foreground
17. });
18. var markup = $this.html();
19. // call our format function
20. markup = $.fn.hilight.format(markup);
21. $this.html(markup);
22. });
23. };
24. // 私有函數:debugging
25. function debug($obj) {
26. if (window.console && window.console.log)
27. window.console.log('hilight selection count: ' + $obj.size());
28. };
29. // 定義暴露format函數
30. $.fn.hilight.format = function(txt) {
31. return '<strong>' + txt + '</strong>';
32. };
33. // 插件的defaults
34. $.fn.hilight.defaults = {
35. foreground: 'red',
36. background: 'yellow'
37. };
38.// 閉包結束
39.})(jQuery);
. 代碼如下:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //頁面上為:
. 代碼如下:
1.$.extend({
2.add:function(a,b){return a+b;}
3.});
覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!
以上是脚本宝典为你收集整理的js實例教程-jQuery插件開發全解析全部内容,希望文章能够帮你解决js實例教程-jQuery插件開發全解析所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。