利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法:
1、jQuery.extend();
2、jQuery.fn.extend();
3、通过$.widget()应用jQuery UI的部件工厂方式创建。
由于第三种方式通常用于开发比较高级的jQuery的部件,开发难度较大,所以第一种和第二种方式用的更为广泛,下面主要对前两种方式的区别和联系以及使用的方法做一些介绍。
简要的说明一下: jQuery是一个封装的非常好的类,$(“#btn”)就相当于创建了一个jQuery的实例。
1、方法jQuery.fn .extend()= jQuery.prototype.extend(),也就是说利用方法二扩展插件相当于对jQuery的原型进行扩展,每个实例化的对象都可以直接调用扩展的方法。如:
$.fn.extend({
Init:function(){
自己写的代码
}
})
通过$(“#btn”)实例化后就可以直接调用init方法,$(“#btn”).init().
2、通过方法1j传入一个参数时,进行插件的开发相当于对jQuery的静态方法进行了扩展,扩展的方法需要通过类来调用,如:$.extend({
Init:function(){};
} )
Init方法只能通过$.init()调用,因为它是静态的方法不能通过实例调用。
3、当方法一中传入了多个的参数时,可以通过$.extend()方法对对象进行扩展即用一个或多个其他对象来扩展一个对象,返回被扩展的对象Objectj Query.extend( target, object1, [objectN])
如:var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果:settings == { validate: true, limit: 5, name: "bar" } 通过结果可以知道,当后面对象与前面对象中具有同名的参数时前面的参数会被后面的参数给覆盖,没有的就合并。
但是这其中会有深度拷贝和浅拷贝的问题:
当方法中传入的第一个参数不为true时表示当前的拷贝为浅拷贝:
var a={};
var b={name:{age:19}};
$.extend(a,b)
a.name.age=100;
alert(b.name.age);//弹出的将会是100
(1)浅拷贝时如果对象b中具有对象,然后将b拷贝给a,且后面a对其作了修改则b对象中的对象也会改变,但是引用类型的将不会被修改。如:
var a={};
var b={age:19,name:{height:100}};
$.extend(a,b)
a.age=100;
alert(b.age);//弹出的将会是19
(2)如果进行深拷贝则直接给方法1传入参数true就好,不管a 作何修改b对象的值都不会发生变化。
var a={};
var b={name:{age:19}};
$.extend(true,a,b)
a.name.age=100;
alert(b.name.age);//弹出的将会是19
4、为了避免和其他的js包发生冲突,同时避免$符号被重写,通常在扩展插件时会定义一个匿名的带有$为参数的函数来进行插件扩展。(function( $ ){
$.fn.tooltip = function( options ) {
};
})( jQuery );
//等价于
(function( $ ){
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );
直接定义一个匿名的函数并且调用同时传递参数jQuery,因而在后面的使用时$就代表的是jQuery。
利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系的更多相关文章
- jQuery extend()和jQuery.fn.extend()区别和详解
1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部 ...
- JQ插件写法 扩展JQ方法
目录: 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.cl ...
- jquery编辑插件tinyMCE的使用方法
jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件,它不像FckEditor那样需要针对专门的后台语言集成,tinyMCE既能做到轻松集成asp.net,php,jav ...
- 利用JQuery直接调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod] 命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...
- jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍
这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...
- 利用jquery mobiscroll插件选择日期、select、treeList的具体运用
体验更优排版请移步原文:http://blog.kwin.wang/programming/jquery-mobiscroll-select-treeList.html mobiscroll是个很好用 ...
- 利用jQuery npoi插件 asxh一般处理文件实现excel的下载
最近开发的过程中遇到这么一个问题,利用ajax和ashx文件实现下载功能.发现代码调试走完之后并没有弹出下载框. 研究了一段时间之后发现解决这种问题有两种方法,1.ajax获取数据集在前台做处理实现导 ...
- 利用jquery.backstretch插件,背景切换
//首页自动更换背景特效开始============================================1.引用文件<script src="jquery.js" ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
随机推荐
- Ubuntu 16.04 64位 搭建 node.js NodeJS 环境
我的系统环境: Ubuntu 16.04 64位 本文内容亲测可用, 请放心食用 使用淘宝镜像 淘宝镜像官网是https://npm.taobao.org/ 使用淘宝镜像前请自行安装好 npm 和 n ...
- iOS,监听tableVIew的偏移量
1. 添加监听 [self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObs ...
- ldd 命令用于判断某个可执行的binary档案含有什么动态链接库(so)
[root@NB ok]# ldd /bin/ls linux-vdso.so. => (0x00007ffd7dbf6000) libselinux.so. => /lib64/libs ...
- 浏览器-10 Chromium 移动版
移动版 chromium 的iOS版和Android是为两个流行的移动操作系统设计的, UI方面进行了 较大的重新设计; 两者从外观上看颇为相似,但是其内部的渲染引擎的差别非常的大,原因在于iOS对应 ...
- devexpress 安装及破解
安装dx DXperience-10.1.4 破解文件下载
- android--asp.net webservice 返回json
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- ASP.NET Cache缓存的用法
本文导读:在.NET运用中经常用到缓存(Cache)对象.有HttpContext.Current.Cache以及HttpRuntime.Cache,HttpRuntime.Cache是应用程序级别的 ...
- Windows Server 2008 R2 DNS 服务器迁移
- python字符串
字符串格式化 字符串格式化使用字符串格式化操作符%来实现:格式化字符串 % 值(字符串或者数字或者多个值的元组,字典) >>> format = "hello, %s. % ...
- 利用OTP为odoo增强安全访问
两次验证是广泛应用于各大站点的验证机制,我们今天利用Google Authentication来实现Odoo的两次验证,防止撞库或密码泄露等引起的安全问题. 1. 二次验证的原理 参见 http:// ...