学习zepto.js(对象方法)[5]
学习zepto.js(对象方法)[5]
clone:
该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件.
var $temp =$("div").clone();//并不接收任何参数.
方法的实现就是循环调用方法对象.然后将所有的dom元素克隆并返回
而且使用的深度克隆,就是说,会将节点下方的子节点统统克隆过来.
closest:
方法接收1-2个参数,第一个为selector(选择器),第二个为context(上下文);
方法会从调用节点开始,逐级向上匹配.
如果只传入selector,则会返回第一个匹配的元素.如同时传入了context,则只会寻找context的子节点.
(通俗来说就是如果能被匹配的元素不属于context,那么将会直接返回false)
selector参数也可以传入一个zepto对象.或一个dom集合.
而返回的元素则会属于传入的selector对象中的一个.
context的有效值为一个dom元素.
注意:返回值是与调用对象中的第一个元素有关的.
所以说返回值也只会是包含一个节点元素的zepto对象或是一个空对象[没有找到匹配的元素])
<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.js"></script>
<style type="text/css">
body *{
color: #000;
}
</style>
</head>
<body>
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script type="text/javascript">
$(".level-3").closest(".item-b").css("color","red");//匹配距离对象最近的.item-b元素
$(".level-3").closest(".item-ii").css("color","blue");//匹配距离对象最近的.item-ii元素
$(".level-3").closest("#one",$("#ii")[0]).css("background-color","green");//匹配距离对象最近的#one元素,并且匹配元素必须属于#ii元素内部
$(".level-3").closest($("ul")).css("background-color","yellow");//匹配距离对象最近的属于$("ul")中其中一个的元素
</script>
</body>
</html>
方法首先取出当前dom对象作为基点并赋值给node.collection默认的为false.如果传入的selector参数为一个object,则认为选择器是一个zepto对象,或者是一个dom对象(集合),并将转换为zepto对象的值赋给collection;
下边是循环,循环判断的条件为node存在,并且collection中不存在node(selector为object的情况下)或者node不匹配selector选择器(selector为string的情况下)
循环内部,如果node不等于context(上下文)并且node不为document对象,就将node的父节点赋值给node(直到node满足匹配条件或者循环值文档对象).否则直接赋值false,然后循环终止,返回false;
最终返回一个zepto对象,空的或者包含一个元素的zepto对象;
contents:
contents用来获取zepto所有对象的子节点(包括文本,注释),或者zepto某对象为一个iframe时,则获取该iframe的document对象引用;
直接使用zepto对象调用即可;
$("#temp").contents();// 如果temp为一个iframe对象,则返回它的contentDocument引用,否则返回该dom对象的所有child节点
首先是遍历zepto对象,然后返回每个对象的子节点或者document对象。contentDocument为iframe对象的属性,与contentWindow性质一样;
empty:
用来清空zepto对象的所有innerHTML值(dom内容,相当于移除所有子节点)。
$("#temp").empty();//该方法将清除#temp的innerHTML
代码也只是简单的遍历并给innerHTML赋值而已。
题外话:map方法与each方法的区别。两者回调函数的参数,是一样的。两者的区别在于结束循环的方式。each返回false结束循环,而map (我还真没发现返回null或undefined能停止它);
eq:
通过index来取出一个对象,如果为-1,则取出最后一个。
与get方法的区别是,get返回一个dom对象,eq返回一个zepto对象。
$("#test").eq(0);
$($("#test").get(0));
$($("#test").[0]);//此三条效果一样。
find:
find方法通过传入的一个参数来筛选出zepto对象符合条件的子节点集合并返回。
$('#myform').find('input, select');
$('input, select', $('#myform'));//这两条的结果是一样的。
首先判断是否传入选择器,如果没有则直接返回一个空的zepto对象;
如果选择器为一个对象,则将对象转换为zepto对象,然后通过filter筛选出一些匹配的节点,并存入result集合;
如果调用find方法的对象为一个单一的对象,则直接用过qsa方法(前几篇说过qsa方法),将选择器作为一个选择器,并将对象作为上下文传入;
否则循环zepto对象重复上边那一条;
(find方法可能说的不太细。如果有什么,还请大家一起交流)
- TensorFlow从0到1 - 15 - 重新思考神经网络初始化
- python2.7搬运--->TensorFlow - 深度学习破解验证码
- 来学习几个简单的Hive函数啦
- 推荐系统实战-基于用户的协同过滤
- 素数的筛法
- 听说GAN很高大上,其实就这么简单
- python3 解码base64遇到的问题与解决
- TensorFlow从0到1 - 16 - L2正则化对抗“过拟合”
- 使用虚拟环境,搭建python3+scrapy
- Matplotlib基础全攻略
- Python 小爬虫 - 爬取今日头条街拍美女图
- python3使用zookeeper和私钥解密及编码转化配置信息
- Python中os.path.dirname(__file__)的用法
- TensorFlow从0到1 - 18 - TensorFlow 1.3.0安装手记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 了解RefreshScope这篇短文就够了
- Educational Codeforces Round 83 (Rated for Div. 2) A~~E
- Codeforces Round #627 (Div. 3) 题解
- 牛客练习赛59 A~~D
- Codeforces Round #628 (Div. 2) A~~D
- AtCoder Beginner Contest 160 A ~ E
- SwiftUI:创建底部导航栏 tabBar
- AtCoder Beginner Contest 168 C
- 关于 Executor 和 ExecutorService
- 【队伍训练】Codeforces Round #660 (Div. 2)
- 【队伍训练2】 AtCoder Beginner Contest 165
- C# 的sql server like 的参数
- sql server 字符串替换函数REPLACE
- sql server 更新两个表的某个字段
- HTML 引用Css样式的四种方式