$.contains(parent,node)  返回值为一个布尔值 ==> boolean 
parent,node我们需要检查的节点
检查父节点是否包含给定的dom节点，如果两者是相同的节点，返回 false。
zepto代码实现方式：
$.contains = document.documentElement.contains ?

    function(parent, node) {

      return parent !== node && parent.contains(node)

    } :

    function(parent, node) {

      while (node && (node = node.parentNode))

        if (node === parent) return true

      return false

    }

扩展：Node.contains() 返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。

应用：node.contains( otherNode )   
如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false.

  • node是否包含otherNode节点.
  • otherNode为node节点的后代节点 
    <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="utf-8" />
    
        <title></title>
    
        <!-- <script src="js/zepto.js"></script> -->
    
    </head>
    
    <body>
    
        <div id="div"></div>
    
        <div id="parent">
    
            <p id="p">p元素</p>
    
            <div id="child">div元素</div>
    
        </div>
    
    </body>
    
    <script>
    
        var oParent = document.getElementById('parent');
    
        var oP = document.getElementById('p');
    
        var oChild = document.getElementById('child');
    
        var oDiv = document.getElementById('div');
    
        var oBody = document.getElementsByTagName('body')[0];
    
        console.log(oParent.contains(oParent))// true
    
        console.log(oParent.contains(oChild))// false
    
        console.log(oParent.contains(oDiv))// false
    
    </script>
    
</html>

源码地址

zepto 源码 $.contains 学习笔记的更多相关文章

  1. Johnson 全源最短路径算法学习笔记

    Johnson 全源最短路径算法学习笔记 如果你希望得到带互动的极简文字体验,请点这里 我们来学习johnson Johnson 算法是一种在边加权有向图中找到所有顶点对之间最短路径的方法.它允许一些 ...

  2. zepto源码--init--学习笔记

    先展示init函数,由于笔记本屏幕太小,删掉了部分源码注释,才能在一屏内截图. 当我们调用$()的时候,便会直接调用zepto.init()生成zepto对象,跟jquery生成jquery对象类似. ...

  3. 试试看读一下Zepto源码

    在浏览器上(Safari.Chrome和Firefox)上开发页面应用或者构建基于html的web-view本地应用,你如PhoneGap,使用Zepto是一个不错的选择. Jquery和Zepto的 ...

  4. Zepto源码

    // Zepto.js // (c) 2010-2016 Thomas Fuchs // Zepto.js may be freely distributed under the MIT licens ...

  5. zepto源码--qsa--学习笔记

    zepto内部选择器qsa方法的实现. 简述实现原理: 通过判断传入的参数类型: 如果是'#id',则使用getElementById(id)来获取元素,并且将结果包装成数组形式: 如果是'.clas ...

  6. zepto源码--extend--学习笔记

    对象继承函数: $.extend(){},默认传递一个参数,需要继承的对象目标.函数展示: 最终实现的过程,需要调用工具函数extend,首先分析extend函数. 默认传递三个参数,继承的目标对象- ...

  7. zepto源码--fragment--学习笔记

    文档片段fragment函数默认传递三个参数: html文档片段字符串 name标签 properties额外添加的属性 函数内部实现过程: var dom, nodes, container; 中间 ...

  8. zepto源码--matches--学习笔记

    zepto的第一个函数,zepto.matches: 作用:用来匹配dom元素是否匹配某css selector. 它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, close ...

  9. c++ stl源码剖析学习笔记(一)uninitialized_copy()函数

    template <class InputIterator, class ForwardIterator>inline ForwardIterator uninitialized_copy ...

随机推荐

  1. CentOS7虚拟机配置ip地址

    首先安装后的虚拟机选NAT模式配置vm的虚拟网络编辑器(vmware中的编辑),NAT模式中查看DHCP的范围,配置子网(写成和电脑一样),在linux中进入/etc/sysconfig/networ ...

  2. Linux命令:dirs

    语法 dirs [-clpv] [+N | -N] 说明 打印目录栈内容. 不带任何参数,在一行里打印.空白分隔. /home/code/dir/crypto /home/code/a/b /home ...

  3. (转)php读取文件使用redis的pipeline导入大批量数据

    第一次写博客,哈哈,纯属用来记录一下自己工作中遇到的问题及解决办法. 昨天因为工作的需求,需要做一个后台上传TXT文件,读取其中的内容,然后导入redis库中.要求速度快,并且支持至少10W以上的数据 ...

  4. 如果测试UI

    1. 先分享几个链接 https://www.ranorex.com/resources/testing-wiki/gui-testing/ https://www.tutorialspoint.co ...

  5. 在anaconda下安装已经下载好Opencv4的痛苦回忆

    来来回回装了很多回,今天终于一鼓作气把它安装好,记录一下过程. 准备: Opencv4的安装包,可以在官网上下载 anaconda——主要目的是在anaconda下的某个environment中安装最 ...

  6. Linux 进程同步和通信

    为了同步进程所以需要进程通信 管道(有名:文件形式存在,无名:仅限于父子进程间通信) 消息队列 信号量 共享存储 套接字(可用于不同机器)

  7. Linux - 文件和目录常用命令

    文件和目录常用命令 目标 查看目录内容 ls 切换目录 cd 创建和删除操作 touch rm mkdir 拷贝和移动文件 cp mv 查看文件内容 cat more grep 其他 echo 重定向 ...

  8. PCA降维参数介绍

    https://www.cnblogs.com/pinard/p/6243025.html#undefined

  9. POJ-3660.Cow Contest(有向图的传递闭包)

      Cow Contest Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 17797   Accepted: 9893 De ...

  10. pm2管理node

    一般直接npm start起的退出命令行就没了,node后台管理工具pm2目前比较流行. npm install -g pm2 pm2 list pm2 start bin/www --name de ...