1. $.contains(parent,node)  返回值为一个布尔值 ==> boolean
    parent,node我们需要检查的节点
    检查父节点是否包含给定的dom节点,如果两者是相同的节点,返回 false
    zepto代码实现方式:
  1. $.contains = document.documentElement.contains ?
  2. function(parent, node) {
  3. return parent !== node && parent.contains(node)
  4. } :
  5. function(parent, node) {
  6. while (node && (node = node.parentNode))
  7. if (node === parent) return true
  8. return false
  9. }

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

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

  • node是否包含otherNode节点.
  • otherNode为node节点的后代节点
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8" />
    5. <title></title>
    6. <!-- <script src="js/zepto.js"></script> -->
    7. </head>
    8. <body>
    9. <div id="div"></div>
    10. <div id="parent">
    11. <p id="p">p元素</p>
    12. <div id="child">div元素</div>
    13. </div>
    14. </body>
    15. <script>
    16. var oParent = document.getElementById('parent');
    17. var oP = document.getElementById('p');
    18. var oChild = document.getElementById('child');
    19. var oDiv = document.getElementById('div');
    20. var oBody = document.getElementsByTagName('body')[0];
    21. console.log(oParent.contains(oParent))// true
    22. console.log(oParent.contains(oChild))// false
    23. console.log(oParent.contains(oDiv))// false
    24. </script>
    25. </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. UVa514 Rails (栈)

    题意:一列有n节车厢的火车按顺序进站,给你一个出站顺序,问你该火车的车厢能否以该顺序出站? 分析:出站的车厢满足后进先出的关系,所以我们考虑采用栈s 假设车厢一共有n节,n = 5: 进站顺序A:1 ...

  2. Scratch 数字游戏

    本想用Scratch给女儿做一个类似舒尔特方格的程序来认识数字和提升专注,想想这对刚刚3岁的孩子来说还是比较困难的,于是只做了3*3的方格,来认识数字1-9. 游戏地址:Random 9 v0.21 ...

  3. Spring再接触 Annotation part1

    使用annotation首先得加这两条代码 beans.xml <?xml version="1.0" encoding="UTF-8"?> < ...

  4. 64位的windows服务安装问题

    需要使用64位的安装exe文件才可以. @echo offC:\Windows\Microsoft.NET\Framework64\v4.0.30319\InstallUtil.exe -i &quo ...

  5. c++ protected 访问限定

    class A { protected: int mA; }; class B : public A{ public: void Func() { mA = 0; // ok A *a = this; ...

  6. 浅谈openstack中使用linux_bridge实现vxlan网络

    openstack环境: 1 版本:ocata 2 系统:ubuntu16.04.2 3 控制节点 1个 + 计算节点 1个 4 控制节点网卡为ens33,ip = 172.171.5.200 ens ...

  7. python day11 函数(第三篇)

    2019.4.11 S21 day11笔记总结 1. 函数小高级 ( 5* ) 1 函数名可以当作变量来使用 def func(): print(123) v1 = func # func代表函数的地 ...

  8. JAVA WEN开发环境与搭建

    一.下载安装JDK1.配置jdk开发环境JAVA_HOME 2.path 二.下载安装eclipse javaEE版本 三.安装部署tomcat3.1.安装: 直接解压到指定目录即可.(注:目录不要太 ...

  9. 冒泡排序 & 选择排序(升序)

    软件工程上老师讲流程图时,要求画冒泡排序和选择排序的流程图--------问题来了,故想基于百度两种排序后,自我总结的写些什么 请将一维数组a[n] 里面的 n个元素  升序排好 ---------- ...

  10. python标准库之operator(运算符模块)

    operator模块提供了一系列与Python自带操作一样有效的函数.例如:operator.add(x, y)和表达式x+y是等效的.那些特殊类的方法都有自己的函数名:为了方便起见,一些函数名是没有 ...