今天想做树形导航栏,查找了资料,找到了一个框架,比较小所以研究其中的代码,发现第一句话就把我难住了,主角是——jQuery.fn。

在此,再次停住,只好继续找资料,现在整理下自己所理解到的知识。

一,jQuery.fn是什么 
      答:从jqurey源代码,如下小段:

  1. jQuery.fn = jQuery.prototype = {
  2. constructor: jQuery,
  3. init: function( selector, context, rootjQuery ) {
  4. ............
  5. }
  6. }

可以看出,jQuery.fn == jQuery.prototype, 即jQuery.fn是 jQuery.prototype别称。

在这里我们停一下,说说让我还一直头疼的prototype属性或对象,怎么说呢,prototype属性或对象就相当于一个指针,指向某个object,这个object就可以称为子类对象的原型,那么我们可以间接地访问指向object的属性跟方法,也就差不多当前对象继承的指向的某个object。这里有个问题,就是如果指向的某个object有属性跟当前对象的属性相同的话怎么办,很简单,一句话——就近原则,从当前对象找,找到返回,没有去prototype指向的object里面找,没有在去prototype指向的object的prototype指向的object找,一层一层地找下去,知道找到为此。例子如下

  1. <script type="text/javascript">
  2. var animal = function(){
  3. this.name= "dfsdfsdf";
  4. this.sex= 'male';
  5. };
  6. var a = new animal();
  7. alert(a.name);
  8. var cat =  function(){
  9. this.play =  function (){
  10. alert('cat play')
  11. };
  12. };
  13. cat.prototype = new animal();
  14. cat = new cat();
  15. alert(cat.name);
  16. cat.name = "ddd";
  17. alert(cat.name);
  18. </script>

头疼到此,接回,继续jQuery.fn 
       从上面里面也可以看出prototype就相当于给某个类添加属性或者方法,那么,这样的话,我们就可以逆推一下下, jQuery.prototype——》jQuery.fn就是给jQuery类添加新的属性或者方法,来,我们来看下,材料如下:

  1. //给jQuery打洞,新添的方法
  2. $.fn.extend({
  3. sayHello: function(){
  4. $(this).click(function(){
  5. alert("hello jquery!");
  6. });
  7. }
  8. });
  9. //html代码
  10. <input type="button" value="sayHello" id="sayHello"/>
  11. //使用我们给jQuery新添的方法
  12. $(function(){
  13. $('#sayHello').sayHello();//这个我们可以弹出hello jquery!
  14. });

到此,可以认识Query.fn了 
     接下来,脑补一下,类似的知识jQuery.extend(object);这个方法 
     不错,它扩展的方法就是米饭,可以直接用,是jQuery类的静态方法。

  1. $.extend({
  2. add: function(a,b){
  3. return a + b ;
  4. }
  5. });
  6. alert($.add(3,4));//piapia出来个7

意想得到吧,OK,到此over,继续那小插件去鸟。 
      我是菜鸟,请拍砖。

全面认识jQuery.fn,菜鸟总结的更多相关文章

  1. jQuery源码-dom操作之jQuery.fn.html

    写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...

  2. jquery.fn.extend与jquery.extend--(初体验二)

    1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...

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

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

  4. 记jQuery.fn.show的一次踩坑和问题排查

    最近很少已经很少用jQuery,因为主攻移动端,常用Zepto,其实很多细节和jQuery并不一样.最近又无意中接触到了PC的需求和IE6, 使用了jQuery,刚好踩坑了,特意记录一下. 本文内容如 ...

  5. jQuery.extend和jQuery.fn.extend的区别【转】

    解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...

  6. ES6的Iterator,jquery Fn

    ES6的Iterator对象详解 Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指 ...

  7. jQuery原生框架中的jQuery.fn.extend和jQuery.extend

    extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...

  8. jQuery.fn.extend() 与 jQuery.extend()

    jQuery.fn如何扩展. jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类 ...

  9. jQuery.fn.extend(object) object中this的指向

    看到下面的代码后,一下子懵逼了.这个this指向哪儿去了. jQuery.fn.extend({ check: function() { return this.each(function() { t ...

随机推荐

  1. MongoDB之一介绍(MongoDB与MySQL的区别、BSON与JSON的区别)

    MySQL与MongoDB的操作对比,以及区别 MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL ...

  2. JQuery实现分页程序代码,源码下载

    Web开发,分页在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuery实现分页,并且使用 JQuery模板显示 ...

  3. Linux 通过YUM安装rzsz

    yum自动安装: yum install lrzsz

  4. 《Linux设备驱动程序》 笔记1

    驱动程序的任务 通常来讲,驱动(模块)要执行两类任务: 模块中的某些函数作为系统调用的一部分执行(按照既定规则填补必需的系统调用模块) 其他函数负责终端处理 内核中的并发 为什么考虑并发问题: Lin ...

  5. the behavior of the UICollectionViewFlowLayout is not defined because:

    the behavior of the UICollectionViewFlowLayout is not defined because:    the item height must be le ...

  6. 60分钟内从零起步驾驭Hive实战学习笔记

    本博文的主要内容是: 1. Hive本质解析 2. Hive安装实战 3. 使用Hive操作搜索引擎数据实战 SparkSQL前身是Shark,Shark强烈依赖于Hive.Spark原来没有做SQL ...

  7. HDFS的Shell

    调用文件系统(FS)Shell命令应使用 $HADOOP_HOME/bin/hadoop fs 的形式. 所有的FS Shell命令使用URI路径作为参数. URI格式是scheme://author ...

  8. Hadoop MapReduce概念学习系列之shuffle大揭秘(十九)

    shuffle是非常重要!一定要深入理解和多实践. 缓存,分组,排序,转发,这些都是mr的shuffle. Soga 我想得到按流量来排序,而且还是倒序,怎么达到实现呢?这就牵扯到排序的的问题 默认是 ...

  9. ArrayList中元素去重问题

    如题所示,如果一个ArrayList中包含多个重复元素,该如何去重呢? 思路一以及实现: 声明2个ArrayList,分别为listA与listB ,listA为待去重list ,listB 保存去重 ...

  10. android学习笔记(入门篇)

    +号只是当你第一次定义一个资源ID的时候需要, 告诉SDK此资源ID需要被创建出来 对于所有的View默认的权重是0,如果你只设置了一个View的权重大于0,那么这个View将占据除去别的View本身 ...