jquery扩展

小灰灰 2022-08-27 05:45 194阅读 0赞

## [实现jQuery扩展总结][jQuery] ##

开发自己需要的jQuery插件，看个示例说明  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<title> new document </title>  
<meta name="generator" content="editplus">  
<meta name="author" content="">  
<meta name="keywords" content="">  
<meta name="description" content="">  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>  
<script type="text/javascript">  
/\*  
jQuery插件的开发包括两种：  
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，  
另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。  
  
1、类级别的插件开发  
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：  
\*/  
//1.1定义一个全局函数  
jQuery.foo = function() \{  
alert('添加一个新的全局函数');  
\}  
//定义多个全局函数  
jQuery.bar = function() \{  
alert('再增加一个全局函数');  
\}  
//1.2使用extend定义全局函数  
jQuery.extend(\{  
foo1:function() \{  
alert('extend 定义全局函数1');  
\},  
bar1:function() \{  
alert('extend 定义全局函数2');  
\}  
\});  
//1.3 使用命名空间定义函数  
jQuery.plugin = \{  
foo2:function() \{  
alert('使用namespace定义函数');  
\}  
\}  
  
$(function()\{  
$.foo();  
$.bar();  
$.foo1();  
$.bar1();  
$.plugin.foo2();  
\});  
  
/\*  
2、对象级别的插件开发  
对象级别的插件开发需要如下的两种形式:  
\*/  
//形式一  
(function($)\{  
$.fn.extend(\{  
foo3:function() \{  
alert('对象级别插件extend方式1');  
\},  
bar3:function() \{  
alert('对象级别插件extend方式2');  
\}  
\})  
\})(jQuery);  
  
//形式二  
(function($)\{  
$.fn.foo4 = function() \{  
alert('对象级别插件fn方式');  
\}  
\})(jQuery);  
  
//接收参数来控制插件的行为  
(function($)\{  
$.fn.bar4 = function(options) \{  
var defaults = \{aaa:'1',bbb:'2'\};  
var opts = $.extend(defaults, options);  
alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);  
\}  
\})(jQuery);  
  
//提供公有方法访问插件的配置项值  
(function($)\{  
$.fn.foo5 = function(options) \{      
var opts = $.extend(\{\}, $.fn.foo5.defaults, options);  
alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);  
\}  
$.fn.foo5.defaults = \{aaa:'1',bbb:'2'\};  
\})(jQuery);  
  
//提供公有方法来访问插件中其他的方法  
(function($)\{  
$.fn.bar5 = function(options) \{  
$.fn.bar5.alert(options);  
\}  
$.fn.bar5.alert = function(params) \{  
alert(params);  
\}  
\})(jQuery);  
  
$(function()\{  
$('\#test').foo3();  
$('\#test').bar3();  
$('\#test').foo4();  
$('\#test').bar4();  
$('\#test').bar4(\{aaa:'3'\});  
$('\#test').bar4(\{aaa:'3',bbb:'4'\});  
$('\#test').foo5();  
$('\#test').foo5(\{aaa:'5',bbb:'6'\});  
$('\#test').bar5('aaaa');  
\});  
</script>  
</head>  
  
<body>  
<div id="test"></div>  
</body>  
</html>

[jQuery]: http://www.cnblogs.com/ellisonDon/archive/2012/08/12/2634503.html