jQuery源码解读(一)

210 阅读1分钟
  1. function( selector, context )传入选择器和上下文;初始化jQuery.fn.init()此时只知道选择器
1.  **context**: undefined
1.  **elem**: undefined
1.  **match**: undefined
1.  **root**: undefined
1.  **selector**: "#d"
  1. 判断选择器,不存在就返回this;判断选择器的根节点,没有根节点就设置根节点为rootjQuery(document);判断选择器的类型,可能是string,可能是DOMElement,可能是function,这边是‘#d’走的是string;判断选择器的是否是‘’,否则正则匹配,走rquickExpr.exec( selector )正则匹配;match结果:
1.  **match**: Array(3)
1.  **0**: "#d"
1.  **1**: undefined
1.  **2**: "d"
1.  **groups**: undefined
1.  **index**: 0
1.  **input**: "#d"
1.  **length**: 3
  1. 匹配 html 或确保没有为 #id 指定上下文,走的匹配#id的else语句,elem = document.getElementById( match[ 2 ] );这里是d,使用原始获取DOM节点的方式获取#d节点elem
  2. 判断节点elem的存在性以及它的父节点是否存在(是body),this.length = 1; this[0] = elem,这里的this是jQuery.fn.init(1),设置它的长度属性,this[0],上下文,选择器,然后返回这个this;
1.  this: jQuery.fn.init(1)
1.  **0**: div#d
1.  **context**: document
1.  **length**: 1
1.  **selector**: "#d"
1.  [[Prototype]]: Object(0)
  1. 回到一开始的地方,return new jQuery.fn.init( selector, context ) ;回到$('#d').text('divdiv') ;🔚,还没完,走完脚本会到function completed(),主要清除方法document.removeEventListener( "DOMContentLoaded", completed );``window.removeEventListener( "load", completed );``jQuery.ready();后者是jq的扩展jQuery.extend,结束