jQuery extend() & jQuery.fn.extend()，插件编写
资料来源：网上资料整理并自行改编测试。复制以下代码并依赖jquery.js，jquery.validate.js即可执行。有误之处，请@我啊，敬请赐教。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery extend() & jQuery.fn.extend()</title>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
function log(){
console.log(arguments[0]);
} //jQuery实现log
jQuery.extend({
log:function(){log(arguments[0])}
});
18 $.log("A test to console.log something by jQuery.extend!"); var result=null;
log("======================== test1 ========================");
//jQuery.extend函数，简单理解，就是合并对象,把后面的合入前面的。如下例：
result = $.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
log(result); //得到结果：Object {name: "Jerry", age: 21, sex: "Boy"} log("======================== test2 ========================");
result=$.extend({name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
log(result); //得到结果同上 log("======================== test3 ========================");
var jack = {name:"Jack",age:21};
var jane = {name:"Jane",sex:"girl",birthday:'2015-01-01'};
result=$.extend(result,jack,jane);
log(result); //得到结果：Object {name: "jane", age: 21, sex: "gitl", birthday: "2015-01-01"} log("======================== test4 ========================");
//Jquery.extend函数重载原型： extend(boolean,dest,src1,src2,src3...)
//第一个参数boolean代表是否进行深度拷贝，其余参数同上。（重写并且继承自己对象没有的参数）
//深层拷贝，例子：
result=$.extend(
true,
{},
{ name: "John", location: {state: "Alaska",county:"USA"} },
44 { name: "Jack", location: {city: "Beijing",county:"China"}}
);
log(result); //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China",state: "Alaska"}} log("======================== test5 ========================");
//浅拷贝就是（重写但不继承自己子对象没有的参数），例子：
result=$.extend(
false,
{},
{ name: "John", location: {state: "Alaska",county:"USA"} },
54 { name: "Jack", location: {city: "Beijing",county:"China"} }
);
log(result); //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China"}} log("======================== test6 ========================");
result=$.extend(
false,
{},
{ name: "John", location: {state: "Alaska",county:"USA"} },
63 { name: "Jack",location:{}}
64 );
log(result); //得到结果：Object {name: "Jack", location: {city: "Beijing",county: "China"}} log("======================== test7 ========================");
//jQuery对象下创建一个子对象，
jQuery.extend({
yourName:'ming',
age:12,
sex:'boy'
});
log($.yourName);// 'Ming'
log($.age); // 12
log($.sex); // 'boy' log("======================== test8 ========================");
//这个子对象名其实就是在jQuery全局对象中扩展一个myPlugin的命名空间，
//其主要作用是把前面的jQuery对象创建的全局函数都封闭在这个子对象里面，避免jQuery对象的全局函数中发生命名空间的冲突。
//这样，其实就是我们创建的一个插件的名字
jQuery.myPlugin = {
yourName:'ming',
age:12,
sex:'boy',
foo:function(){log('abc')},
bar:function(){log(123)}
};
log($.myPlugin.yourName);// 'Ming'
log($.myPlugin.age);// 12
log($.myPlugin.sex);// 'boy'
$.myPlugin.foo();// 'abc'
$.myPlugin.bar();// 123 log("======================== test9 ========================");
//用jQuery.extend()这样改写上面的代码：
jQuery.extend({
myPlugin:{
foo:function(){log('abc')} ,
bar:function(){log(123)} ,
yourName:'ming',
age:12 ,
sex:'boy'
}
}
);
log($.myPlugin.yourName);// 'Ming'
log($.myPlugin.age);// 12
log($.myPlugin.sex);// 'boy'
$.myPlugin.foo();// 'abc'
$.myPlugin.bar();// 123 log("======================== test10 ========================");
//我们还可以在上面的基础上，再用jQuery.extend(target,obj)对myPlugin对象（即插件）进一步扩展：
var temp = {
hello:function(){return 'hello';}
};
jQuery.extend($.myPlugin , temp);
log($.myPlugin.hello());// 'hello' log("======================== test11 ========================");
//或者修改myPlugin映射中的名-值对：
jQuery.extend($.myPlugin , {sex:'2'} );//后面的映射参数会覆盖前面myPlugin的映射
log($.myPlugin.sex);// '2' log("======================== test12 ========================");
//jQuery.extend和jQuery.fn.extend的区别
//我们先把jQuery看成了一个类，这样好理解一些。
//jQuery.extend()，是扩展的jQuery这个类。
//假设我们把jQuery这个类看成是人类，能吃饭能喝水能跑能跳，现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。
//这样的话，不论是男人，女人，xx人.....等能继承这个技能（方法）了。
//就像上面写的那样：
jQuery.extend({
log:function(){console.log(arguments[0]);}
});
$.log("这样就能打印出来这个字符串");//这样(控制台F12)就能打印出来这个字符串 log("======================== test13 ========================");
//这说明啥啊，这说明$.log变成了jQuery这个类本身的方法（object）嘛。他现在能”唱歌“了。
//但是吧，这个能力啊，只有代表全人类的 jQuery 这个类本身，才能用啊。你个人想用，你张三李四王五麻六，你个小草民能代表全人类嘛？
//所以啊，这个扩展也就是所谓的静态方法。只跟这个类本身有关。跟你具体的实例化对象是没关系滴。
//我们再看看jQuery.fn.extend()这个方法。
//从字面理解嘛，这个拓展的是jQuery.fn的方法。
//jQuery.fn是啥玩意呢？
//源码如下：
//jQuery.fn = jQuery.propotype = {
// init:function(){}
// ...
//}
//哦，原来jQuery.fn=jQuery.prototype，就是原型啊。
//那就一目了然了，jQuery.fn.extend拓展的是jQuery对象（原型的）的方法啊！
//对象是啥？就是类的实例化嘛，例如
//$("#abc")
//这个玩意就是一个实例化的jQuery对象嘛。
//那就是说，jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！他得是张三李四王五痳六这些实例化的对象才能用啊。
//说白了就是得这么用（假设xyz()是jQuery.fn.extend()拓展的方法）：
//$('selector').xyz();
//你要是这么用$.xyz()；是会出错误滴。如：
jQuery.fn.extend({
display:function(){
$(this).css("display","block");
}
}); try{
166 $.display();
}catch(err){
$.log("请亲进入debug模式，设置断点后看效果哈");
$.log(err);
$("#abc").html("亲，能看到我了吧");
//$("#abc").display();//注释下看效果也可以哈
} //jQuery.fn.extend()和上边的jQuery.extend()区别区别一目了然吧？
//其实吧，jQuery.extend()这个方法，主要是用来拓展个全局函数啦，例如$.ajax()这种，要不就是拓展个选择器啦，例如$.fn.each()，当选择器用。
//大部分插件都是用jQuery.fn.extend()。
});
</script>
</head>
<body>
<p id="abc" style="display:none">亲，看不到我吧</p>
</body>
</html>
jQuery extend() & jQuery.fn.extend()，插件编写的更多相关文章
- jQuery开发自定义插件 $.extend()与$.fn.extend()
jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...
- jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- 理解jQuery的$.extend与$.fn.extend
https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...
- $.fn与$.fx什么意思； $.extend与$.fn.extend用法区别； $(function(){})和(function(){})(jQuery)
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...
- jQuery插件开发中$.extend和$.fn.extend辨析
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...
- 插件的理解$.extend()与$.fn.extend()
插件的理解.$.extend()与$.fn.extend() 插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.exte ...
- $.extend(),与$.fn.extend() 讲解
$.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...
- $.extend()和$.fn.extend()用法和区别
$.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...
- jQuery插件的开发之$.extend(),与$.fn.extend()
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种 ...
- 利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...
随机推荐
- centOS中wget的使用方法
对于 Linux 用户来说,几乎每天都在使用它. 下面为大家介绍几个有用的 CentOS wget 小技巧,可以让你更加高效而灵活的使用CentOS wget. CentOS wget 使用技巧 $ ...
- SSH项目整合教学Eclipse搭建SSH（Struts2+Spring3+Hibernate3）
这篇博文的目的 尝试搭建一个完整的SSH框架项目. 给以后的自己,也给别人一个参考. 读博文前应该注意: 本文提纲:本文通过一个用户注册的实例讲解SSH的整合.创建Struts项目,整合Hiberna ...
- Java 多态 虚方法
Java中多态的实现方式:接口实现,继承父类进行方法重写,同一个类中进行方法重载. 看代码: package com.company; public class Main { public stati ...
- .Net内存优化的几点经验
以前从来没有想过.Net开发居然存在内存无法释放的问题,总是认为GC给我处理好了一切.现在GIS二次开发结合三维球开发,没有想到存在如此严重的内存增长,很快内存就不够用了,导致系统各种不稳定.球体和三 ...
- 装饰器、生成器，迭代器、Json & pickle 数据序列化
1. 列表生成器:代码例子 a=[i*2 for i in range(10)] print(a) 运行效果如下: D:\python35\python.exe D:/python培训/s14/day ...
- bash变量操作
1.条件变量替换: Bash Shell可以进行变量的条件替换,既只有某种条件发生时才进行替换,替换 条件放在{}中. (1) ${value:-word} 当变量未定义或者值为空时,返回值为word ...
- NSNotificationCenter
- (void)viewDidLoad { [super viewDidLoad]; UIButton *btn = [UIButton buttonWithType:UIButtonTypeCust ...
- Swift游戏实战-跑酷熊猫 11 欢迎进入物理世界
物理模拟是一个奇妙的事情,以此著名的游戏有愤怒的小鸟.我们在这节将会一起来了解如何设置重力,设置物理包围体,碰撞的检测. 要点: 设置物理检测的代理: 让主场景遵循SKPhysicsContactDe ...
- PostgreSQL simple select(group by and insert into ...select)
warehouse_db=# create table student(number int primary key,name varchar(20),age int);CREATE TABLEwar ...
- MVC权限管理系统dwpro项目权限按钮无故自动消失问题
关于那个权限按钮丢失的问题修改方法如下: 把源文件中的XmlConfig文件夹里的Config.xml文件剪切到根目录下,并修改文件名为:app.config(关键是后缀不是xml了是config) ...