jQuery核心（4-4）

jQuery

以函数的三种角色解读jQuery

  • [ ] 普通对象：
  • [ ] 普通函数：
  • [ ] 类：

jQuery 或 $ 的定义和调用

  • [x] 作为普通函数返回一个实例

    • [ ] 为什么外界可用jQuery或$

      1
      window.jQuery=window.$==jQuery(闭包中私有函数)

    • [ ] jQuery是谁 ( 闭包中私有函数 )

      1
      2
      3
      var jQuery = function(selector, context) {
          return new jQuery.fn.init(selector, context); //可理解为返回的是个jQuery类的实例
      }

    • [ ] jQuery函数中参数

    • selector:
      • [string] 选择器类型
      • [object] JS原生对象 ==> $(this)
      • [function] 回调函数 == > 等价于(document).ready

    • context: 默认document

      • 传递原生js对象– > 能修改上下文（ context为原生js对象）
      • 传递jQuery对象– > 重构为选择器（ 但是context还是document）
      1
      2
          $("", document)    
      jQuery("", document)

【扩展1】jQuery选择器：就是函数执行返回个jQuery这个类的实例–>创建个jQuery类的实例
【扩展2】$("#mydiv") === $("#mydiv")//false 创建的是不同的实例

jQuery如何增加属性和方法

  • [x] 1、jQuery当做类在原型上增加属性方法

    • 这个类的原型上定义了很多属性方法：通过 选择器获取的每个实例 都可调用原型上的方法（属性，文档处理，筛选，ajax、事件、工具、动画）

      1
      2
      3
      4
      5
      6
      jQuery.fn = jQuery.prototype = {
          constructor: jQuery,//函数执行返回的实例调用原型（作为一个类）
          length: 0
      }
      $("#mydiv").css();

  • [x] 把jQuery当普通对象的属性上增加方法

    • 在对象属性上增加常用方法：（属性，文档处理，筛选，ajax、事件、工具、动画）

      1
      2
      3
      4
      5
      jQuery.extend = jQuery.fn.extend = function() {
          // jQuery.extend    $.each()把jQuery当做普通对象，在jQuery对象上增加extend方法
          // jQuery.fn.extend 在原型中也增加extend方法  $('#mydiv').each()
      };

    • [ ] 1）向jQuery属性名上扩展(当做普通对象)–>完善类库，给类库增加核心方法

      1
      2
      3
      4
      5
      6
      7
      jQuery.extend({
          aa: function() {
              console.log("aa");
          }
      })
      $.aa()

    • [ ] 2）向jQuery原型上扩展(当做类)–>编写基于jQuery插件

      1
      2
      3
      4
      5
      6
      jQuery.fn.extend({
          bb: function() {
              console.log("bb");
          }
      })
      $().bb();