jQuery源码学习笔记

Posted 2020-10-09

在慕课网上学习jQuery源码，做一些笔记小研究。

第1章 节点遍历 

第2章 文档处理 

第3章 元素操作 

第4章 样式操作 

第5章 事件体系 

第6章 数据交互 

第7章 动画引擎 

首先瞅瞅目录，大概可以了解一下这个是怎么讲的QAQ。

今天学习的是节点遍历。

遍历的对象主要是：1 祖先 2 同胞兄弟 3 后代 4 过滤

 

我们先看祖先。

.parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象。

.parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找

.parentsUntil() 方法会找遍所有这些元素的前辈元素，直到遇到了跟参数匹配的元素才会停止。返回的jQuery对象中包含了所有找到的前辈元素，除了与 .parentsUntil() 选择器匹配的那个元素。

简单来说.parent()是一个父元素，最近的那个，.parents是所有的父元素。.parentsUntil()是你可以传入一个搜寻终止点。

然后大概来看看它的写法（首先看看nodeType：http://www.w3school.com.cn/jsref/prop_node_nodetype.asp）

function parent(elem) {
  var parent = elem.parentNode;  
  //如果父亲节点是DocumentFragment就返回null
  return parent && parent.nodeType !== 11 ? parent : null;
}


function parents(elem){
  var matched = [];
  //如果元素存在父元素且元素不是根节点
  while ( (elem = elem[ ‘parentNode‘ ]) && elem.nodeType !== 9 ) {
    //如果是元素类型就加入到数组中
    if ( elem.nodeType === 1 ) {
      matched.push( elem );
    }
  }
  return matched;
}

function parentsUntil(elem, filter) {
  var matched = [],
    until,
   //如果没有定义过滤器，就把truncate设为false
    truncate = filter !== undefined;
    
  while ((elem = elem[‘parentNode‘]) && elem.nodeType !== 9) {
    if (elem.nodeType === 1) {
      //如果设置了过滤器就执行以下
      if (truncate) {
        //元素名称小写化比对是否是终止元素
        if(elem.nodeName.toLowerCase() ==filter){
          break;
        }
      }
      matched.push(elem);
    }
  }
  return matched;
}

 

兄弟节点

//定义了一个公共的函数，减少重复的代码。
//elem中心元素，dir是寻找元素的类型,until是终止元素的标签名或者类名
function dir(elem, dir, until) {
  var matched = [],
    truncate = until !== undefined;
  while ((elem = elem[dir]) && elem.nodeType !== 9) {
    if (elem.nodeType === 1) {
      if (truncate) {
        if (elem.nodeName.toLowerCase() == until || elem.className == until) {
          break;
        }
      }
      matched.push(elem);
    }
  }
  return matched;
}

//后面全部的兄弟节点
function nextAll(elem) {
  return dir(elem, "nextSibling");
}

//前面全部的兄弟节点
function prevAll(elem) {
  return dir(elem, "previousSibling");
}

function nextUntil(elem, until) {
  return dir(elem, "nextSibling", until);
}

function prevUntil(elem, until) {
  return dir(elem, "previousSibling", until);
}

function sibling(cur, dir) {
  while ((cur = cur[dir]) && cur.nodeType !== 1) {}
  return cur;
}

function next(elem) {
  return sibling(elem, "nextSibling");
}

function prev(elem) {
  return sibling(elem, "previousSibling");
}

.next() 获得自己同族的下一个同胞

.prev() 获得自己同族的上一个同胞

.siblings() 获得自己同族的所有同胞除了自己

感觉有点疑惑这个siblings...今天先学习到这里吧。