$.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. Android 获取View在屏幕中的位置【转】

    Android 获取View在屏幕中的位置 https://blog.csdn.net/lonely_fireworks/article/details/7849643

  2. 知识点---前端处理支持emoji表情

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. docker学习-lnmp+redis之搭建lnp容器服务

    nginx+php7.0容器服务 本来想用单独的容器(nginx和php分开),但是因为是初学,php容器安装扩展的时候一直失败,所以就把centos+nginx+php放一起搭建了,优点是扩展简单, ...

  4. PhoenixFD插件流体模拟——UI布局【Foam】详解

    流体泡沫 本文主要讲解Foam折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Foam 主要内容 Overview 综述 ...

  5. python之字符串拼接：%和format

    使用百分号拼接字符串: 例如: msg='i am %s my hobby is...' %'abc' print(msg) 如果需要用2个%s呢?就使用括号例如: msg='I am %s my h ...

  6. numpy总结

    介绍 numpy是一个功能强大的python库.机器学习中,需要对矩阵进行各种数值计算,numpy对其提供非常好的库,用于简单和快速计算. 常用函数库 数组属性 ndarray.ndim:秩,即轴的数 ...

  7. QVariant类

    QVariant类: #include "widget.h" #include <QApplication> #include <QDebug> int m ...

  8. CentOS7 安装VNC

    系统环境:CentOS Linux release 7.6.1810Kernel:3.10.0-957.el7.x86_64系统现状:最小化安装,没有安装任何图形支持软件 安装图形化支持 不建议安装G ...

  9. [转] spring framework体系结构及内部各模块jar之间的maven依赖关系

    很多人都在用spring开发java项目,但是配置maven依赖的时候并不能明确要配置哪些spring的jar,经常是胡乱添加一堆,编译或运行报错就继续配置jar依赖,导致spring依赖混乱,甚至下 ...

  10. android中ScrollView嵌套ListView或GridView显示位置问题

    Android中ScrollView中嵌套ListView或GridView时在开始进入界面时总是显示中间位置,开头的位置显示不出来.这种情况下只需要在ScrollView的父控件中添加以下两行代码即 ...