zepto 源码 $.contains 学习笔记
$.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 学习笔记的更多相关文章
- Johnson 全源最短路径算法学习笔记
Johnson 全源最短路径算法学习笔记 如果你希望得到带互动的极简文字体验,请点这里 我们来学习johnson Johnson 算法是一种在边加权有向图中找到所有顶点对之间最短路径的方法.它允许一些 ...
- zepto源码--init--学习笔记
先展示init函数,由于笔记本屏幕太小,删掉了部分源码注释,才能在一屏内截图. 当我们调用$()的时候,便会直接调用zepto.init()生成zepto对象,跟jquery生成jquery对象类似. ...
- 试试看读一下Zepto源码
在浏览器上(Safari.Chrome和Firefox)上开发页面应用或者构建基于html的web-view本地应用,你如PhoneGap,使用Zepto是一个不错的选择. Jquery和Zepto的 ...
- Zepto源码
// Zepto.js // (c) 2010-2016 Thomas Fuchs // Zepto.js may be freely distributed under the MIT licens ...
- zepto源码--qsa--学习笔记
zepto内部选择器qsa方法的实现. 简述实现原理: 通过判断传入的参数类型: 如果是'#id',则使用getElementById(id)来获取元素,并且将结果包装成数组形式: 如果是'.clas ...
- zepto源码--extend--学习笔记
对象继承函数: $.extend(){},默认传递一个参数,需要继承的对象目标.函数展示: 最终实现的过程,需要调用工具函数extend,首先分析extend函数. 默认传递三个参数,继承的目标对象- ...
- zepto源码--fragment--学习笔记
文档片段fragment函数默认传递三个参数: html文档片段字符串 name标签 properties额外添加的属性 函数内部实现过程: var dom, nodes, container; 中间 ...
- zepto源码--matches--学习笔记
zepto的第一个函数,zepto.matches: 作用:用来匹配dom元素是否匹配某css selector. 它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, close ...
- c++ stl源码剖析学习笔记(一)uninitialized_copy()函数
template <class InputIterator, class ForwardIterator>inline ForwardIterator uninitialized_copy ...
随机推荐
- Python3 多线程、多进程
python中的线程是假线程,不同线程之间的切换是需要耗费资源的,因为需要存储线程的上下文,不断的切换就会耗费资源.. python多线程适合io操作密集型的任务(如socket server 网络并 ...
- 初探LaTeX
第一次使用LaTeX 步骤 1 安装LaTeX 通过官网http://www.tug.org/mactex/mactex-download.html下载Mac版LaTeX. 安装成功后会出现 步骤 ...
- java学习--自定义类的实例的大小比较和排序
我们知道Object类有一个equals方法,用于比较两个对象是否相等 我们只要在自定义类中重写了equals方法(若不重写就是比较两个实例的地址,相当于==)就可以用来比较该类的两个实例是否相等 问 ...
- Ruby on Rails 开发笔记
安装 Ruby on Rails Install Rails: A step-by-step guide 创建应用 # 创建新的应用程序 $ rails new blog $ cd blog # 启动 ...
- pyqgis学习
1. 错误:ImportError: No module named qgis.core解决方法:python的qgis,初始化变量:D:\PROGRA~1\QGIS3~1.0\OSGeo4W.bat ...
- android手机旋转方向识别
private OrientationEventListener mOrientationListener; private String TAG = "MainActivity" ...
- 如何使用tensorboard查看tensorflow graph****.pb文件的模型结构
参考网上的:https://github.com/tensorflow/tensorflow/issues/8854 import tensorflow as tf from tensorflow.p ...
- cpu资源长期使用率过高导致系统内核锁问题
服务器跑大量高负载程序,会造成cpu soft lockup. 解决办法: #追加到配置文件中 echo 30 > /proc/sys/kernel/watchdog_thresh #查看 [r ...
- Java框架spring 学习笔记(十一):aop相关概念
为什么要引入aop? 比如如下情景: 在父类的方法名称发送了变化,在子类调用的方法也需要变化,当工程规模越来越大的时候,维护起来相当不方便,于是就引入了横向切面aop. aop的相关概念: 连接点:类 ...
- pycharm 配置svn
1.找到本地svn.exe 2.配置svn路径 3.输入svn路径,然后会进行密码校验 问题 本地的TortoiseSVN在bin目录没有发现svn.exe 原因: 安装TortoiseSVN的时候 ...