脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。