实现jQuery扩展总结
2015-11-23 17:24
671 查看
开发自己需要的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>
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因