利用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()区别与联系的更多相关文章

  1. jQuery extend()和jQuery.fn.extend()区别和详解

    1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部 ...

  2. JQ插件写法 扩展JQ方法

    目录: 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.cl ...

  3. jquery编辑插件tinyMCE的使用方法

    jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件,它不像FckEditor那样需要针对专门的后台语言集成,tinyMCE既能做到轻松集成asp.net,php,jav ...

  4. 利用JQuery直接调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

  5. jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍

    这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...

  6. 利用jquery mobiscroll插件选择日期、select、treeList的具体运用

    体验更优排版请移步原文:http://blog.kwin.wang/programming/jquery-mobiscroll-select-treeList.html mobiscroll是个很好用 ...

  7. 利用jQuery npoi插件 asxh一般处理文件实现excel的下载

    最近开发的过程中遇到这么一个问题,利用ajax和ashx文件实现下载功能.发现代码调试走完之后并没有弹出下载框. 研究了一段时间之后发现解决这种问题有两种方法,1.ajax获取数据集在前台做处理实现导 ...

  8. 利用jquery.backstretch插件,背景切换

    //首页自动更换背景特效开始============================================1.引用文件<script src="jquery.js" ...

  9. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

随机推荐

  1. Received an invalid response. Origin 'null' is therefore not allowed access

    Received an invalid response. Origin 'null' is therefore not allowed access. 今天在做二级联动,使用ajax请求xml数据, ...

  2. sqlserver 行列转换

    http://www.cnblogs.com/zhangzt/archive/2010/07/29/1787825.html PIVOT用于将列值旋转为列名(即行转列),在SQL Server 200 ...

  3. PHP的命名空间 与类是自动加载

    namespace 假设如果不使用namespace,那么每个类在一个项目中的名字就必须是固定的.因为php在new的时候不管是调用autoload还是调用已加载过的类,都存在一个类名对应的文件.所以 ...

  4. Yii2 数据查询

    转载来自: http://www.yiichina.com/tutorial/95 数据查询 User::find()->all(); 此方法返回所有数据: User::findOne($id) ...

  5. CozyRSS开发记录1-原型图与Grid

    CozyRSS开发记录1-原型图与Grid 1.使用MockPlus画出最简陋的原型图 这个界面参考了目前我最常使用的RSS阅读-傲游浏览器的内置RSS阅读器.主体框架划分为上.左下.右下三块,分别是 ...

  6. T-SQL 基础学习 03

    局部变量 在T-SQL中,局部变量的名称必须以标记@作为前缀 语法 DECLARE @变量名数据类型 局部变量的赋值 方法一 SET @变量名 = 值 方法二 SELECT @变量名 = 值 SET和 ...

  7. 自定义ActionBar完全覆盖系统的

    //加载ActionBar的方法 @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this ...

  8. life_motto

    simple,dedicated,healthy life style,love those u love...

  9. 数位DP BZOJ 1026 [SCOI2009]windy数

    题目链接 前面全是0的情况特判 #include <bits/stdc++.h> int dp[10][10]; int digit[10]; int DFS(int pos, int v ...

  10. D3.js部署node环境开发

    总结一段D3.js部署node环境的安装过程 准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系 ...