jQuery开发自定义插件 $.extend()与$.fn.extend()
jQuery extend()和jQuery.fn.extend()
jQuery提供两个用于封装扩展的方法:
1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直接调用,如$.myFun(); myFun为自定义的方法)
2.$.fn.extend();扩展jQuery实例的成员方法 (如用来扩展一个input框的方法,$.fn = $.prototype,原型)
认识$.extend
$.extend 用法:jQuery.extend( target [, object1 ] [, objectN ] )
它的含义是将object1,object2,object3...合并到target中,生成新的target并返回
如果只想获取到object1,object2,object3...合并后的集合,那么target直接给一个空的对象即可
如:$.extend({},object1,object2,object3...)
使用技巧:
1.如果合并的集合中存在重复的参数名称,那么后面的会覆盖前面的
var obj1 = {
name : 'Mary',
age : '18'
}; var obj2 = {
name : 'Lily',
sex : 'Female'
}; var newObj = $.extend({},obj1,obj2); //newObj最终结果
{
name : 'Lily',
age : '18' ,
sex : 'Female'
}
2.省略dest参数
extend方法中的target是可以省略的,如果省略了,则该方法就只能有一个object参数,而且是将该object合并到调用extend方法的对象中去。有点绕,上例子更明白些。
$.extend(src)
该方法就是将obj合并到jQuery的全局对象中去,如
$.extend({
hello:function(){
alert('hello!');
}
} //全局可调用
$.hello();
3.重载原型
$.extend(boolean,target,obj1,obj2,obj3...)
与前面用法不同的是多了一个boolean参数,boolean 代表是否进行深度拷贝
例子:
var obj1 = {
name : 'John',
score : {
math :'100',
englisth':'99'
}
}; var obj2 = {
age : '18',
score : {
music : '66',
history : '88'
}
}; var result = $.extend(true,{},obj1,obj2); //boolean为true时result最终结果(深度拷贝)
result = {
name : 'John',
age : '18',
score : {
math : '100',
english : '99',
music : '66',
history : '88'
}
} //boolean为false时result最终结果(非深度拷贝)
result = {
name : 'John',
age : '18',
score : {
music : '66',
history : '88'
}
}
//因为obj1,obj2都有score参数,所以obj2会覆盖掉前面obj1的score值
认识$.fn.extend
$.fn.extend 用法:$.fn.extend(object)
含义:把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法,为jQuery实例添加"成员方法", jQuery实例可以直接使用该函数方法。
jQuery.fn.extend = jQuery.prototype.extend
你可以拓展一个对象到jQuery的prototype里去
(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})(jQuery);
$.extend() 与 $.fn.extend()两者的区别
1.两者调用方式不同:
jQuery.extend() 一般由传入的全局函数来调用,主要是用来拓展个全局函数,如$.init(),$.ajax();
jQuery.fn.extend() 一般由具体的实例对象来调用,可以用来拓展选择器,例如$.fn.each();
2.两者的主要功能作用不同:
jQuery.extend(object); 为扩展jQuery类本身,为自身添加新的方法。
jQuery.fn.extend(object);给jQuery实例对象添加方法
3.大部分插件都是用jQuery.fn.extend()
jQuery开发自定义插件 $.extend()与$.fn.extend()的更多相关文章
- [转]jquery开发自定义的插件总结
本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...
- jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- jQuery插件开发中$.extend和$.fn.extend辨析
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...
- $.fn与$.fx什么意思; $.extend与$.fn.extend用法区别; $(function(){})和(function(){})(jQuery)
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...
- 理解jQuery的$.extend与$.fn.extend
https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...
- $.extend()和$.fn.extend()用法和区别
$.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...
- $.extend(),与$.fn.extend() 讲解
$.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...
- $.extend()与$.fn.extend()
jQuery.extend(object) 扩展jQuery对象本身.用来在jQuery命名空间上增加新函数.jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法 ...
- jquery开发js插件
1.需要掌握的知识点 1)(function($){...}(jQuery)):实际上就是匿名函数并且函数用()阔起来,形成闭包,外界对其内部函数没有影响 $(function(){…}); jQ ...
随机推荐
- bootstrap 鼠标悬停显示
1. <button type="button" rel="drevil" data-content="报名截止时间:'+time+'" ...
- Oracle官方非托管Odac驱动与Oracle官方托管odac驱动
方便自己,方便他人,记一次连接oracle的经历,使用 [Oracle官方非托管Odac驱动,Oracle.DataAccess.Client]连接数据库的时候程序会报错,找了很久都不知道是什么原因, ...
- 【SQL注入】mysql中information_schema详解
在MySQL中,把 information_schema 看作是一个数据库,确切说是信息数据库.其中保存着关于MySQL服务器所维护的所有其他数据库的信息.如数据库名,数据库的表,表栏的数据类型与访问 ...
- iOS之创建一个常驻线程
// 当创建一个线程,并且希望它一直存在时,但往往我们创建的线程都是执行完成之后也就停止了,不能再次利用,那么如何创建一个线程可以让他可以再次工作呢,这个时候就需要使用到RunLoop了.下面的是我写 ...
- 如何获取系统Home(Launcher)应用判断用户是否处于home界面
要把我们的应用程序作为home(launcher应用),只需要在AndroidManifest.xml中添加: <category android:name="android.inte ...
- 基于Spring、SpringMVC、MyBatis、Druid、Shrio构建web系统
源码下载地址:https://github.com/shuaijunlan/Autumn-Framework 在线Demo:http://autumn.shuaijunlan.cn 项目介绍 Autu ...
- replace to
要注意的是:插入数据的表必须有主键或者是唯一索引!否则的话,replace into 会直接插入数据,这将导致表中出现重复的数据. MySQL replace into 有三种形式: 1. repla ...
- Grunt参考
Grunt参考: http://www.cnblogs.com/yexiaochai/p/3603389.html http://blog.csdn.net/wangfupeng1988/articl ...
- hdu 6231 -- K-th Number(二分+尺取)
题目链接 Problem Description Alice are given an array A[1..N] with N numbers. Now Alice want to build an ...
- Jenkins Kubernetes Slave 调度效率优化小记
Jenkins K8S Slave 调度效率优化 by yue994488@126.com 使用kubernetes为测试工具Gatling进行大规模压测,压测期间发现Jenkins调度压测实例较慢, ...