学习zepto.js(对象方法)[6]
first:
获取当前对象集合中的第一个dom元素。
$("div").first(); // 返回第一个div对象(zepto对象)
//相当于$("div").eq(0);
与之对应的是last
last:
获取当前对象集合中的最后一个dom元素。
$("div").last(); // 返回最后一个div对象(zepto对象)
//相当于$("div").eq(-1);
两方法不接收任何参数。
个人认为调用isObject方法没什么用,因为zepto对象集合里存放的都是dom元素。//也许是我无知吧- -
被大神点醒了。这样做也许是为了这种场景
get:
获取当前对象集合对应下标的某元素,传入参数为一个int下标,如果不传入参数,则将对象转换为一个普通数组并返回;
$("div").get(0); // 第0个。(dom对象,不是zepto对象)
$("div").get(); //所有div对象组成的一个数组
该方法与eq方法的区别在于,eq返回的是zepto对象,而get返回的是dom对象,$().get(0)相当于$()[0];
slice就是[].slice();
使用get并且不传入参数的对象前后变化图:
has:
传入参数为一个选择器字符串或者一个节点,返回的是对象集合中子节点包含参数的对象。
$("div").has("a"); // 会返回集合中所有包含a标签的对象
上述是传入一个选择器,也可以传入一个node节点作为参数
$("div").has(document.getElementById("link")); //返回集合中有子项为#link的对象
首先,filter方法会将返回值为true的子项装入一个集合。
在filter方法内,我们通过判断选择器是否为object来进行区分,如果是object,则调用contains方法,判断selector是否属于this。
否则通过当前对象来调用find方法并将selector传入,并调用size方法获取count(filter会自动将返回值转换为bool类型)。
parent:
获取对象集合所有的直接父节点。可以传入一个选择器,只留下符合选择器的父节点。
$("p").parent(); // 获取所有p标签的父节点
$("p").parent(".ads"); // 获取所有p标签的父节点className包含.ads的节点
pluck方法返回一个数组,参数是一个字符串,为属性名,返回的值是调用对象所对应的属性的值;
然后传入uniq方法,方法做了一个去重处理;
最外层的方法filtered,如果第二个参数selector不为空,则通过第一个参数调用filter方法并将第二个参数传入filter方法,否则直接返回第一个参数。
parents:
获取所有对象的所有父节点。直至html标签结束。可以传入一个参数,作为选择器筛选;
参数只能是一个选择器字符串;
返回的集合不会出现重复的元素;
如果想取出元素的直接父节点,使用parent;
如果想取出第一个符合筛选条件的父节点,使用closest。
$("p").parents(); // 获取所有p标签的所有父节点
$("p").parents(".ads"); // 获取所有p标签的所有父节点className包含ads的节点
//使用parents如果不传入参数,则始终会包含一个body以及html元素;
方法首先声明一个数组用于存放dom元素,将this赋值给nodes变量;
使用一个while循环,条件为nodes.length > 0;
在循环内部,通过$.map给nodes进行赋值,map方法内部将node赋值为node的父节点,
然后判断,如果节点不是document并且该节点不存在于ancestors数组中,则将节点push至数组,并返回node。
所以说循环停止的条件就是node节点为document时。
最后调用filtered方法并返回。
siblings:
获取对象所有的兄弟节点。参数可以是一个选择器字符串,如传入参数则根据选择器过滤。
$("p").siblings(); // 获取所有p标签的同级标签
$("p").siblings(".ad"); // 所有的p标签的同级的className包含ad的元素
通过siblings获取到的dom元素会重复。
方法内部用到了一个children方法。
方法内部取出元素的父节点并传入children方法,返回元素的父节点的子节点,相当于自己的所有兄弟节点以及自身。
通过该返回集合call一下filter方法。
并将除了自身以外的所有节点返回。
最后通过filtered方法进行筛选,返回;
注意,siblings获取的元素会重复,会重复,会重复(重说三);
就像这样,script标签出现了两次;
ok,先说到这里了。写写博客练习一下语言表达能力,感觉自己能理解了,还是说不好,纠结ing...
学习zepto.js(对象方法)[6]的更多相关文章
- 学习zepto.js(对象方法)[3]
继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<s ...
- 学习zepto.js(对象方法)[5]
继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. ...
- 学习zepto.js(对象方法)[4]
今天说说那一套获取元素集合的一些方法: ["children", "clone", "closest", "contents&qu ...
- 学习zepto.js(对象方法)[1]
zepto也是使用的链式操作,链式操作:函数返回调用函数的对象. 但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说 ...
- 学习zepto.js(对象方法)[2]
今天来说下zepto那一套dom操作方法, prepend,append,prependTo,appendTo,before,after,insertBefore,insertAfter; 按着从内到 ...
- 学习zepto.js(原型方法)
学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...
- 学习zepto.js(原型方法)[1]
新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): 方法接收一个字符串,将连字符格式的字符串转为 ...
- 学习zepto.js(原型方法)[2]
接着昨天的来,继续说原型方法,昨天的传送阵(昨天出了点小意外,博文经过WP手机的UC浏览器进行编辑后标签就露出来了- -,现已修复); $.grep(): 作用与Array.filter类似(其实就是 ...
- 学习zepto.js(Hello World)
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 昨天听说了zepto.js,正好最近也比较闲 ...
随机推荐
- EF-DbUpdateException--实体类和数据库列不对应的解决方案
错误信息 1.VS实体类里面的字段 2数据库里面的字段 猜测是因为字段数不匹配导致的 3删除多余字段 5.结果 错误信息贴上: -------------------------Log_Header- ...
- 学习3ds max插件开发过程中的一些小结
1. 3ds max是以树状结构来管理整个场景的,每个树节点类型为INode 2. Interface类很关键,可以通过其中的GetRootNode.NumberOfChildren和GetChild ...
- 【求助】WPF 在XP下 有的Textbox光标会消失
最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...
- 斐讯Fir302b救砖教程
首先本人是路由器小白,不算是硬件改装高手,昨天收到了微信活动中的斐讯Fir302b,大概当时得奖的有300人,所以最近肯定很大一批朋友手里有这样的一款路由. 上网查了一下,此款路由可以刷基于tomat ...
- 小菜学习Winform(一)贪吃蛇2
前言 上一篇<小菜学习Winform(一)贪吃蛇>中实现了简单版的贪吃蛇,在文章末也提到需要优化的地方,比如使用oo.得分模式.速度加快模式和减少界面重绘.因为是优化篇,实现方式上一篇有, ...
- 纪念我曾经的 JAVA 姿势--转
原文地址:https://segmentfault.com/a/1190000007122432?hmsr=toutiao.io&utm_medium=toutiao.io&utm_s ...
- canvas实现拖动页面时显示窗口视频
简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...
- 小白Linux入门 四
http://edu.51cto.com/lesson/id-11372.html 28了 文件管理类命令 目录: mkdir mkdir /tmp/x mkdir -p /tmp/a/b -pv b ...
- CloudNotes之桌面客户端篇:增强的笔记列表
今天,我发布了CloudNotes的一个更新版本:1.0.5484.36793.这个版本与1.0.5472.20097不同的是,它拥有增强的笔记列表,与之前单调的列表系统相比,新的笔记列表不仅可以显示 ...
- TeamCity : 安装 Agent
笔者在前文中介绍了 TeamCity Server 的安装过程,本文介绍在 Ubuntu Server 14.04 中安装 TeamCity Agent.Ubuntu Server 上已经创建了用户 ...