文档章节

jQuery.fn.extend与jQuery.extend到底区别在哪?

小近
 小近
发布于 2014/11/11 13:54
字数 771
阅读 13
收藏 0

声明:此文是写给刚接触的人或者是对这一方法概念比较模糊的人。若是您jQuery基础很好,此文就不值得你浪费时间了。

还是先吐个槽,网上都都是转载抄袭,基本上就那么一两篇文章,说的还不清楚....

正文:

其实说白了,从两个方法本身就能看出来端倪。

我们先把jQuery看成了一个类,这样好理解一些。

jQuery.extend(),是扩展的jQuery这个类。

假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。这样的话,不论是男人,女人,xx人.....等能继承这个技能(方法)了。

我们这样写:

12345 jQuery.extend({    liu: function(){        alert('liu');    }});

 然后:$.liu();这样就能打印出来”liu“这个字符串

测试代码如下:

复制代码

<!doctype html><html lang="zh-cmn-Hans-CN"><head>     <meta charset="UTF-8">     <title>Document</title>     <script type="text/javascript" src="jquery-2.1.1.js"></script>     <script type="text/javascript">     ;(function($) {         $.extend({             liu: function(){              alert('liu');         }     });     })(jQuery);    </script>     <script type="text/javascript">     $(document).ready(function() {         $.liu();     });    </script></head><body></body></html>

复制代码

 

 这说明啥啊,这说明.liu()变成了jQuery这个类本身的方法(object)嘛。他现在能”唱歌“了。

但是吧,这个能力啊,只有代表全人类的 jQuery 这个类本身,才能用啊。你个人想用,你张三李四王五麻六,你个小草民能代表全人类嘛?

所以啊,这个扩展也就是所谓的静态方法。只跟这个 类 本身有关。跟你具体的实例化对象是没关系滴。

我们再看看jQuery.fn.extend()这个方法。

从字面理解嘛,这个拓展的是jQuery.fn的方法。

jQuery.fn是啥玩意呢?

源码里是这么写的:

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

 

哦,原来jQuery.fn=jQuery.prototype,就是原型啊。

那就一目了然了,jQuery.fn.extend拓展的是jQuery对象(原型的)的方法啊!

对象是啥?就是类的实例化嘛,例如

1 $("#abc")

 这个玩意就是一个实例化的jQuery对象嘛。

那就是说,jQuery.fn.extend拓展的方法,你得用在jQuery对象上面才行啊!他得是张三李四王五痳六这些实例化的对象才能用啊。

说白了就是得这么用(假设xyz()是拓展的方法):

1 $('selector').xyz();

 你要是这么用$.xyz();是会出错误滴。

例子源码如下:

复制代码

<!doctype html><html lang="zh-cmn-Hans-CN"><head>     <meta charset="UTF-8">     <title>Document</title>     <script type="text/javascript" src="jquery-2.1.1.js"></script>     <script type="text/javascript">     ;(function($) {         $.fn.extend({             liu: function(){              alert('liu');          }     });     })(jQuery);    </script>     <script type="text/javascript">     $(document).ready(function() {         $('div').liu();     });    </script></head><body>     <div></div></body></html>

复制代码

 

 和上边的区别区别一目了然吧?

其实吧,jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如$.ajax()这种,要不就是拓展个选择器啦,例如$.fn.each(),当选择器用。

大部分插件都是用jQuery.fn.extend()。

差不多就这样吧,这是我的个人理解,若是各位看客有更佳的看法,欢迎提出来。

文章来至:近乎sns开发分享社区

© 著作权归作者所有

小近
粉丝 5
博文 13
码字总数 7244
作品 0
青岛
程序员
私信 提问
jQuery.extend和jQuery.fn.extend的区别

jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来。很多地方说的也不详细。这里详细说说之间的区别. 工具/原料 jQuery库。 javascript 方法/步骤 我们先把jQuer...

zwjjap
2015/07/23
0
0
$.fn.extend 和$.extend函数

区别和详解:jQuery extend()和jQuery.fn.extend() 首先是简单的概述区别:$.extend()是类方法 $.fn.extend()是原型方法 对象方法和原型方法类似 可参考 :我的 js的protype (1)(2) 1、认...

ke_ry
2016/09/29
0
0
强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu
2018/05/25
0
0
jquery.fn.extend与jquery.extend

jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn....

i33
2012/06/29
0
0
jquery中extend和fn.extend的使用

jQuery为开发插件提供了两种方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给...

行者PHPer
2012/05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jenkins定时构建时间设置

举几个例子: 每隔5分钟构建一次 H/5 * * * * 每两小时构建一次 H H/2 * * * 每天中午12点定时构建一次 H 12 * * * 每天下午18点定时构建一次 H 18 * * * 在每个小时的前半个小时内的每10分钟...

shzwork
27分钟前
1
0
Myeclipse 问题记录

1. 创建maven聚合(pom) 工程 ,子项目会带上 maven app这些文字,删掉后会导致工程文件在working set里消失,解决办法:右键子项目 import as project 解决问题。...

无敌小学僧
54分钟前
1
0
《Chez Scheme初探》定义变量、递归、测试性能、并列代码编写

普通fib函数 (define (fact n) (if (= n 1) 1 (* n (fact (- n 1)) ) )) 尾递归fib函数 (define (fact-tail n) (fact-rec n n))(defi......

flash胜龙
54分钟前
1
0
任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击!

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击! 如果你是华为的老板,看到一条传遍网络的“美国封锁华为”、“华为禁令”的消息,你会怎么办? 昨天上午,华为创始...

forespider
今天
3
0
Java HTTP 组件库选型看这篇就够了

最近项目需要使用 Java 重度调用 HTTP API 接口,于是想着封装一个团队公用的 HTTP client lib. 这个库需要支持以下特性: 连接池管理,包括连接创建和超时、空闲连接数控制、每个 host 的连...

Java面经
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部