$.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. SQL Select 语句小数位数影响计算的准确率的问题

    在财务数据计算中,特别是分摊过程中,0.0001% 和0.00012%看似极小的差异,但是会造成最后求和很大的差异,因此,我们在计算中需要尽可能多的保留占比的小数位数 可以在SELECT CONVER ...

  2. 初识Scratch 3.0

    之前在帮朋友搜集少儿编程教育资料的时候,发现了麻省理工开发的积木式编程语言的Scratch,最近有空玩了下,感觉很惊艳,我能想象用它做一些有趣的事情,Scratch把编程元素变成像乐高积木一样,可以通 ...

  3. 基于Ubuntu系统XAMPP环境安装以及DVWA渗透测试系统安装（详解的不能再详解了）

    首先这是X勺年人生第二次博,用来记录一下转折于我而言.做个简介,这个Ubuntu是linux的一种吧,然 然后这个Ubuntu是我刚简单安装(在虚拟机上)没有经过任何配置,从头开始,我这绝壁的小白,其 ...

  4. Reactive Programming

    Reactive的表现 Reactive 规范是 JVM Reactive 扩展规范 Reactive Streams JVM,而 Reactive 实现框架则是最典型的实现: Reactive St ...

  5. Apple watch ，小米微信通知

    Applewatch怎么显示微信通知?iWatch显示微信消息通知设置方法.大家都知道Applewatch上收到微信消息,iWatch是不会显示通知的,需要用户自行设置才行.下面小编来教大家如何设置A ...

  6. windows安装tf

    https://www.cnblogs.com/lvsling/p/8672404.html

  7. windows 下用命令来操作定时任务

    cmd下定时执行命令可以使用 at 命令 或者 schtasks命令.at 语法:at +时间+运行程序schtasks语法:schtasks /creat /tn 设定定时运行的名字 /tr “运行 ...

  8. 使用kettle 的repository

    参考文献:原文:https://blog.csdn.net/m0_37979608/article/details/77096201 一.创建资源库的数据库 2.创建数据库资源库,如图 2.1.点击C ...

  9. keepalived vip 没有生成或者生成了ping不通？

    1 问题现象:keepalived已启动但vip 没有生成./var/log/messages日志不断刷屏 tail /var/log/messages Nov :: cache-redis- Kee ...

  10. 一些用Css实现的效果

    今天写一个笔试题,其中有一个是用css实现直角梯形的效果,我给出的答案是: <style> .wrap{ width: 100px; height: 50px; border-top:90 ...