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 ...
随机推荐
- Linux命令:source
语法 source filename 说明 . 的同义词
- 宝塔搭建laravel所需要的lnmp环境linux-nginx-mysql-php-composer-git
这里示例是使用 CentOS 7.4 哈:如果还没有服务器建议购买阿里云的或者是腾讯云的:这台服务器需要是未安装过 php 的环境:如果服务器已经被折腾过一番:建议备份下数据后重装下环境:阿里云和腾讯 ...
- maven+springMVC+mybatis+sqlserver数据
因为之前搭好的是maven+springMVC+mybatis+mysql数据库环境,但是在实际工作项目是使用的sqlserver数据库,本文是针对数据库从mysql切换到sqlserver数据库 s ...
- 基于WebGL架构的3D可视化平台—实现小车行走路线演示
小车行走路线演示New VS Old 刚接触ThingJS的时候,写的一个小车开进小区的演示,今天又看了教程中有movePath这个方法就重新写了一遍,其中也遇到了一些问题,尤其突出的问题就是小车过弯 ...
- loading data into a table（亲测有效）
一.实验要求 导入数据到数据库的表里 表内容如下: name owner species sex birth death Fluffy Harold cat f 1993-02-04 Cla ...
- 小组团队项目的NABCD分析
N:1.学校中有很多学生是外省的,然后不知道附近有什么地方周末可以去玩,有时候想记录自己每天发生的乐趣事情并且想跟别人分享.2.学校中学生有很多用不到的东西但是联系不到合适的买家.A:我们可以做一个软 ...
- 3D Math Keynote 2
[3D Math Keynote 2] 1.方向(diretion),指的是前方朝向.方位(orientation),指的是head.pitch.roll. 2.欧拉角的缺点: 1)给定方位的表达式不 ...
- 拦截过滤防御XSS攻击 -- Struts2.3 以及 2.5 的解决方式
使用Struts2框架开发的后台在防御XSS攻击的时候很多方式都不能用,因为Struts2对请求进行的二次封装有区别.以下针对Struts2的XSS攻击进行拦截过滤防御解决: Struts2.3 本方 ...
- Ionic2+WebApi 导出Excel转Pdf文件。
步骤: 1.首先在WebApi中先把excel生成好. 2.把excel转成Pdf,并返回下载的链接. 3.Ionic2的页面做好下载的接口. 嗯~思路很清晰,那么下面就来详细的操作吧. 以下是H5的 ...
- centos7 安装部署jenkins
一.简介 jenkins是一个Java开发的开源持续集成工具,广泛用于项目开发,具有自动化构建.测试和部署等功能,它的运行需要Java环境. 二.搭建环境准备:# cat /etc/redhat-re ...