这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么。

来看下jQuery的源码是怎么样定义的:

(function( window, undefined ) { 

var jQuery = (function() {
// 构建jQuery对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
} // jQuery对象原型
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
// something to do
}
}; // Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn; // 合并内容到第一个参数中,后续大部分功能都通过该函数扩展
// 通过jQuery.fn.extend扩展的函数,大部分都会调用通过jQuery.extend扩展的同名函数
jQuery.extend = jQuery.fn.extend = function() {}; // 在jQuery上扩展静态方法
jQuery.extend({
// something to do
}); // 到这里,jQuery对象构造完成,后边的代码都是对jQuery或jQuery对象的扩展
return jQuery; })(); window.jQuery = window.$ = jQuery;
})(window);

这里我们可以看到:

复制代码代码如下:
var jQuery = function( selector, context ) { 
return new jQuery.fn.init( selector, context, rootjQuery ); 

jQuery 其实jQuery.fn.init()返回一个对象。那么jquery.fn.init()返回的又是什么呢?

复制代码代码如下:
jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function( selector, context, rootjQuery ) { 
// something to do 

}; 

就是从这里来的,一个javascript对象。

这里有个问题。

复制代码代码如下:
jQuery.fn = jQuery.prototype 

那么就是 将jQuery 的原型对象赋值给了 jQuery.fn。

再看下面:

复制代码代码如下:
jQuery.fn.init.prototype = jQuery.fn; 

看到这里我有一个想法。就是 将jQuery.fn 给了 jQuery.fn.init.prototype.

那么在这之前jQuery.fn.init.prototype.是什么?

是不是没有?这个时候它的原型是{};

那么为了可以去调用init外面的方法。就做了一个处理。

将jQuery.fn 赋值给jQuery.fn.init.prototype.这样的话,

jQuery.fn.init.prototype的原型也就是jQuery的原型对象就是 jQuery.fn ( 注意jQuery = function(return new jQuery.fn.init()))。

赋值了以后。在调用的时候,当init中没有方法的时候,就会去原型函数中调用。

那么这样的话。

你可能会想到这样一个东东:

复制代码代码如下:
jQuery.extends() 
jQuery.fn.extends() 

我想你应该明白它们的区别了吧。

jQuery.extends()是直接扩展jQuery.而jQuery.fn.extends(),很明显是扩展的原型。

这就是为什么jQuery.fn.extends()中的大部分方法来自己于jQuery.extends()。

这里又将 jQuery.fn 赋值给了 jQuery.fn.init.prototype.

那么就有这样的一个关系:

复制代码代码如下:
jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype 
转自:http://www.jb51.net/article/41903.htm
 

jQuery为开发插件提拱了两个方法,分别是:

JavaScript代码

  • jQuery.fn.extend(object);
  • jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

JavaScript代码

  • jQuery.fn = jQuery.prototype = {
  •    init: function( selector, context ) {//…. 
  •    //……
  • };

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

XML/HTML代码

  • $.extend({
  •   add:function(a,b){return a+b;}
  • });

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

JavaScript代码
  • $.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

JavaScript代码
  • $.fn.extend({
  • alertWhileClick:function(){
  • $(this).click(function(){
  • alert($(this).val());
  • });
  • }
  • });
  • $(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>

$(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点。

JQuery的extend扩展方法:
      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
      一、Jquery的扩展方法原型是:   

 extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

  var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果

  result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

二、省略dest参数
      上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
   1、$.extend(src)
   该方法就是将src合并到jquery的全局对象中去,如:

 $.extend({
hello:function(){alert('hello');}
});

  就是将hello方法合并到jquery的全局对象中。

Jquery的extend方法还有一个重载原型:

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true,  {},  
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:

result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {},  
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);

那么合并后的结果就是:

  result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

  以上就是$.extend()在项目中经常会使用到的一些细节。

jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍的更多相关文章

  1. jquery中的编程范式,即jquery的牛逼之处

    转自:http://www.iteye.com/topic/1119283 对jquery理解比较深,积累一下,整理了一下格式,就当练习一下 markdown 语法. 本文将结合jQuery源码的实现 ...

  2. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  3. Jquery自定义插件之$.extend()、$.fn和$.fn.extend()

    jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...

  4. 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

  5. 理解jquery的$.extend()、$.fn和$.fn.extend()

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  6. 【转】jquery的extend和fn.extend

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展j ...

  7. jquery的$.extend、$.fn.extend、 jQuery.extend( target, object1, [objectN])作用及区别

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...

  8. $.extend() 或 jQuery.extend() 与 $.fn.Xxx 或 jQuery.fn.extend(object) 之jQuery插件开发

    jQuery为开发插件提拱了两个方法 语法现象1:$.extend() 或 jQuery.extend() 或 jQuery.extend(object)//可以理解为为jQuery类添加类方法或静态 ...

  9. jQuery - jQuery的$.extend和$.fn.extend作用及区别

    jQuery为开发插件提拱了两个方法,分别是: 1. jQuery.fn.extend(); 2. jQuery.extend(); 虽然 javascript没有明确的类的概念,但是可以构建类似类的 ...

随机推荐

  1. Repeater控件实现数据绑定,并实现分页效果

    前台显示代码 <pre name="code" class="csharp"><asp:Repeater ID="Repeater1 ...

  2. mysql优化方案总结

    u       Mysql数据库的优化技术 对mysql优化时一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索引.主键索引.唯一索引u ...

  3. 使用md5判断网站内容是否被篡改

    该脚本比较简单,判断网站根目录是否被篡改,如果被篡改把篡改的文件发送到管理员邮箱 #!/bin/bash #author:luodi date:// #use md5 to check web sit ...

  4. ZRender源码分析5:Shape绘图详解

    回顾 上一篇说到:ZRender源码分析4:Painter(View层)-中,这次,来补充一下具体的shape 关于热区的边框 以圆形为例: document.addEventListener('DO ...

  5. 自定义清除重复uses-permission申明的AS插件

    分享一个我刚到天下布医工作时,写的一个android studio插件. 做安卓项目时,经常继承一些第三方sdk,这些sdk都会申请权限,导致AndroidManifest.xml中的uses-per ...

  6. 稠密图(邻接矩阵),并查集,最短路径(Dijkstra,spfa),最小生成树(kruskal,prim)

    全部函数通过杭电 1142,1162,1198,1213等题目测试. #include<iostream> #include<vector> #include<queue ...

  7. 习惯使用断言Assert

    一直在给党做项目,我们这些可怜兮兮的学生都没太多时间安排自己的活动了,写个blog都要在中午休息的时间. 项目用的是.NET,本来也想分享一些干货点的东西,但博客园里的前辈把这类文章已经分享泛滥了,想 ...

  8. 【转】vs2010下创建webservice

    题记:学了六个月java一直想做java,没想到进了.NET项目组,还是VB2012,还有WebService,压力山大,这篇纯粹看看多图的效果,版主不要怪罪. Visual Studio 2010默 ...

  9. Mysql两种存储引擎的优缺点

    MyISAM引擎是一种非事务性的引擎,提供高速存储和检索,以及全文搜索能力,适合数据仓库等查询频繁的应用.MyISAM中,一个table实际保存为三个文件,.frm存储表定义,.MYD存储数据,.MY ...

  10. js堆栈溢出错误

    function prompt() { var answer = prompt("What is your name","") if (answer) { al ...