• 学习源码第五天(难得可贵)


     else {
                elem = document.getElementById(match[2]);  // 以id的形式获取元素
    
                // Check parentNode to catch when Blackberry 4.6 returns
                // nodes that are no longer in the document #6963
                if (elem && elem.parentNode) {
                  // Inject the element directly into the jQuery object
                  this.length = 1;
                  this[0] = elem;
                }
    
                this.context = document;
                this.selector = selector;
                return this;
              }

    这里处理的是rquickExpr另一种情况'#aa'的形式,首先用原生方法通过match[2](‘#dd’这种的字符串)获取元素,然后如果元素存在就把this的length改为1,‘0’项就是获取到的元素节点,context的作用域因为是id的形式所以是document,selecor作为值添加到this.selector属性中,操作完成返回this

    说一下elem && elem.parentNode为什么要多此一举elem.parentNode,因为在Blackberry 4.6中克隆的节点虽然没有在DOM树中,但是可以通过id找到,所以真正在DOM树中的是有parentNode父节点的,不得不说考虑的真周到

    
    
     // HANDLE: $(expr, $(...)) ,只要
    else if (!context || context.jquery) {  //如果像$(expr, $(...)) 或者 $(expr) ,转变成$(document)
              return (context || rootjQuery).find(selector);//有第二个参数就返回第二个参数的jQuery对象,没有就返回$(doument),然后去调用find(),总之是$对象去掉用find()
                                       返回一个$节点对象
    // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { //处理$(expr, context)[也就是$('li',document)],也转变成$(document) return this.constructor(context).find(selector); }
    总之一定要变成用$对象去调用find(),把查找作用域都变成$(document),总之内部都是$(document).find(selector),这也解释了其实我们写$('li')这种内部做了一个$(document).find('li'),
    其实就是在当前DOM中去查li,当然这还没涉及到复杂选择器的情况

    this.constructor(context).find(selector);这句话十分巧妙,this.constructor是一个jQuery构造函数,回顾一下:

    jQuery = function(selector, context) {
          // The jQuery object is actually just the init constructor 'enhanced'
          return new jQuery.fn.init(selector, context, rootjQuery);
        },

    那么根据第一个参数是context,可知返回了一个init的实例(因为后文把$的原型给了$原型中的init的原型,所以相当于是一个$实例对象 )

    //$(节点)
    else
    if (selector.nodeType) { this.context = this[0] = selector; this.length = 1; return this; // HANDLE: $(function) // Shortcut for document ready }

     处理$()括号里面是节点对象$(li),this变为length属性为1,'0'项属性为DOM节点,context作用域也为DOM节点,这种情况不涉及到查找域,而用selector.nodeType判断表明了selector是一个DOM节点

  • 相关阅读:
    什么是用户画像——从零开始搭建实时用户画像(一)
    一站式Kafka平台解决方案——KafkaCenter
    Druid 0.17入门(4)—— 数据查询方式大全
    流媒体与实时计算,Netflix公司Druid应用实践
    解读银行卡支付背后的原理
    求求你了,不要再自己实现这些逻辑了,开源工具类不香吗?
    编程坑太多,Map 集合怎么也有这么多坑?一不小心又踩了好几个!
    设计数据库 ER 图太麻烦?不妨试试这两款工具,自动生成数据库 ER 图!!!
    一口气带你踩完五个 List 的大坑,真的是处处坑啊!
    轻轻一扫,立刻扣款,付款码背后的原理你不想知道吗?|原创
  • 原文地址:https://www.cnblogs.com/wchjdnh/p/10771020.html
Copyright © 2020-2023  润新知